What is protractor?

protractorIs a framework used to write and execute end-to-end (e2e) tests, which explore the application as users experience it. In the e2e tests, one process executes the actual application and a second process executes transport tests that simulate the user’s behavior and affirm that the application responds in the browser as expected.

 

 

Keep in mind that Protractor…

 

  • Is not limited to any particular framework, actually is capable of evaluating any application that runs in a web browser.
  • Is an application written in NodeJS, uses written tests in JavaScript and uses WebDriver to control the browser.
  • Simulates browser interactions in the same way that a real user would use it.
  • offers locators and methods to capture the UI components of the angular application.
  • When you use Angular Cli, it is included by default in the e2e tests.

 

So what about E2E Tests?

 

The components of an application are tested in isolation when performing unit tests. However, this has the disadvantage of not being able to verify the integrity of the information as it is passed from one component of the application to another.

 

Using E2E tests will definitely solve this problem by interacting with the application as a regular user, using each part of the application and evaluating the responses for the expected behavior.

 

What is WebDriver?

 

Is a software testing environment for web-based applications that control the browser by communicating directly with it.

Protractor and Angular 2

 

By default, when we use Angular Cli, the protractor is included as a framework for the e2e tests. The configuration file is called protractor.conf.js and is included in the root of the application. In this file, the browser performs the tests (chrome comes by default) and you can configure additional browsers if required. The key called directConnect indicates that protractor directly accesses the browser controls. Although only applies to Chrome, if you need support for other browsers it is necessary to configure the Selenium server on your own, following the next steps:

 

  1. npm install protractor -g.
  2. webdriver-manager update.
  3. webdriver-manager start.
  4. Set false for the key directConnect in protractor.conf.js.
  5. Add the key: seleniumAddress: ‘http://localhost:4444/wd/hub‘ in protractor.conf.js.


Example

 

This is a basic example of the use of protractor to automate the tests in the angular framework 2. The test of the login of an application will be performed, with correct and incorrect credentials.

 

The file to write the end-to-end tests is in the e2e folder of the project and is called: app.e2e-spec.ts. Notice that it does not always have to be this way, it is possible to configure a different file in protractor.conf.js, section: specs, there you enter the name of the file that will be executed when writing the command to implement the tests, by default you have:

specs: [‘./e2e/**/*.e2e-spec.ts’].

 

Important: In order to perform the example, it was necessary to install java and its virtual machine.

Ready, set, go!Ready protractor

  1. Open the app.e2e-spect.ts file.
  2. Add: import {browser, element, by} from ‘protractor’, to be able to use protractor.
  3. Modify the app.e2e-spect.ts file so it looks like this:

import { browser, element, by,protractor } from ‘protractor’;

describe(‘custos-frontend App’, function() {

beforeEach(function(){

    //The code in this section will be executed before each block.

    browser.get(‘http://localhost:4200/login’);

});

it(‘NOT LOGIN’, function() {

/* In this part the html elements are obtained to establish a value. It should be mentioned that in the html file of the form for the login, the controls must have the attribute name = “email” and name = “password” respectively.

*/

    element(by.name(’email’)).sendKeys(‘carlosantillon@yopmail.com’);

    element(by.name(‘password’)).sendKeys(‘fail’);

    /* You get the button to simulate the click event. */

    element(by.buttonText(‘Sign in’)).click();

/* waitForAngularEnabled with true, it serves to wait for all the tasks $http and$ timeout to run. */

    browser.waitForAngularEnabled(true);

    /*The test will be satisfactory if you can not log in.

The way to check it is by getting the error element that is shown with a failed login, in this case, it is obtained by its id; If the element is present, the test will be taken as satisfactory. */

    expect(element(by.id(‘error’)).isPresent()).toBeTruthy();

});

it(‘LOGIN’, function() {

    browser.waitForAngularEnabled(true);

    element(by.name(’email’)).sendKeys(‘carlosantillon@yopmail.com’);

    element(by.name(‘password’)).sendKeys(‘87654321’);

    element(by.buttonText(‘Sign in’)).click();

    browser.waitForAngular();

    browser.get(‘/main/requests’);

    browser.waitForAngularEnabled(true);

/* If it is possible to log in, the request route will be accessed and if it matches the current route of the browser, the test will be considered satisfactory.. */

    expect(browser.getCurrentUrl()).toBe(‘http://localhost:4200/main/requests’);

});

4.  Execute the command: protractor in the editor’s console or in one located in the project’s path.

If the tests run correctly, you will see the following result:

 

Name_of_your_app App

✓ NOT LOGIN

✓ LOGIN

 

For instance, if in the first block, we place the credentials of the second, an error will be generated and the result would be something like:

 

✓ LOGIN

**************************************************

*                    Failures       *

**************************************************

 

1) Name_of_your_app App NOT LOGIN

 – Expected false to be truthy.

 

The NOT LOGIN test fails, because the error element is not found when entering correct credentials and logging in.

I hope this quick tutorial will help you to run your automatic tests with Protractor and Angular 2. I would have really appreciated some info like this when I first start as a developer, that’s the reason I’ve decided to share it with you. Feel free to leave a comment here if you have any doubt.

Cheers!

Carlos - Developer
Carlos Antillón   Developer

 

References


https://github.com/mxabierto/hackea-el-sistema/wiki/E2E-Testing-con-Protractor

https://sg.com.mx/revista/54/selenium-webdriver-un-ambiente-pruebas-continuas

https://www.protractortest.org/#/api

https://code.tutsplus.com/tutorials/getting-started-with-end-to-end-testing-in-angular-using-protractor–cms-29318