DrupalCon Dublin 2016 - Automated browser testing with Nightwatch.js
1 like306 views
The document discusses automated end-to-end testing using Nightwatch.js, emphasizing the importance of testing in the software development cycle. It covers the process of writing and running tests in JavaScript, integration with Selenium, and capabilities of continuous integration and cloud services. Key features include the ability to generate various reports, support for custom commands and assertions, and the advantages and disadvantages of using Nightwatch.js for testing web applications.
![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();
}
};](https://image.slidesharecdn.com/drupalcon-160930152704/85/DrupalCon-Dublin-2016-Automated-browser-testing-with-Nightwatch-js-11-320.jpg)
![3. Uses CSS selectors
● input[type=text]
● button[name=btnG]
● #rhs_block
● #main](https://image.slidesharecdn.com/drupalcon-160930152704/85/DrupalCon-Dublin-2016-Automated-browser-testing-with-Nightwatch-js-15-320.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();
}
};](https://image.slidesharecdn.com/drupalcon-160930152704/85/DrupalCon-Dublin-2016-Automated-browser-testing-with-Nightwatch-js-37-320.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();
}
};](https://image.slidesharecdn.com/drupalcon-160930152704/85/DrupalCon-Dublin-2016-Automated-browser-testing-with-Nightwatch-js-38-320.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();
}
};](https://image.slidesharecdn.com/drupalcon-160930152704/85/DrupalCon-Dublin-2016-Automated-browser-testing-with-Nightwatch-js-39-320.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();
}
};](https://image.slidesharecdn.com/drupalcon-160930152704/85/DrupalCon-Dublin-2016-Automated-browser-testing-with-Nightwatch-js-40-320.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();
}
};](https://image.slidesharecdn.com/drupalcon-160930152704/85/DrupalCon-Dublin-2016-Automated-browser-testing-with-Nightwatch-js-41-320.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();
}
};](https://image.slidesharecdn.com/drupalcon-160930152704/85/DrupalCon-Dublin-2016-Automated-browser-testing-with-Nightwatch-js-42-320.jpg)
![module.exports = {
'@tags': ['sprint3', 'issue 15674'],
'demo login test': function (browser) {
// test code
}
};](https://image.slidesharecdn.com/drupalcon-160930152704/85/DrupalCon-Dublin-2016-Automated-browser-testing-with-Nightwatch-js-45-320.jpg)
DrupalCon Dublin 2016 - Automated browser testing with Nightwatch.js
- 2. AUTOMATED END-TO-END TESTING WITH NIGHTWATCH.js Vladimir Roudakov 29 Sep 2016 Front End bit.ly/dce16-nwatch
- 7. 1. Requirements ● Search for surname ● Display person’s information
- 8. 2. Manual test ● Go to search engine ● Type surname into search box ● Check for result in right hand side area
- 10. 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
- 11. 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(); } };
- 12. 4. Running the test
- 13. 1. Command line test runner
- 14. 2. Tests are in JavaScript
- 15. 3. Uses CSS selectors ● input[type=text] ● button[name=btnG] ● #rhs_block ● #main
- 16. 4. Continuous Integration support
- 17. 5. Cloud services support
- 18. 6. Easy to extend ● Custom commands ● Custom assertions ● Custom reporters
- 19. REPORTS
- 21. STANDARD PROCESS Developer PM F3, ... F1F1 F2 F1 F2 F2 ready? Sure
- 22. STANDARD PROCESS BA Developer PM F3, ... F1F1 F2 F1 F2 F2 ready? Sure Great! To production!
- 23. STANDARD PROCESS BA DeveloperClient PM F3, ... F1F1 F2 F1 F2 F2 ready? Sure Great! To production! F2 ready! Great!
- 24. STANDARD PROCESS BA DeveloperClient PM F3, ... F1F1 F2 F1 F2 F2 ready? Sure Great! To production! F2 ready! Great! F1?
- 29. ADDING AUTOMATED TESTING BA DeveloperClient PM F1F1 F2 Yes, but F1 is broken... F2 ready?
- 31. Who like reports? DEVELOPERS Technical detailed report on ● New features and existing functionality ● Integration on latest test environment and UAT ● Sprint retrospective
- 32. 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
- 33. Who like reports? CLIENTS Report with no technical details on pre release environment ● Test coverage ● Ability to identify missing / not clarified features
- 34. Report output ● Visual ● Command line ● JUnit XML ● Custom reporters, e.g. JSON
- 35. TESTS
- 36. Nightwatch tests ● Written in JavaScript ● Each test can have multiple assertions
- 37. 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(); } };
- 38. 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(); } };
- 39. 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(); } };
- 40. 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(); } };
- 41. 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(); } };
- 42. 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(); } };
- 43. Nightwatch tests ● Each file can have multiple tests ● Each folder can have multiple folders and files
- 44. Nightwatch tests ● Group tests according to functionality ● Tag your tests for better granular testing
- 45. module.exports = { '@tags': ['sprint3', 'issue 15674'], 'demo login test': function (browser) { // test code } };
- 46. ENVIRONMENT
- 47. Local environment - selenium scripts driver
- 48. 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
- 49. ... "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" : "" } ...
- 51. 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
- 53. ... "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" : "" } ...
- 54. No desktop environment - Xvfb scripts driver
- 55. Xvfb ● Virtual screen to run browser ● Native functionality
- 58. "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"
- 59. "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"
- 60. "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"
- 62. Conclusion ● Command line test runner ● Uses JavaScript ● Uses CSS selectors / XPath ● Continuous Integration support ● Cloud services support
- 63. Advantages ● Test ANY website ● Complements unit testing ● Various reports ● Visual artifacts (screenshots, videos) ● CI / Cloud services support
- 64. Disadvantages ● Takes time for initial setup ● Basic cording knowledge required
- 65. Resources ● http://nightwatchjs.org/ ● https://github.com/nightwatchjs/nightwatch ● http://www.seleniumhq.org/ ● http://www.saucelabs.com/
- 66. More resources JavaScript Unit Testing Matthew Grill https://events.drupal.org/dublin2016/sessions/javascript-unit-testing
- 67. Evaluate This Session THANK YOU! events.drupal.org/dublin2016/schedule