Night Watch with QA
2 likes1,403 views
The document discusses Nightwatch.js, an open source end-to-end testing framework for browser-based apps and websites. It uses Selenium WebDriver to perform commands and assertions on DOM elements. Key features include a clean syntax, built-in test runner, support for CSS/XPath selectors, test grouping/filtering, and CI integration. The document provides information on installation, project structure, configuration, writing tests, using page objects, test execution, and ways to extend Nightwatch's functionality through custom commands/assertions.
![Installation
$ npm install [-g] nightwatch
… and Download Selenium-Server-Standalone!
Done.](https://image.slidesharecdn.com/nightwatchwithqa-161024111403/85/Night-Watch-with-QA-25-320.jpg)
![Nightwatch project
structure
├──bin/
| ├──chromedriver
| └──seleniumdriver.jar
|
├──data/
| └──globals.js
|
├──reports/
| └──fancyreports.xml
|
├──tests/
| ├──meaningfultest1.js
| ├──meaningfultest2.js
| └── …
└──nightwatch.js[on]](https://image.slidesharecdn.com/nightwatchwithqa-161024111403/85/Night-Watch-with-QA-26-320.jpg)
![Nightwatch.js
module.exports = {
"src_folders": ["tests"],
"output_folder": "reports",
"custom_commands_path": "",
"custom_assertions_path": "",
"page_objects_path": "./objects/",
"globals_path": "",
"selenium": {
"start_process": true,
"server_path": "bin/selenium-server-standalone-2.53.1.jar",
"log_path": "",
"host": "127.0.0.1",
"port": 4444,
"cli_args": {
"webdriver.chrome.driver": "./bin/chromedriver",
"webdriver.ie.driver": "",
"webdriver.gecko.driver" : "./bin/geckodriver090"
}
},](https://image.slidesharecdn.com/nightwatchwithqa-161024111403/85/Night-Watch-with-QA-27-320.jpg)
![Simple Nightwatch test
module.exports = {
'Google Webtechcon' : function (client) {
client
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.assert.title('Google')
.assert.visible('input[type=text]')
.setValue('input[type=text]', 'webtechcon')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.pause(1000)
.assert.containsText('#rso > div.g > div > div > h3 > a',
'WebTech Conference 2016')
.end();
}
};](https://image.slidesharecdn.com/nightwatchwithqa-161024111403/85/Night-Watch-with-QA-30-320.jpg)
![Test execution
$ nightwatch [-c nightwatch.js] tests/simplegoogle.js](https://image.slidesharecdn.com/nightwatchwithqa-161024111403/85/Night-Watch-with-QA-31-320.jpg)
![Arrange and assert
module.exports = {
'Google Webtechcon' : function (client) {
client
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.assert.title('Google')
.assert.visible('input[type=text]')
.end();
}
};
arrange
assert](https://image.slidesharecdn.com/nightwatchwithqa-161024111403/85/Night-Watch-with-QA-34-320.jpg)
![Arrange, action and assert
module.exports = {
'Google Webtechcon' : function (client) {
client
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.assert.title('Google')
.assert.visible('input[type=text]')
.setValue('input[type=text]', 'webtechcon')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.pause(1000)
.assert.containsText('#rso > div.g > div > div > h3 > a',
'WebTech Conference 2016')
.end();
}
arrange
assert
assert
action](https://image.slidesharecdn.com/nightwatchwithqa-161024111403/85/Night-Watch-with-QA-35-320.jpg)
![Hardcoded values
module.exports = {
'Google Webtechcon' : function (client) {
client
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.assert.title('Google')
.assert.visible('input[type=text]')
.end();
}
};](https://image.slidesharecdn.com/nightwatchwithqa-161024111403/85/Night-Watch-with-QA-37-320.jpg)
![Define globals
module.exports = {
url: 'http://www.google.com',
selectors: {
'searchField': 'input[type=text]'
},
static: {
'pageTitle': 'Google'
}
}
Save as data/google.js](https://image.slidesharecdn.com/nightwatchwithqa-161024111403/85/Night-Watch-with-QA-39-320.jpg)
![Using Page Objects
module.exports = {
'url': 'http://www.google.com',
'elements': {
'searchField': 'input[type=text]'
}
};
Save as object/google.js](https://image.slidesharecdn.com/nightwatchwithqa-161024111403/85/Night-Watch-with-QA-43-320.jpg)
![Add objects to config
module.exports = {
"src_folders": ["tests"],
"output_folder": "reports",
"custom_commands_path": "",
"custom_assertions_path": "",
"page_objects_path": "./objects/",
"globals_path": "",
"selenium": {. . .},
"test_settings": {. . .}
};](https://image.slidesharecdn.com/nightwatchwithqa-161024111403/85/Night-Watch-with-QA-44-320.jpg)
![More PageObjects
awesomeness
module.exports = {
'url': 'http://www.some.url',
'elements': {
'passwordField': 'input[type=text]',
'usernameField': 'input[type=password]',
'submit': 'input[type=submit]'
},
commands: [{
signInAsAdmin: function() {
return this.setValue('@usernameField', 'admin')
.setValue('@passwordField', 'password')
.click('@submit');
}
}]
};](https://image.slidesharecdn.com/nightwatchwithqa-161024111403/85/Night-Watch-with-QA-46-320.jpg)
![In your test
module.exports = {
'@tags': ['login', 'sanity'],
'Admin log in' : function (browser) {
var login = browser.page.admin.login();
login.navigate()
.signInAsAdmin();
browser.end();
}
};](https://image.slidesharecdn.com/nightwatchwithqa-161024111403/85/Night-Watch-with-QA-51-320.jpg)
Night Watch with QA
- 1. Night watch …with QA Carsten Sandtner (@casarock) mediaman// Gesellschaft für Kommunikation mbH
- 2. about:me Carsten Sandtner @casarock Head of Software Development //mediaman GmbH
- 4. Testing
- 5. Unit Tests
- 9. UAT System Test Integration Test Unit Test Preliminary design Detailed design Implementation Requirements
- 10. UAT Integration Test Unit Test Detailed design Implementation Requirements System TestPreliminary design
- 14. Testing pyramid # of Tests easytoautomate
- 16. Integration Test Unit Test Detailed design Implementation Unit Test
- 17. System Test Integration Test Unit Test Preliminary design Detailed design Implementation
- 22. – http://nightwatchjs.org/ „Nightwatch.js is an easy to use Node.js based End- to-End (E2E) testing solution for browser based apps and websites. It uses the powerful Selenium WebDriver API to perform commands and assertions on DOM elements.“
- 24. Features • Clean syntax • Build-in test runner • support for CSS and Xpath Selectors • Grouping and filtering of Tests • Saucelab and Browserstack support • Extendable (Custom Commands) • CI support!
- 25. Installation $ npm install [-g] nightwatch … and Download Selenium-Server-Standalone! Done.
- 26. Nightwatch project structure ├──bin/ | ├──chromedriver | └──seleniumdriver.jar | ├──data/ | └──globals.js | ├──reports/ | └──fancyreports.xml | ├──tests/ | ├──meaningfultest1.js | ├──meaningfultest2.js | └── … └──nightwatch.js[on]
- 27. Nightwatch.js module.exports = { "src_folders": ["tests"], "output_folder": "reports", "custom_commands_path": "", "custom_assertions_path": "", "page_objects_path": "./objects/", "globals_path": "", "selenium": { "start_process": true, "server_path": "bin/selenium-server-standalone-2.53.1.jar", "log_path": "", "host": "127.0.0.1", "port": 4444, "cli_args": { "webdriver.chrome.driver": "./bin/chromedriver", "webdriver.ie.driver": "", "webdriver.gecko.driver" : "./bin/geckodriver090" } },
- 28. Nightwatch.js - Test setup. "test_settings": { "default": { "launch_url": "http://localhost", "selenium_port": 4444, "selenium_host": "localhost", "silent": true, "screenshots": { "enabled": false, "path": "" }, "desiredCapabilities": { "browserName": "chrome", "marionette": true } }, “staging“: { . . . },
- 29. Nightwatch.js - Browser setup "chrome": { "desiredCapabilities": { "browserName": "chrome", "javascriptEnabled": true, "acceptSslCerts": true } } } };
- 30. Simple Nightwatch test module.exports = { 'Google Webtechcon' : function (client) { client .url('http://www.google.com') .waitForElementVisible('body', 1000) .assert.title('Google') .assert.visible('input[type=text]') .setValue('input[type=text]', 'webtechcon') .waitForElementVisible('button[name=btnG]', 1000) .click('button[name=btnG]') .pause(1000) .assert.containsText('#rso > div.g > div > div > h3 > a', 'WebTech Conference 2016') .end(); } };
- 31. Test execution $ nightwatch [-c nightwatch.js] tests/simplegoogle.js
- 33. Tests in detail
- 34. Arrange and assert module.exports = { 'Google Webtechcon' : function (client) { client .url('http://www.google.com') .waitForElementVisible('body', 1000) .assert.title('Google') .assert.visible('input[type=text]') .end(); } }; arrange assert
- 35. Arrange, action and assert module.exports = { 'Google Webtechcon' : function (client) { client .url('http://www.google.com') .waitForElementVisible('body', 1000) .assert.title('Google') .assert.visible('input[type=text]') .setValue('input[type=text]', 'webtechcon') .waitForElementVisible('button[name=btnG]', 1000) .click('button[name=btnG]') .pause(1000) .assert.containsText('#rso > div.g > div > div > h3 > a', 'WebTech Conference 2016') .end(); } arrange assert assert action
- 37. Hardcoded values module.exports = { 'Google Webtechcon' : function (client) { client .url('http://www.google.com') .waitForElementVisible('body', 1000) .assert.title('Google') .assert.visible('input[type=text]') .end(); } };
- 38. Using globals module.exports = { 'Google Webtechcon' : function (client) { var globals = client.globals; client .url(globals.url) .waitForElementVisible('body', 1000) .assert.title(globals.static.pageTitle) .assert.visible(globals.selectors.searchField) .end(); } };
- 39. Define globals module.exports = { url: 'http://www.google.com', selectors: { 'searchField': 'input[type=text]' }, static: { 'pageTitle': 'Google' } } Save as data/google.js
- 40. Add to config (test-settings) module.exports = { . . . "test_settings": { "default": { "launch_url": "http://localhost", "selenium_port": 4444, "selenium_host": "localhost", "silent": true, "screenshots": { "enabled": false, "path": "" }, "desiredCapabilities": { "browserName": "chrome", "marionette": true }, "globals": require('./data/google') }, . . .
- 43. Using Page Objects module.exports = { 'url': 'http://www.google.com', 'elements': { 'searchField': 'input[type=text]' } }; Save as object/google.js
- 44. Add objects to config module.exports = { "src_folders": ["tests"], "output_folder": "reports", "custom_commands_path": "", "custom_assertions_path": "", "page_objects_path": "./objects/", "globals_path": "", "selenium": {. . .}, "test_settings": {. . .} };
- 45. Add objects to config module.exports = { 'Google Webtechcon' : function (client) { var googlePage = client.page.google(), globals = client.globals; googlePage.navigate() .waitForElementVisible('body', 1000) .assert.title(globals.static.pageTitle) .assert.visible('@searchField') .end(); } };
- 46. More PageObjects awesomeness module.exports = { 'url': 'http://www.some.url', 'elements': { 'passwordField': 'input[type=text]', 'usernameField': 'input[type=password]', 'submit': 'input[type=submit]' }, commands: [{ signInAsAdmin: function() { return this.setValue('@usernameField', 'admin') .setValue('@passwordField', 'password') .click('@submit'); } }] };
- 47. In your test module.exports = { 'Admin log in' : function (browser) { var login = browser.page.admin.login(); login.navigate() .signInAsAdmin(); browser.end(); } };
- 48. Grouping tests $ nightwatch --group smoketests $ nightwatch --skipgroup smoketests $ nightwatch --skipgroup login,whatever
- 49. Test groups | ├──tests/ | ├──smoketests/ | | ├──meaningfulTest1.js | | ├──meaningfulTest2.js | | └── …… | └──login/ | ├──authAndLogin.js | └── ……
- 50. Tag your tests $ nightwatch --tag login $ nightwatch --tag login --tag something_else $ nightwatch --skiptags login $ nightwatch --skiptags login,something_else
- 51. In your test module.exports = { '@tags': ['login', 'sanity'], 'Admin log in' : function (browser) { var login = browser.page.admin.login(); login.navigate() .signInAsAdmin(); browser.end(); } };
- 52. Demo
- 53. Nightwatch is extendable! • Write custom commands • add custom assertions • write custom reporter
- 54. Nightwatch is Javascript! • Using Filereaders • CSV, Excel etc. • write helpers if needed!
- 57. The problem
- 59. The solution
- 60. UAT System Test Integration Test Unit Test Preliminary design Detailed design Implementation Requirements ✓ ✓ ✓ ✓ ✓ ✓