UNSUCKING AUTOMATED UI TESTS

CRAIG

TRADE ME

@phenomnomnominal

  • WAITS

  • FRAGILE ELEMENtS

  • HARD TO WRITE TESTS

WHAT SUCKS?

HOW TO FIX?

SMART CONSTRAINTS

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

EWW JAVASCRIPT.

TRACTOR!

UI FOR PROTRACTOR & CUCUMBER 

DEMO!

Unsucking automated UI tests

By Craig Spence

Unsucking automated UI tests

  • 2,575