Download to read offline
!["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)](https://image.slidesharecdn.com/browsertestingwithnightwatch-180704135541/75/Browser-testing-with-nightwatch-js-14-2048.jpg)
![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'));](https://image.slidesharecdn.com/browsertestingwithnightwatch-180704135541/75/Browser-testing-with-nightwatch-js-17-2048.jpg)
![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"] } } }](https://image.slidesharecdn.com/browsertestingwithnightwatch-180704135541/75/Browser-testing-with-nightwatch-js-40-2048.jpg)
!["ci" : { "desiredCapabilities": { "browserName": "chrome", "chromeOptions": { "args": ["--headless", "window-size=1400,1000"] } } } Tips & Tricks: Remote, Headless](https://image.slidesharecdn.com/browsertestingwithnightwatch-180704135541/75/Browser-testing-with-nightwatch-js-44-2048.jpg)
![Questions? @Salva_bg salva.momo[at]gmail.com www.adevfromtheplains.com](https://image.slidesharecdn.com/browsertestingwithnightwatch-180704135541/75/Browser-testing-with-nightwatch-js-48-2048.jpg)
![Obrigado! @Salva_bg salva.momo[at]gmail.com www.adevfromtheplains.com](https://image.slidesharecdn.com/browsertestingwithnightwatch-180704135541/75/Browser-testing-with-nightwatch-js-49-2048.jpg)
Uploaded bySalvador Molina (Slv_)
Browser testing with nightwatch.js
The document presents an overview of a session on browser testing with Nightwatch.js by Salvador Molina at Drupal Developer Days 2018 in Lisbon. It covers key features of Nightwatch.js, including parallel execution, custom commands, and page object patterns, as well as provides tips for effective testing strategies. The session emphasizes the transition to a more extensible architecture and remote testing capabilities with Nightwatch.js.
Browser testing with nightwatch.js
- 1. LISBON 2018 DRUPAL DEVELOPERDAYS Browser Testing with Nightwatch.js Salvador Molina - @salva_bg www.adevfromtheplains.com
- 2.
- 3.
- 4.
- 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.
- 7. Nightwatch.js • Introduction &Motivation • 4 Artifacts to rule them all • Tips & Tricks
- 8.
- 9. Deploying to production(no tests)
- 11.
- 12.
- 13. • Test Runnerwith 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 varselenium = 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 torule them all
- 19. • Commands. • PageObjects. • Asserts. • Global data. Artifacts Tests.
- 20. ● Generic Actionsacross 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.
- 23. – Martin Fowler. “Pageobjects are a classic example of encapsulation - they hide the details of the UI structure and widgetry from other components (the tests).”
- 24.
- 25.
- 26.
- 27.
- 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 remoteServer: Demo 3: Remote Testing via Jenkins
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 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 dependenciesretrievable 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 iscoming
- 48.
- 49.