AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep...
Transcript of AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep...
![Page 1: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/1.jpg)
![Page 2: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/2.jpg)
AUTOMATED END-TO-ENDTESTING WITH NIGHTWATCH.js
Vladimir Roudakov
29 Sep 2016 Front End bit.ly/dce16-nwatch
![Page 3: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/3.jpg)
Vladimir ROUDAKOV
bit.ly/dce16-nwatch
@VladimirAus
![Page 4: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/4.jpg)
![Page 5: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/5.jpg)
PrologueWHY TESTING?
![Page 6: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/6.jpg)
SOFTWARE DEVELOPMENT CYCLE
REQUIREMENTS
TESTS
IMPLEMENTATION
![Page 7: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/7.jpg)
1. Requirements
● Search for surname
● Display person’s information
![Page 8: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/8.jpg)
2. Manual test
● Go to search engine
● Type surname into search box
● Check for result in right hand side area
![Page 9: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/9.jpg)
![Page 10: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/10.jpg)
3. Automated test
● A: URL is available and <body> is visible
● B: Search button is visible
● Enter surname and click search
● C: Right hand side area is visible
● D: Right hand side area contains person’s details
![Page 11: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/11.jpg)
module.exports = {
'As a user I want to see name prediction in right hand side block' :
function (browser) {
browser
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.setValue('input[type=text]', 'buytaert')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.waitForElementVisible('#rhs_block', 1000)
.assert.containsText('#main', 'Dries Buytaert')
.end();
}
};
![Page 12: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/12.jpg)
4. Running the test
![Page 13: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/13.jpg)
1. Command line test runner
![Page 14: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/14.jpg)
2. Tests are in JavaScript
![Page 15: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/15.jpg)
3. Uses CSS selectors
● input[type=text]
● button[name=btnG]
● #rhs_block
● #main
![Page 16: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/16.jpg)
4. Continuous Integration support
![Page 17: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/17.jpg)
5. Cloud services support
![Page 18: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/18.jpg)
6. Easy to extend
● Custom commands
● Custom assertions
● Custom reporters
![Page 19: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/19.jpg)
REPORTS
![Page 20: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/20.jpg)
STANDARD PROCESS
Developer
F1F1F2
![Page 21: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/21.jpg)
STANDARD PROCESS
Developer
PM
F3, ...
F1F1F2F1F2
F2 ready?
Sure
![Page 22: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/22.jpg)
STANDARD PROCESS
BA
Developer
PM
F3, ...
F1F1F2F1F2
F2 ready?
Sure
Great! To production!
![Page 23: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/23.jpg)
STANDARD PROCESS
BA
DeveloperClient
PM
F3, ...
F1F1F2F1F2
F2 ready?
Sure
Great! To production!
F2 ready!
Great!
![Page 24: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/24.jpg)
STANDARD PROCESS
BA
DeveloperClient
PM
F3, ...
F1F1F2F1F2
F2 ready?
Sure
Great! To production!
F2 ready!
Great!
F1?
![Page 25: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/25.jpg)
![Page 26: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/26.jpg)
ADDING AUTOMATED TESTING
BA
DeveloperClient
PMF1F1F2
![Page 27: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/27.jpg)
ADDING AUTOMATED TESTING
BA
DeveloperClient
PMF1F1F2
![Page 28: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/28.jpg)
ADDING AUTOMATED TESTING
BA
DeveloperClient
PMF1F1F2
![Page 29: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/29.jpg)
ADDING AUTOMATED TESTING
BA
DeveloperClient
PMF1F1F2
Yes, but F1 is broken...
F2 ready?
![Page 30: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/30.jpg)
![Page 31: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/31.jpg)
Who like reports?
DEVELOPERS
Technical detailed report on
● New features and existing functionality
● Integration on latest test environment and UAT
● Sprint retrospective
![Page 32: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/32.jpg)
Who like reports?
INTERNAL TEAM: Managers, PMs, BAs
Report with less technical details on multiple environments
● Track sprint / release progress
● Measure velocity
● Integrate with internal tools: email, chat
![Page 33: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/33.jpg)
Who like reports?
CLIENTS
Report with no technical details on pre release environment
● Test coverage
● Ability to identify missing / not clarified features
![Page 34: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/34.jpg)
Report output
● Visual
● Command line
● JUnit XML
● Custom reporters, e.g. JSON
![Page 35: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/35.jpg)
TESTS
![Page 36: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/36.jpg)
Nightwatch tests
● Written in JavaScript
● Each test can have multiple assertions
![Page 37: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/37.jpg)
module.exports = {
'As a user I want to see name prediction in right hand side block' :
function (browser) {
browser
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.setValue('input[type=text]', 'buytaert')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.waitForElementVisible('#rhs_block', 1000)
.assert.containsText('#main', 'Dries Buytaert')
.end();
}
};
![Page 38: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/38.jpg)
module.exports = {
'As a user I want to see name prediction in right hand side block' :
function (browser) {
browser
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.setValue('input[type=text]', 'buytaert')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.waitForElementVisible('#rhs_block', 1000)
.assert.containsText('#main', 'Dries Buytaert')
.end();
}
};
![Page 39: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/39.jpg)
module.exports = {
'As a user I want to see name prediction in right hand side block' :
function (browser) {
browser
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.setValue('input[type=text]', 'buytaert')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.waitForElementVisible('#rhs_block', 1000)
.assert.containsText('#main', 'Dries Buytaert')
.end();
}
};
![Page 40: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/40.jpg)
module.exports = {
'As a user I want to see name prediction in right hand side block' :
function (browser) {
browser
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.setValue('input[type=text]', 'buytaert')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.waitForElementVisible('#rhs_block', 1000)
.assert.containsText('#main', 'Dries Buytaert')
.end();
}
};
![Page 41: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/41.jpg)
module.exports = {
'As a user I want to see name prediction in right hand side block' :
function (browser) {
browser
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.setValue('input[type=text]', 'buytaert')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.waitForElementVisible('#rhs_block', 1000)
.assert.containsText('#main', 'Dries Buytaert')
.end();
}
};
![Page 42: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/42.jpg)
module.exports = {
'As a user I want to see name prediction in right hand side block' :
function (browser) {
browser
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.setValue('input[type=text]', 'buytaert')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.waitForElementVisible('#rhs_block', 1000)
.assert.containsText('#main', 'Dries Buytaert')
.end();
}
};
![Page 43: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/43.jpg)
Nightwatch tests
● Each file can have multiple tests
● Each folder can have multiple folders and files
![Page 44: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/44.jpg)
Nightwatch tests
● Group tests according to functionality
● Tag your tests for better granular testing
![Page 45: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/45.jpg)
module.exports = {
'@tags': ['sprint3', 'issue 15674'],
'demo login test': function (browser) {
// test code
}
};
![Page 46: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/46.jpg)
ENVIRONMENT
![Page 47: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/47.jpg)
Local environment - selenium
scripts driver
![Page 48: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/48.jpg)
Selenium
● Selenium is a suite of tools to automate web browsers across
many platforms.
● Supports many operating systems
● Runs as a server on Java
● Writing tests is complicated
![Page 49: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/49.jpg)
...
"selenium" : {
"start_process" : false,
"server_path" : "/usr/local/.../seleniumserver2.jar",
"log_path" : "",
"host" : "127.0.0.1",
"port" : 4444,
"cli_args" : {
"webdriver.chrome.driver" : "./chromedriver",
"webdriver.gecko.driver" : "./geckodriver",
"webdriver.ie.driver" : ""
}
...
![Page 50: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/50.jpg)
![Page 51: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/51.jpg)
Selenium web driver
Allows selenium to use native browser engines
● Firefox - new Gecko driver
● Safari - requeres
● chrome
● IE / edge browser - ability to run IE in linux
● PhantomJS
![Page 52: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/52.jpg)
![Page 53: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/53.jpg)
...
"selenium" : {
"start_process" : false,
"server_path" : "/usr/local/.../seleniumserver2.jar",
"log_path" : "",
"host" : "127.0.0.1",
"port" : 4444,
"cli_args" : {
"webdriver.chrome.driver" : "./chromedriver",
"webdriver.gecko.driver" : "./geckodriver",
"webdriver.ie.driver" : ""
}
...
![Page 54: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/54.jpg)
No desktop environment - Xvfb
scripts driver
![Page 55: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/55.jpg)
Xvfb
● Virtual screen to run browser
● Native functionality
![Page 56: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/56.jpg)
Using cloud services
scripts
![Page 57: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/57.jpg)
![Page 58: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/58.jpg)
"selenium" : {
"start_process" : false,
"host": "ondemand.saucelabs.com",
"port": 80
},
"test_settings" : {
"default" : {
"output": true,
"selenium_host": "ondemand.saucelabs.com",
"selenium_port": 80,
"username": "${SAUCE_USERNAME}",
"access_key": "${SAUCE_ACCESS_KEY}",
"desiredCapabilities": {
"browserName": "chrome",
"platform": "Windows 10",
"version": "48"
}
},
...
![Page 59: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/59.jpg)
"selenium" : {
"start_process" : false,
"host": "ondemand.saucelabs.com",
"port": 80
},
"test_settings" : {
"default" : {
"output": true,
"selenium_host": "ondemand.saucelabs.com",
"selenium_port": 80,
"username": "${SAUCE_USERNAME}",
"access_key": "${SAUCE_ACCESS_KEY}",
"desiredCapabilities": {
"browserName": "chrome",
"platform": "Windows 10",
"version": "48"
}
},
...
![Page 60: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/60.jpg)
"selenium" : {
"start_process" : false,
"host": "ondemand.saucelabs.com",
"port": 80
},
"test_settings" : {
"default" : {
"output": true,
"selenium_host": "ondemand.saucelabs.com",
"selenium_port": 80,
"username": "${SAUCE_USERNAME}",
"access_key": "${SAUCE_ACCESS_KEY}",
"desiredCapabilities": {
"browserName": "chrome",
"platform": "Windows 10",
"version": "48"
}
},
...
![Page 61: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/61.jpg)
EpilogueWHY NIGHTWATCH.js?
![Page 62: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/62.jpg)
Conclusion
● Command line test runner
● Uses JavaScript
● Uses CSS selectors / XPath
● Continuous Integration support
● Cloud services support
![Page 63: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/63.jpg)
Advantages
● Test ANY website
● Complements unit testing
● Various reports
● Visual artifacts (screenshots, videos)
● CI / Cloud services support
![Page 64: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/64.jpg)
Disadvantages
● Takes time for initial setup
● Basic cording knowledge required
![Page 65: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/65.jpg)
Resources
● http://nightwatchjs.org/
● https://github.com/nightwatchjs/nightwatch
● http://www.seleniumhq.org/
● http://www.saucelabs.com/
![Page 66: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/66.jpg)
More resources
JavaScript Unit Testing
Matthew Grill
https://events.drupal.org/dublin2016/sessions/javascript-unit-testing
![Page 67: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/67.jpg)
Evaluate This SessionTHANK YOU!
events.drupal.org/dublin2016/schedule
![Page 68: AUTOMATED END-TO-END · AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch](https://reader034.fdocuments.net/reader034/viewer/2022052612/5f0a9abe7e708231d42c7327/html5/thumbnails/68.jpg)
QUESTIONS?
bit.ly/dce16-nwatch
@VladimirAus