Introduction to Nightwatch.js, artifacts and implementation examples with Page Objects and a simple integration with Jenkins. Link to public presentation in Google Drive: https://docs.google.com/presentation/d/1SPXFqfrKOW5ki93_F0Zbxgv4dL9QQrnPo7UkkR7aKTo/edit?usp=sharing

1. LISBON 2018
DRUPAL DEVELOPER DAYS
Browser Testing
with Nightwatch.js
Salvador Molina - @salva_bg
www.adevfromtheplains.com

2. Diamond Sponsor

3. Platinum Sponsors

4. Gold Sponsors

5. About me...
Salva Molina
• PHP Developer.
• Drupal.org (slv_): field_type_generator,
nodejs_chat, entityreference_autocomplete…
• Working as freelance:
• Drupal & Symfony.
• Security Audits.
• Devops.

6. About me...

7. Nightwatch.js
• Introduction & Motivation
• 4 Artifacts to rule them all
• Tips & Tricks

8. Motivation
aka
The Watermelon Effect

9. Deploying to production (no tests)

11. Introduction

12. Introduction

13. • Test Runner with parallel execution support.
• JUnit-compliant XML reports.
• assert-like and expect-like validations.
• Hooks: before, beforeEach, after, afterEach.
• Unit Testing support
Main Features

14. "src_folders" : [
"./tests/nightwatch/tests/"
],
"output_folder" : "./tests/nightwatch/reports",
"custom_commands_path" : "./tests/nightwatch/commands",
"custom_assertions_path" : "./tests/nightwatch/assertions",
"page_objects_path" : [
"./tests/nightwatch/pages/example"
],
"globals_path" : "./tests/nightwatch/data/global.js",
First Stop: Nightwatch.json (I)

15. "selenium" : {
"start_process" : true,
"server_path" : "./tests/bin/selenium-server-standalone-3.13.0.jar",
"log_path" : "",
"port" : 34567,
"cli_args" : {
"webdriver.chrome.driver" : "./tests/bin/chromedriver"
}
},
First Stop: Nightwatch.json (II)

16. First Stop: Nightwatch.json (III)
"dev" : {
"launch_url" : "http://127.0.0.1:8000",
"selenium_port" : 9515,
"selenium_host" : "127.0.0.1",
"default_path_prefix" : "",
"desiredCapabilities": {
"browserName": "chrome"
}
}

17. Bonus! - Nightwatch.conf.js
var selenium = require('selenium-server');
var chromedriver = require('chromedriver');
module.exports = (function(settings) {
settings.selenium.server_path = selenium.path;
settings.selenium.cli_args["webdriver.chrome.driver"] = chromedriver.path;
return settings;
})(require('./nightwatch.json'));

18. 4 Artifacts to rule them all

19. • Commands.
• Page Objects.
• Asserts.
• Global data.
Artifacts
Tests.

20. ● Generic Actions across the site:
○ .closeWindow().
○ .getValue().
○ .saveScreenshot().
○ .useXpath().
● Custom commands. 2 Types:
○ Function-style.
○ Class-style.
Commands

21. Function-Style (commands/myCommand.js)
exports.command = function (selector, message) {
// Click and display a message for the action.
this.click(selector, function() {
if (this.globals.test_settings.disable_colors === true) {
console.log(' ✔ ' + message);
}
else {
console.log('033[92m ✔ 033[0m' + message);
}
});
return this;
};

22. ● Simple Test
Demo 1

23. – Martin Fowler.
“Page objects are a classic example of
encapsulation - they hide the details of the
UI structure and widgetry from other
components (the tests).”

24. Page Objects (pages/myPage.js)

25. Page Objects (pages/myPage.js)

26. Page Objects (pages/myPage.js)

27. Page Objects (pages/myPage.js)

28. ● Simple Test - (With Page Objects)
Demo 2

29. Assertions (assertions/myAssertion.js)
exports.assertion = function(selector, comparedValue, msg) {
this.message = msg || util.format('Testing if value of <%s> does not equal: "%s".',
selector, comparedValue);
this.expected = comparedValue;
this.command = function(callback) {};
this.value = function(result) {};
this.pass = function(value) {};
};

30. BDD Expect Assertions
checkFieldAttribute: function(fieldName, attr, Value) {
this
.expect.element(fieldName).to.have.attribute(attr).equals(Value);
return this;
},
● Language Chains: to, be, been, is, that, which, and, has,
have, with, at, does, of.

31. user: {
username: 'test3',
password: 'AcceptableUserPassword_-',
},
unexisting_user: {
username: 'nightwatch_' + Date.now(),
firstname: 'NW_First',
display_name: 'NW_First' + 'Surname' + Date.now(),
email: 'nightwatch_' + Date.now() + '@.example.net'
},
Global Data (data/global.js)

32. Dependencies in remote Server:
Demo 3: Remote Testing via Jenkins

33. Scenario

34. Scenario
1

35. Scenario
1
2

36. Scenario
1
2
3

37. Scenario
1
2
4
3

38. Scenario

39. Scenario

40. CI
"ci" : {
"launch_url" : "http://{http_auth_user}:{http_auth_pass}@127.0.0.1:8000",
"selenium_port" : 9515,
"selenium_host" : "127.0.0.1",
"default_path_prefix" : "",
"selenium" : {
"start_process": false
},
"desiredCapabilities": {
"browserName": "chrome",
"chromeOptions": {
"args": ["--headless"]
}
}
}

42. "test_workers": {
"enabled": true,
"workers": 2
}
Tips & Tricks: Parallel exec

43. nightwatch --env chrome,firefox
Tips & Tricks: Parallel exec (II)

44. "ci" : {
"desiredCapabilities": {
"browserName": "chrome",
"chromeOptions": {
"args": ["--headless", "window-size=1400,1000"]
}
}
}
Tips & Tricks: Remote, Headless

45. Tips & Tricks: Resources
● Official Docs: nightwatchjs.org.
● Starter Repo: https://github.com/salvamomo/nightwatch-starter.
● API CODE: https://github.com/nightwatchjs/nightwatch/tree/master/lib/api.

46. ● All dependencies retrievable through npm.
● 4 Artifacts to rule them all.
● Good bye Selenium (mostly).
● Remote testing: Chrome + Nightwatch + Node.
● Almost fully extensible architecture.
Recap...

47. Nightwatch 1.0 is coming

48. Questions?
@Salva_bg
salva.momo[at]gmail.com
www.adevfromtheplains.com

49. Obrigado!
@Salva_bg
salva.momo[at]gmail.com
www.adevfromtheplains.com