Accessing Angular inside Protractor Test

Asked
Active3 hr before
Viewed126 times

7 Answers

angularaccessinginside
90%

Is it possible to access angular within your protractor tests like you do in unit testing?,Use case is that I have a service that transforms text and I want to access that service to transform some data within the actual test script. I know there is the addMockModule method in protractor but I cannot figure out how to use it for this purpose., Is it fallacious to argue that something is correct, of good quality, or acceptable because a community of experts has established it as such? , By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Open the element explorer in protractor

. / node_modules / protractor / bin / elementexplorer.js
browser.get('http://angularjs.org/')
element(by.model('todoText')).evaluate('todos.length').
then(function(count) {
   console.log(count)
});
load more v
88%

Reading Time: 2 minutesHere’s an uber hacky tip that purists will complain about: you can actually access angular’s $injector from within your Protractor test if you’re determined to. But a little warning, this is a bit hacky.,Here’s how you can access Angular’s $injector in your Protractor test., Protractor is a one of the best ways to ensure your app is working correctly because you can write code that acts like a real user. But Protractor can also be confusing and difficult to work with when you're just starting out. We've put together an online course that will help you become a master at Protractor., You'll save tons of time and frustration learning Protractor because we've worked out everything you need to know. Become a Protractor testing master today!

  1. Somewhere in your app, set Angular’s $injector on $window like so:
  .run(function($injector, $window) {
     $window.$injector = $injector;
  });
load more v
72%

Is it possible to access angular within your protractor tests like you do in unit testing?,Use case is that I have a service that transforms text and I want to access that service to transform some data within the actual test script. I know there is the addMockModule method in protractor but I cannot figure out how to use it for this purpose.,For example. If you want to count the number of todos in the http://angularjs.org/ website (under Add Some Control), do this:,See an example: https://github.com/andresdominguez/protractor-meetup/blob/master/test/e2e/api-helper.js

Open the element explorer in protractor

. / node_modules / protractor / bin / elementexplorer.js
browser.get('http://angularjs.org/')
element(by.model('todoText')).evaluate('todos.length').
then(function(count) {
   console.log(count)
});
load more v
65%

Read the full documentation for more information about using GitHub Pages. , The site configured at this address does not contain the requested file. , If this is your site, make sure that the filename case matches the URL. For root URLs (like http://example.com/) you must provide an index.html file.

The site configured at this address does not contain the requested file.

If this is your site, make sure that the filename case matches the URL.
For root URLs (like http://example.com/) you must provide an index.html file.

http: //example.com/
load more v
75%

Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor runs tests against your application running in a real browser, using Selenium.,We can say in other words that Protractor is a tool that helps us to test Angular Apps using Selenium.,If you need particular stuff, then create your own docker image for running protractor otherwise you can simply use an existing one ( example another myexample),And in case you are wondering, is ONLY for Angular App. If you are app is not Angular better start looking another tool to test it.

verify version executing :

node - v

* or simply execute:

apt - get install npm

verify version executing :

npm version

* just execute:

npm install - g protractor

verify version executing :

protractor--version

The first step is pretty easy, just execute:

webdriver - manager updatewebdriver - manager start

The second step, write the test. Here I want to mention that protractor by default use Jasmine, with BDD makes really easy to write the test. ( You can use other instead Jasmine, but I’m not going to talk about those) . Instead of writing you can simply copy the following and name it helloWorld.js

describe('Angularjs homepage Hello World', function() {
   it('Say hello world', function() {
      browser.get('https://angularjs.org');
      element(by.model('yourName')).sendKeys('World');
      var welcomeMessage = element.all(by.tagName('h1'));
      expect(welcomeMessage.get(1).getText()).toEqual('Hello World!');
   });
});

Follow step is to configure, use this and name it as conf.js

exports.config = {
   framework: 'jasmine',
   seleniumAddress: 'http://localhost:4444/wd/hub',
   specs: ['helloWold.js']
}

Now you are ready and can execute:

protractor conf.js

I know that ALL people want examples, so here a simple example (I’m using Typescript 3.2.2, Angular 7+, just in case is different from yours)

// Copyright 2019 YOUR_COMPANY_NAME//#Get the BasePage from your folder structure, remember?import { BasePage } from '../../../base-page';export class SomethingImportantPage extends BasePage {    readonly ID_ITEM= 'myId';    ..........    // element getters    getMyButton() {        return this.getElementById(this.ID_ITEM);    }    ..........    // async operations    /**     * @method goSomewhere     * @desc YOUR_DESCRIPTION_HERE     */    async goSomewhere() {        await this.waitForElementToBeClickeable(this.ID_ITEM);        return this.getMyButton().click();    }   ........}

In order to run headless or inside a docker container ( I’m simplifying your life with this, trust me) use the following on your configuration file( conf.js):

'chromeOptions': {
   'args': ['--no-sandbox', '--headless', '--window-size=1600x1000']

Will explain briefly:

'--no-sandbox'

This one allows us to run the browser inside the docker container, MUST BE THERE.

'--headless'

Does this one really need an explanation? This is the one that tells, in this case, the chrome driver, to run headless.

'--window-size=1600x1000'
load more v
40%

Protractor is a popular end-to-end test framework that lets you test your Angular application on a real browser simulating the browser interactions just the way that a real user would interact with it. End-to-end tests are designed to ensure that the application behaves as expected from a user's perspective. Moreover, the tests are not concerned about the actual code implementation.,The rest of the tutorial is dedicated to writing Protractor tests in Angular.,Please let me know your thoughts and experiences about writing tests using Protractor or writing tests for Angular in general. I would love to hear them. Thanks for reading! ,Protractor runs on top of the popular Selenium WebDriver, which is an API for browser automation and testing. In addition to the features provided by Selenium WebDriver, Protractor offers locators and methods for capturing the UI components of the Angular application. 

In the former's case, you can leverage the power of Angular testing utilities and Jasmine to write not just unit tests for components and services, but basic UI tests also. However, if you need to test the front-end functionality of your application from start to end, Protractor is the way to go. Protractor's API combined with design patterns such as page objects make it easier to write tests that are more readable. Here's an example to get things rolling.

 /* 
  1. It should have a create Paste button
  2. Clicking the button should bring up a modal window
*/

 it('should have a Create Paste button and modal window', () => {

    expect(addPastePage.isCreateButtonPresent()).toBeTruthy("The button should exist");
    expect(addPastePage.isCreatePasteModalPresent()).toBeFalsy("The modal window shouldn't exist, not yet!");

    addPastePage.clickCreateButton();

    expect(addPastePage.isCreatePasteModalPresent()).toBeTruthy("The modal window should appear now");
 });
load more v
22%

Automation testing is usually considered to be a separate process which requires the automation QA team to write tests in a separate solution with their own build process and workflow. But I will show how we can easily build an automated test suite within any Angular CLI project. ,Protractor is configured by default in any Angular CLI project. We will use a demo app that I’ve created and we will cover it with automated tests step-by-step. At the end you will be able to download the complete project.,Angular CLI creates a single suite with a spec by default, but we will remove it and create our own specs from scratch. Locate the e2e folder under the root folder of your project and remove the e2e/app.e2e-spec.ts and e2e/app.po.ts files completely.,Now we have cleaner code and if something changes in our login process, we only need to change it in one place without modifying our tests.

. Once you have installed Node, open the terminal and run 
npm install angular - cli - g
load more v

Other "angular-accessing" queries related to "Accessing Angular inside Protractor Test"