Is PROTRACTOR hurmfull for your health?

Protractor, what the ..?

...is an end-to-end test framework for Angular and AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.

angular+protractor

But, what is end-to-end testing?

End-to-End Testing is defined as a type Software Testing that not only validates the software system under test but also checks its integration with external interfaces. Hence, the name "End-to-End". The purpose of End-to-End Testing is to exercise a complete production-like scenario.

JS Testing tools and frameworks

  • launch your tests in the browser or Node.js
  • testing structure providers help you arrange your test files
  • assertion functions check if the results a test returns are as expected
  • generate and display test progress and results
  • provide mocks, spies, and stubs
  • generate and compare snapshots of component and data structures
  • generate code coverage reports
  • browser Controllers simulate user actions for Functional Tests
  • visual Regression Tools are used to compare your site to its previous versions visually by using image comparison techniques

To achieve the most flexible set functionality, it’s common to use a combination of several tools.

General Prominent Testing Tools

Unit and Integration Tests Frameworks

Functional Testing Tools

Everyone loves e2e tests:

  • developers, because they don’t write them
  • business, because they reflect the real user experience
  • testers, because they act at the user high level and reveal “visible” bugs

Prepare your appropriate test environment

Project Structure

Group your e2e tests in a structure that makes sense to the structure of your project


  |-- test
    |-- unit
    |-- e2e
      |-- page-objects
          home-page.js
          profile-page.js
          contacts-page.js
      home-spec.js
      profile-spec.js
      contacts-spec.js
  • Finding your e2e related files should be intuitive and easy
  • Makes the folder structure more readable
  • Clearly separates e2e tests from unit tests

Pattern Page Object

...simply models pages as objects within the test code.


Helps to avoid:
  • - Code duplication
  • - Maintenance problem
  • - Hard to understand

example.page-object.ts

import { browser, by, element, ElementFinder } from 'protractor';

export class ExamplePageObject extends BasePageObject {

  public async navigateToPage(): Promise {
    return super.navigateTo('/example-page');
  }

  public getExampleButton(): ElementFinder {
    return element(by.css('.example-button'));
  }

 // more methods...
}

example.spec.ts

import { ExamplePageObject } from '@pos/example.page-object';

describe('Example test suite', async () => {
  let examplePO: ExamplePageObject;

  beforeAll(async () => {
    examplePO = new ExamplePageObject();
    await examplePO.navigateToPage();
  });

  it('shold navigate to example page', async () => {
    expect(await examplePO.isPageOpened()).toBe(true, 'comment');
  });
}

Configs

  • build configs
    • set up environment prod/dev/mock
    • use proxy
    • run separate feature independently
  • protractor config
    • choose and configurate browser
    • choose framework: jasmine by default, mocha or custom
    • send options to the chosen framework
    • set up timeouts
    • include/exclude spec files
    • set up path to save logers output
    • execute some preparation before/after tests run
    • and more........

Chrome configuration example

capabilities: {
  browserName: 'chrome',
  maxInstances: 3,
  chromeOptions: {
    args: ['--headless', '--window-size=1920,1080'],
    prefs: {
      download: {
        default_directory: require('path').join(__dirname, '../..', 'data-file'),
        directory_upgrade: true
      },
      safebrowsing: {
        enabled: true
      }
    }
  }
}
};

Green console

vs

Red console

Vulnerable places

  • Wrong selectors
  • Non Angular app
  • Timers
  • Non stable tests
  • Dependent test suites

Useful links

  1. Great overview of JavaScript Testing tools and popular frameworks
  2. Nice to read about "15 Best Practices for Building an Efficient Protractor Automation Framework"
  3. FAQ and answers from real life situation how to do with Protractor
  4. Protractor Documentation

Q&A

presentation link

#presentation_link