Михаил БоднарчукCodegyre

Acceptance Testing in NodeJS

1

Who Am I

Michael Bodnarchuk

@davert

PHP, Ruby, JS developer from Kyiv, Ukraine

Creator of testing frameworks Codeception (PHP), CodeceptJS (Node)2

What is Acceptance TestingEnd-2-End, functional, etc

3

An App:

4

What’s inside a box?

5

Interface

6

GET A CHOCOLATE!!!Secured. No Credit Card Required. Free for OpenSource. Moneyback Guarantee. Just click this f*ckn green button!pleeeeease….

Made with Love by Willy Wonka

What should we test?

7

Chocolate Factory (unit/integration) - make a chocolate

Interface (acceptance/e2e) - user can get a chocolate

Who should write tests?

8

Unit/Integration -

Developers

Acceptance -

QA Engineers

We are developers!Let’s leave testing to QAs

9

THE ENDThank you

10

Well-tested software is a productof collaboration

11

Do it as team!

NodeJS for Test Automation Engineers (QA):

12

JavaScript???

How to deal with async?

Which tools to use?

How to test Single Page applications?

Using locators in dynamic HTML

Tools for Acceptance Testing

Selenium Webdriver

PhantomJS

Nightmare

ZombieJS

CasperJS13

Automating Browser with Selenium

14

How to deal with

Locating Elements

Single Page Applications

Cloud Testing

Data In Tests15

Locating Elements

“Hey, click me that green button”!

By CSS (JQuery style)

By XPath (Most flexible)

By Link Text

Reuse locators in PageObjects16

GET A CHOCOLATE!!!Secured. No Credit Card Required.

Single Page Applications

Browser automation faster than user

DOMReady vs “‘I’ve done it, master!”

Before each step:

executeAsync((done) => waitToRender(done))

17

Cloud Testing (SauceLabs, BrowserStack, TestingBot)

Testing app on different platforms (Windows, OSX)

Mobile testing (on real devices)

In different browsers (IE8+, FF, Opera, Safari)

Through Tunnels

Via WebDriver protocol 18

From 29$/month

Slower than local testing

Data overhead

Data in Tests

Isolation: Data should be cleaned between tests

Create/Delete all data inside a test

Loading fixtures into database

Loading database dump

Created/Deleted via API19

Testing Emails

Open Gmail in next tab, click the latest email….

Use MailDev, MailCatcher, MailHog, MailTrap

Check sent emails via REST API

20

Libraries for Acceptance Testing

Selenium Webdriver JS

webdriverio

Protractor

Intern

Nightmare21

NightwatchJS

CodeceptJS

WD.js

...

Different Bindings, Different APIs

client // webdriverio

.init()

.url('https://localhost/')

.setValue('input[name=login], 'john')

.setValue('input[name=password], '123456')

.click('input[type=submit]')

.getText('.welcome').then(function(text) {

return assert(text, 'Welcome');

});

driver.get('http://localhost/'); // Protractor

driver.findElement(protractor.By.name('login'))

.sendKeys('john');

driver.findElement(protractor.By.name('password'))

.sendKeys(‘123456’);

22

client // NightwatchJS

.url('http://localhost.com')

.setValue('input[type=login]', 'john')

.setValue('input[type=password]', '123456)

.click('button[type=submit]')

.assert.containsText('.welcome','Welcome')

.end();

How to choose?Investigate, check your requirements

23

Choosing Library

24

Best docs, flexible API, synchronous ⇒ webdriverio

Java-like official Selenium library ⇒ Selenium WebdriverJS

For AngularJS ⇒ Protractor

Most featured ⇒ NightwatchJS

Acceptance Testing + Unit Testing ⇒ Intern

CodeceptJSto rule them all

25

CodeceptJS

One framework using other libraries

Synchronous (not really, uses global promise)

Scenario Driven

With PageObjects, Interactive Shell, Error output... 26

Synchronous looking Test

Scenario('log in as user', (I) => {

I.amOnPage('/');

I.click('Login');

I.fillField('Username', 'john');

I.fillField('Password', '123456');

I.click('Enter');

I.see('Welcome');

}

27

// assertion from webdriverio helper

see(text) {

return this.browser.getText()

.then(function (source) {

return stringIncludes()[assertType](text, source);

});

// action from webdriverio helper

click(locator, context) {

let client = this.browser;

let clickMethod = this.browser.isMobile ? 'touchClick' : 'elementIdClick';

if (context) {

client = client.element(context);

}

return findClickable(client, locator).then(function (res) {

if (!res.value || res.value.length === 0) {

if (typeof(locator) === "object") locator = JSON.stringify(locator);

throw new Error(`Clickable element ${locator.toString()} was not found

by text|CSS|XPath`);

}

let elem = res.value[0];

return this[clickMethod](elem.ELEMENT);

});

}

// adding to global promise

recorder.addStep(new Step(helper, action), args);

return recorder.promise();

Scenario Driven: Executed Step by Step

• I am on page ‘/’

• I fill field ‘Username’, ‘john’

• I fill field ‘Password’, ‘123456’

• I click ‘Enter’

• I see ‘Welcome’

✓OK

28

Interactive Shell

29

PageObject, PageFragment

Scenario('log in as user', (I, loginPage) => {

loginPage.logInWith('john', '123456');

I.see('Welcome');

}

30

Automatically Injected

(angular-style)

// Login steps moved to loginPage:

logInWith(name, pass) {

I.amOnPage('/');

I.click('Login');

I.fillField('Username', name);

I.fillField('Password', pass);

I.click('Enter');

}

And….

Based on Mocha testing framework.

Designed for scenario driven acceptance testing in BDD-style

Uses ES6 natively without transpiler.

Selenium WebDriver integration using webdriverio (..Protractor, Nigthmare)

Easily create tests, pageobjects, stepobjects with CLI generators.

31

Try CodeceptJS today!

http://codecept.io

npm install -g codeceptjs

@codeceptjs

Author: Michael Bodnarchuk @davert 32

Conclusions

Acceptance Testing should be done by developers and QAs

Use the same language for code and tests

NodeJS browser testing is hard (various libraries, async)

Use REST API for data, fetching emails, etc

Use CodeceptJS33

Questions?

Michael Bodnarchuk

Follow me: @davert

https://github.com/codeception/codeceptjs

http://codecept.io

34