night watch with qa
TRANSCRIPT
![Page 1: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/1.jpg)
Night watch…with QA
Carsten Sandtner (@casarock) mediaman// Gesellschaft für Kommunikation mbH
![Page 3: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/3.jpg)
![Page 4: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/4.jpg)
Testing
![Page 5: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/5.jpg)
Unit Tests
![Page 6: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/6.jpg)
Integration Tests
![Page 7: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/7.jpg)
System Tests
Nat
iona
l Mus
eum
of A
mer
ican
His
tory
Sm
ithso
nian
Inst
itutio
n - h
ttps:
//flic
.kr/p
/e6s
1Lr
![Page 9: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/9.jpg)
UAT
System Test
Integration Test
Unit Test
Preliminary design
Detailed design
Implementation
Requirements
![Page 10: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/10.jpg)
UAT
Integration Test
Unit Test
Detailed design
Implementation
Requirements
System TestPreliminary design
![Page 12: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/12.jpg)
![Page 13: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/13.jpg)
![Page 14: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/14.jpg)
Testing pyramid
# of Tests
easy
to
auto
mate
![Page 15: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/15.jpg)
Implementation Unit Test
TDD
![Page 16: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/16.jpg)
Integration Test
Unit Test
Detailed design
Implementation Unit Test
![Page 17: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/17.jpg)
System Test
Integration Test
Unit Test
Preliminary design
Detailed design
Implementation
![Page 18: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/18.jpg)
Automated E2E Test
![Page 19: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/19.jpg)
![Page 20: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/20.jpg)
![Page 21: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/21.jpg)
![Page 22: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/22.jpg)
– 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.“
![Page 23: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/23.jpg)
Nightwatch & WebDriver
![Page 24: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/24.jpg)
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!
![Page 25: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/25.jpg)
Installation
$ npm install [-g] nightwatch
… and Download Selenium-Server-Standalone!
Done.
![Page 26: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/26.jpg)
Nightwatch project structure
├──bin/ | ├──chromedriver | └──seleniumdriver.jar | ├──data/ | └──globals.js | ├──reports/ | └──fancyreports.xml | ├──tests/ | ├──meaningfultest1.js | ├──meaningfultest2.js | └── … └──nightwatch.js[on]
![Page 27: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/27.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" } },
![Page 28: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/28.jpg)
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“: {
. . .
},
![Page 29: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/29.jpg)
Nightwatch.js - Browser setup
"chrome": { "desiredCapabilities": { "browserName": "chrome", "javascriptEnabled": true, "acceptSslCerts": true } } } };
![Page 30: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/30.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(); } };
![Page 31: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/31.jpg)
Test execution
$ nightwatch [-c nightwatch.js] tests/simplegoogle.js
![Page 32: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/32.jpg)
![Page 33: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/33.jpg)
Tests in detail
![Page 34: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/34.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
![Page 35: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/35.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(); }
arrangeassert
assert
action
![Page 36: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/36.jpg)
Hardcoded values?
![Page 37: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/37.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(); } };
![Page 38: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/38.jpg)
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(); } };
![Page 39: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/39.jpg)
Define globals
module.exports = { url: 'http://www.google.com', selectors: { 'searchField': 'input[type=text]' }, static: { 'pageTitle': 'Google' } } Save as data/google.js
![Page 40: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/40.jpg)
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') },
. . .
![Page 41: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/41.jpg)
![Page 42: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/42.jpg)
Use Page Objects!
![Page 43: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/43.jpg)
Using Page Objects
module.exports = { 'url': 'http://www.google.com',
'elements': { 'searchField': 'input[type=text]' } };
Save as object/google.js
![Page 44: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/44.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": {. . .} };
![Page 45: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/45.jpg)
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(); } };
![Page 46: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/46.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'); } }] };
![Page 47: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/47.jpg)
In your test
module.exports = { 'Admin log in' : function (browser) { var login = browser.page.admin.login();
login.navigate() .signInAsAdmin(); browser.end(); } };
![Page 48: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/48.jpg)
Grouping tests
$ nightwatch --group smoketests
$ nightwatch --skipgroup smoketests
$ nightwatch --skipgroup login,whatever
![Page 49: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/49.jpg)
Test groups
| ├──tests/ | ├──smoketests/ | | ├──meaningfulTest1.js | | ├──meaningfulTest2.js | | └── …… | └──login/ | ├──authAndLogin.js | └── ……
![Page 50: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/50.jpg)
Tag your tests
$ nightwatch --tag login
$ nightwatch --tag login --tag something_else
$ nightwatch --skiptags login
$ nightwatch --skiptags login,something_else
![Page 51: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/51.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(); } };
![Page 52: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/52.jpg)
Demo
![Page 53: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/53.jpg)
Nightwatch is extendable!
• Write custom commands
• add custom assertions
• write custom reporter
![Page 54: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/54.jpg)
Nightwatch is Javascript!
• Using Filereaders
• CSV, Excel etc.
• write helpers if needed!
![Page 55: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/55.jpg)
![Page 56: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/56.jpg)
Nightwatch @Mediaman
![Page 57: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/57.jpg)
The problem
![Page 58: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/58.jpg)
Before Nightwatch
![Page 59: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/59.jpg)
The solution
![Page 60: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/60.jpg)
UAT
System Test
Integration Test
Unit Test
Preliminary design
Detailed design
Implementation
Requirements
✓ ✓
✓ ✓
✓ ✓
![Page 61: Night Watch with QA](https://reader033.vdocuments.mx/reader033/viewer/2022042706/589f47991a28ab490c8b752f/html5/thumbnails/61.jpg)
Thanks!Carsten Sandtner
@casarock
https://github.com/casarock
(◡‿◡✿)