Test any (yes, any) website using NightwatchJS - selenium based JavaScript test runner. We will cover - prerequisites - configuration - writing tests - reading reports - continuous integration and services

1. Automated e2e
testing with
Nightwatch.js
05 September 2016
BrisJS

2. Hello! My name is...
Janna
- Web developer
Vladimir
- PHP developer / Drupal Specialist
http://www.slideshare.net/VladimirAus

3. TOC
- Introduction
- Prerequisites
- Configuration
- Tests and reports
- Continuous integration
- Conclusion

4. Introduction
- We have Requirements
- Implementation is based on Requirements
- Tests verify implementation

5. Introduction
Our requirements
- Type movie title in google search
- Click submit
- movie details should be displayed in right
hand side area

6. Introduction
Let’s create a manual test
- Type movie title into google search box
- https://www.google.com/
- To Check for result in right hand side area

7. Introduction
Record gif

8. Introduction
Let’s write a test

9. Introduction
Let’s Run a test

10. nightwatch.js
● Command line test runner
● Write tests in Javascript
● CSS Selectors (Also Xpath)
● Continuous integration support
● Cloud services support
● Easy to extend

11. TOC
- Introduction
- Prerequisites
- Configuration
- Tests and reports
- Continuous integration
- Conclusion

12. Nightwatch Prerequisites
- Java JDK
- Selenium server
- Selenium web driver
- Nodejs / Npm

13. Selenium
- Selenium is a suite of tools to automate
web browsers across many platforms.
- Multi operating systems support
- Runs as a server on Java
- Writing tests is complicated...

15. Selenium web DRIVER
Allows selenium to use native browser engines
- Gecko FOR Firefox
- safari
- chrome
- IE browser
- Ability to run IE in linux
- PHANtom JS
- others

16. TOC
- Introduction
- Prerequisites
- Configuration
- Tests and reports
- Continuous integration
- Conclusion

17. CONFIGURATION
"src_folders" : ["tests"],
"output_folder" : "reports",

18. CONFIGURATION
"selenium" : {
"start_process" : false,
"server_path" : "/usr/local/.../seleniumserver2.jar",
"log_path" : "",
"host" : "127.0.0.1",
"port" : 4444,

19. CONFIGURATION
"selenium" : {
...
"cli_args" : {
"webdriver.chrome.driver" : "./chromedriver",
"webdriver.gecko.driver" : "./geckodriver",
"webdriver.ie.driver" : ""
}

20. CONFIGURATION
"test_settings" : {
..
}

21. CONFIGURATION
"default" : {
"desiredCapabilities": {
"browserName": "firefox",
"javascriptEnabled": true,
}
}
> nightwatch

22. CONFIGURATION
"safari" : {
"desiredCapabilities": {
"browserName": "safari",
"javascriptEnabled": true,
}
}
> nightwatch -e safari

23. CONFIGURATION
"safari" : {
"desiredCapabilities": {
"browserName": "safari",
"javascriptEnabled": true,
}
}
> nightwatch -e default,safari

24. TOC
- Introduction
- Prerequisites
- Configuration
- Tests and reports
- Continuous integration
- Conclusion

25. TESTS

26. TESTS

27. TESTS
module.exports = {
'As a user I want to see movie title in right hand side block' :
function (browser) {
}
};

28. TESTS
module.exports = {
'As a user I want to see movie title in right hand side block' :
function (browser) {
browser
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
}
};

29. TESTS
module.exports = {
'As a user I want to see movie title in right hand side block' :
function (browser) {
browser
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.setValue('input[type=text]', 'cookoo nest')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
}
};

30. TESTS
module.exports = {
'As a user I want to see movie title in right hand side block' :
function (browser) {
browser
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.setValue('input[type=text]', 'cookoo nest')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.waitForElementVisible('#rhs_block', 1000)
}
};

31. TESTS
module.exports = {
'As a user I want to see movie title in right hand side block' :
function (browser) {
browser
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.setValue('input[type=text]', 'cookoo nest')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.waitForElementVisible('#rhs_block', 1000)
.assert.containsText('#main', 'One Flew Over the Cuckoo's Nest')
}
};

32. TESTS
module.exports = {
'As a user I want to see movie title in right hand side block' :
function (browser) {
browser
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.setValue('input[type=text]', 'cookoo nest')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.waitForElementVisible('#rhs_block', 1000)
.assert.containsText('#main', 'One Flew Over the Cuckoo's Nest')
.end();
}
};

33. TESTS: BDD
module.exports = {
'Demo test Google' : function (client) {
client
.url('http://google.no')
.pause(1000);
// expect element to be present in 1000ms
client.expect.element('body').to.be.present.before(1000);
// expect element <#lst-ib> to have css property 'display'
client.expect.element('#lst-ib').to.have.css('display');
client.end();
}
};

34. TESTS: BDD
…
// expect element to have attribute 'class' which contains text 'vasq'
client.expect.element('body').to.have.attribute('class').which.contains('vasq');
// expect element <#lst-ib> to be an input tag
client.expect.element('#lst-ib').to.be.an('input');
// expect element <#lst-ib> to be visible
client.expect.element('#lst-ib').to.be.visible;
client.end();
…

35. TESTS

36. TESTS: groups

37. TESTS: groups
> nightwatch -g drupalsouth

38. TESTS: groups
> nightwatch -g drupalsouth/auth

39. Additional grouping
- Using groups
- Using tags
- Disabling tests
- Parallel running
- Use grunt
- Use mocha

40. TESTS: REPORTS

41. TESTS: REPORTS
- JUnit XML format

42. TESTS: REPORTS

43. TESTS: REPORTS
- Outputs Junit xml
- Extension allows to output json

44. TOC
- Introduction
- Prerequisites
- Configuration
- Tests and reports
- Continuous integration
- Conclusion

45. Headless Testing
Xvfb
- Virtual screen
- Native functionality

46. Cloud Services
- easy to setup for CI
- run any configuration (from ie to ios)
- video/screenshots of testing process
- https://saucelabs.com/
- https://www.browserstack.com/

47. Continuous Integration
- Code -> commit -> test (PASS!) -> deploy
- Platform configurator for saucelabs
- Nightwatchjs configuration:

48. Continuous Integration
Test
- Locally
- In the cloud

49. TOC
- Introduction
- Prerequisites
- Configuration
- Tests and reports
- Continuous integration
- Conclusion

50. CONCLUSION
PROS:
- TEST any website (Yes, Any!)
- Complements unit testing
- Produce REPORts
- VISUAL artifacts (screenshots, videos)
- CONTINUOUS INTEGRATION/Cloud services

51. CONCLUSION
CONS:
- Takes time for initial setup
- NEED TO KNOW BASIC PROGRAMMING

52. QUESTIONS?
- Twitter: @Jannaaus - @Vladimiraus
- Sample codes
- http://www.slideshare.net/VladimirAus