What is protractor?

A way to measure the possible sharp angles of your Angular project

• Google product
• successor of the scenario runner
• E2E testing framework
• runs on top of selenium webdriver
• do things automatically in the browser

Locators & actions

• find elements
• perform actions
• retrieve values

All operations are async!

Locators

element(by.id('addbutton'));	// <button id="addbutton"></button>
element(by.css('some-css'));	// <some-css></some-css>
element(by.css('.special'));	// <span class="special"></span>

element(by.binding('first'));	// <span>{{first}}</span>
element(by.model('second'));	// <input ng-model="second">

element(by.css('my-css'));	// is the same as
$('my-css');			// short cut selector  ( css selectors )
						

Protractor documentation : locators

Finding multiple elements

element.all(by.css('.selector')).then((elements) => {
    /* elements is an array of ElementFinders. */
});

/* Number of elements */
element.all(locator).count();

/* Get by index (starting at 0) */
element.all(locator).get(index);

/* First and last */
element.all(locator).first();
element.all(locator).last();
                        

Protractor documentation : multiple elements

Actions

var el = element(locator);

/* Click on the element */
el.click();

/* Send keys to the element (usually an input) */
el.sendKeys('my text');

/* Clear the text in an element (usually an input) */
el.clear();

/* Get the value of an attribute, for example, get the value of an input */
el.getAttribute('value');
						

Protractor documentation : actions

Best practices in E2E testing

Mostly based on the styleguide by Carmen Popoviciu

• do not cheat on your tests

• don't retest what's unit tested
• wrap common elements in page objects
• don't mock unless you need to
• reset state before every test -> refresh / navigate

What is BDD & Gherkin

• Behaviour driven development
• Business definable and readable DSL
• Set of features describing behaviour

Feature files

Feature: This feature describes the scenarios of the set new password
         part of our authentication component

    Scenario Outline: The user is setting a new password ( valid link )

    Given user clicks the valid set new password link
    And '<password>' is the provided new password
    And '<repeatPassword>' is the repeated new password
    When submitting the set new password form
    Then the set new password form is validated '<valid>'

    Examples:
    | password | repeatPassword | valid |
    |          |                | false |
    | 123      |                | false |
    ...
    | 12345678 | 12345678       | true  |
                        

Feature files

• contain scenarios related to the feature
• Scenarios serve as documentation
• Scenarios define the tests to write

Gherkin documentation : docs