Introduction to Nightwatch.js. Artifacts, patterns, and some tips & tricks for a CI setup. Video (in Spanish): https://vimeo.com/269158625

1. Nightwatch.js
Salvador Molina Moreno
@Salva_bg

2. < >About me…</ >
@Salva_bg
● PHP Programmer.
● Creator and maintainer of multiple modules in
Drupal.org (entityreference_autocomplete, viewport,
nodejs_chat…).
● Working as Freelance:
○ Drupal and Symfony.
○ Security Audits.
○ A bit of devops.

3. Nightwatch.js
● Overview
● Core Features
● Into Practice
● Advanced
● Wrapping up

5. Nightwatch.js - Overview

6. ● Good documentation.
● Built-in test runner for parallel or sequentially execution.
● Built-in JUnit XML reporting.
● Very intuitive to understand and extend.
● Cloud Testing provides supported.
Features
Nightwatch.js - Overview

7. ● Built-in Unit testing support, with Mocha-compatible interface.
● Node.js assertion framework used by default in nightwatch unit
tests.
● BDD-Style expect() assertions.
● Freedom to choose assertion framework of choice.
● Headless Chrome? Got that too.
● Hooks: before, beforeEach, after, afterEach, etc.
More...
Nightwatch.js - Overview

8. How Nightwatch.js reports
Nightwatch.js - Kit Kat

9. ● Commands.
● Page objects.
● Tests.
● Data.
● Assertions.
Core Features
Nightwatch.js - Core Features

10. ● Generic actions used across the site. Nightwatch comes with several by default:
○ .closeWindow().
○ .getCookie().
○ .getValue().
○ .useXpath().
● Custom commands can be created, too. There are 2 Types:
○ Function-style commands.
○ Class-style commands.
Commands
Nightwatch.js - Core Features

11. Function-style (commands/myCommand.js)
Nightwatch.js - Core Features
exports.command = function (someParameter, someOtherParam) {
/** .execute() allows to run App-specific JS in our test. **/
this.execute(
function(someParameter) {
return MyApplication.doSomething().result();
},
[someParameter, someOtherParam],
function(result) {
/** Optional callback to receive the result from the JS. **/
}
);
return this;
};

12. Class-style
Nightwatch.js - Core Features
RTFM: http://nightwatchjs.org/guide#2-class-style-commands

13. Class-style
Nightwatch.js - Core Features
¯_(ツ)_/¯

14. Page objects are a classic example of encapsulation - they hide the details of
the UI structure and widgetry from other components (the tests).
Martin Fowler.
Page Objects
Nightwatch.js - Core Features

15. Page Objects
Nightwatch.js - Core Features

16. Page Objects
Nightwatch.js - Core Features

17. Page Objects
Nightwatch.js - Core Features

18. Page Objects
Nightwatch.js - Core Features

19. Asserts
Nightwatch.js - Core Features

20. ● Demo
Demo Time!
Nightwatch.js - Into Practice

21. ● When targetting page elements, Nightwatch supports two syntax styles:
○ CSS:
■ .someclass input[type=text]
○ XPath:
■ //input[@value='Search with Google']
● Don’t confuse CSS Syntax with jQuery selectors!:
○ Valid: .someclass #someid somelement:nth-of-type(1)
○ Not valid: .someclass #someid somelement:eq(1)
CSS & XPath
Nightwatch.js - Into Practice

22. BDD Expect Assertions
Nightwatch.js - Into Practice
checkFieldAttribute: function(fieldName, attrName, attrValue) {
this
.expect.element(fieldName).to.have.attribute(attrName).equals(attrValue);
return this;
},

23. Globals data
Nightwatch.js - Into Practice
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'
},

24. Nightwatch.js - Advanced

25. Parallel test execution
Nightwatch.js - Advanced
"test_workers": {
"enabled": true,
"workers": 2
}

26. Parallel env execution
Nightwatch.js - Advanced
nightwatch --env dev,firefox

27. Screenshots.
Nightwatch.js - Advanced

28. Summary
Nightwatch.js - Advanced
● Simple CI integration (Jenkins, CircleCI, etc…).
● Clear guidelines for a clean and simple test set up.
● Flexibility to extend core artifacts with a custom library tailored for
our projects.
● Ability to talk directly to browsers. Bye bye Selenium!

29. So...
Nightwatch.js - Advanced

30. Preguntas?
Nightwatch.js - Advanced

31. Gracias!
Nightwatch.js - Advanced
@Salva_bg