UNSUCKING AUTOMATED UI TESTS

CRAIG

TRADE ME

@phenomnomnominal

LEAN HEAVILY ON ANGULAR &

PROTRACTOR

PROMISES!

JavaScript paradigm for dealing with asynchronous code - like user interactions and API calls 

Encapsulates the idea that something will happen at some point, and it will tell you when it does. 

PROMISES!

doSomething
.then((result) => doSomethingElse(result))
.then((result) => doOneMoreThing(result))
.catch((error) => handleTheError(error))
.finally(() => andAlwaysDoThis());

PROMISES!

clickSomething
.then(() => typeSomething())
.then(() => checkThatSomethingShowedUp());

PROMISES!

Promises mean never having to guess when something will happen, so they significantly increase the robustness of UI tests

PAGE OBJECTS & GHERKIN/CUCUMBER

PAGE OBJECTS

Encapsulate behaviour in objects that describe parts of your application.

Talk about what happens, not how it happens

This moves all the fragility to one place. When your site changes, the Page Object breaks, but the steps of your test do not.

PAGE OBJECTS

this.When(/^I type in my username$/, function (done) {
    element(by.css('#UserName')).sendKeys('username');
    done();
});

this.When(/^I type in my password$/, function (done) {
    element(by.css('#Password')).sendKeys('secret');
    done();
});

this.When(/^I click the login button$/, function (done) {
    element(by.css('#LoginButton')).click();
    done();
});

BEFORE:

PAGE OBJECTS

// UserLogin.component.js
function UserLogin () {
    this.userNameInput = element(by.css('#UserName'));
    this.passwordInput = element(by.css('#Password'));
    this.loginButton = element(by.css('#LoginButton'));
}

UserLogin.prototype.login = function (username, password) {
    this.userNameInput.sendKeys(username);
    this.passwordInput.sendKeys(password);
    this.loginButton.click();
};

// WhenILogIn.step.js
this.When(/^I log in$/, function (done) {
    var UserLogin = new UserLogin();
    UserLogin.login('username', 'secret');
});

AFTER:

GHERKIN & CUCUMBER

Human readable, so anyone can understand

Conceptually simple, everything is a Given, When or Then

Given - set something up (in our case mock data)

When - perform some actions

Then - check what happened was what you expected