Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Night Watch with QA
Search
Carsten Sandtner
October 24, 2016
Technology
0
80
Night Watch with QA
My slides for my talk at WebTech Conference in Munich, October 2016.
Carsten Sandtner
October 24, 2016
Tweet
Share
More Decks by Carsten Sandtner
See All by Carsten Sandtner
THE AI THAT WENT OUT TO DESTROY MANKIND
casarock
0
260
Over Mt. Stupid to Deep Learning
casarock
0
370
Mixed Realities for Web
casarock
0
320
Everything Web! And why OPEN matters
casarock
0
12
Mixed Realities in your browsers - BEDCon 2018
casarock
0
90
Mixed Realities in your browsers
casarock
1
540
WebVR - Virtual Reality in your browsers
casarock
0
140
Everything web and why open matters
casarock
0
260
WebVR - Virtual Realities in your Browsers
casarock
0
140
Other Decks in Technology
See All in Technology
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
120
How to achieve interoperable digital identity across Asian countries
fujie
0
120
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
200
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.9k
社内お問い合わせBotの仕組みと学び
nish01
0
430
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
4
610
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
440
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
実装で解き明かす並行処理の歴史
zozotech
PRO
1
460
Where will it converge?
ibknadedeji
0
190
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
270
AIが書いたコードをAIが検証する!自律的なモバイルアプリ開発の実現
henteko
1
350
Featured
See All Featured
Music & Morning Musume
bryan
46
6.8k
Building Adaptive Systems
keathley
43
2.8k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
The Cult of Friendly URLs
andyhume
79
6.6k
A Modern Web Designer's Workflow
chriscoyier
697
190k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
BBQ
matthewcrist
89
9.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
A designer walks into a library…
pauljervisheath
209
24k
Transcript
Night watch …with QA Carsten Sandtner (@casarock) mediaman// Gesellschaft für
Kommunikation mbH
about:me Carsten Sandtner @casarock Head of Software Development //mediaman GmbH
None
Testing
Unit Tests
Integration Tests
System Tests National Museum of American History Smithsonian Institution -
https://flic.kr/p/e6s1Lr
User Acceptance Tests Brett Jordan - https://flic.kr/p/7ZRSzA
UAT System Test Integration Test Unit Test Preliminary design Detailed
design Implementation Requirements
UAT Integration Test Unit Test Detailed design Implementation Requirements System
Test Preliminary design
by 7263255 - https://flic.kr/p/6YgDNN
None
None
Testing pyramid # of Tests easy to automate
Implementation Unit Test TDD
Integration Test Unit Test Detailed design Implementation Unit Test
System Test Integration Test Unit Test Preliminary design Detailed design
Implementation
Automated E2E Test
None
None
None
– 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.“
Nightwatch & WebDriver
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!
Installation $ npm install [-g] nightwatch … and Download Selenium-Server-Standalone!
Done.
Nightwatch project structure ├──bin/ | ├──chromedriver | └──seleniumdriver.jar | ├──data/
| └──globals.js | ├──reports/ | └──fancyreports.xml | ├──tests/ | ├──meaningfultest1.js | ├──meaningfultest2.js | └── … └──nightwatch.js[on]
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" } },
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“: { . . . },
Nightwatch.js - Browser setup "chrome": { "desiredCapabilities": { "browserName": "chrome",
"javascriptEnabled": true, "acceptSslCerts": true } } } };
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(); } };
Test execution $ nightwatch [-c nightwatch.js] tests/simplegoogle.js
None
Tests in detail
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
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
Hardcoded values?
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(); } };
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(); } };
Define globals module.exports = { url: 'http://www.google.com', selectors: { 'searchField':
'input[type=text]' }, static: { 'pageTitle': 'Google' } } Save as data/google.js
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') }, . . .
None
Use Page Objects!
Using Page Objects module.exports = { 'url': 'http://www.google.com', 'elements': {
'searchField': 'input[type=text]' } }; Save as object/google.js
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": {. . .} };
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(); } };
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'); } }] };
In your test module.exports = { 'Admin log in' :
function (browser) { var login = browser.page.admin.login(); login.navigate() .signInAsAdmin(); browser.end(); } };
Grouping tests $ nightwatch --group smoketests $ nightwatch --skipgroup smoketests
$ nightwatch --skipgroup login,whatever
Test groups | ├──tests/ | ├──smoketests/ | | ├──meaningfulTest1.js |
| ├──meaningfulTest2.js | | └── …… | └──login/ | ├──authAndLogin.js | └── ……
Tag your tests $ nightwatch --tag login $ nightwatch --tag
login --tag something_else $ nightwatch --skiptags login $ nightwatch --skiptags login,something_else
In your test module.exports = { '@tags': ['login', 'sanity'], 'Admin
log in' : function (browser) { var login = browser.page.admin.login(); login.navigate() .signInAsAdmin(); browser.end(); } };
Demo
Nightwatch is extendable! • Write custom commands • add custom
assertions • write custom reporter
Nightwatch is Javascript! • Using Filereaders • CSV, Excel etc.
• write helpers if needed!
None
Nightwatch @Mediaman
The problem
Before Nightwatch
The solution
UAT System Test Integration Test Unit Test Preliminary design Detailed
design Implementation Requirements ✓ ✓ ✓ ✓ ✓ ✓
Thanks! Carsten Sandtner @casarock
[email protected]
https://github.com/casarock (◡‿◡✿)