20160905 - brisjs - nightwatch testing
TRANSCRIPT
Automated e2e testing with
Nightwatch.js05 September 2016
BrisJS
Hello! My name is...
Janna
- Web developer
Vladimir
- PHP developer / Drupal Specialist
http://www.slideshare.net/VladimirAus
TOC
- Introduction
- Prerequisites
- Configuration
- Tests and reports
- Continuous integration
- Conclusion
Introduction
- We have Requirements
- Implementation is based on Requirements
- Tests verify implementation
Introduction
Our requirements
- Type movie title in google search
- Click submit
- movie details should be displayed in right
hand side area
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
Introduction
Record gif
Introduction
Let’s write a test
Introduction
Let’s Run a test
nightwatch.js
● Command line test runner
● Write tests in Javascript
● CSS Selectors (Also Xpath)
● Continuous integration support
● Cloud services support
● Easy to extend
TOC
- Introduction
- Prerequisites
- Configuration
- Tests and reports
- Continuous integration
- Conclusion
Nightwatch Prerequisites
- Java JDK
- Selenium server
- Selenium web driver
- Nodejs / Npm
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...
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
TOC
- Introduction
- Prerequisites
- Configuration
- Tests and reports
- Continuous integration
- Conclusion
CONFIGURATION
"src_folders" : ["tests"],
"output_folder" : "reports",
CONFIGURATION
"selenium" : {
"start_process" : false,
"server_path" : "/usr/local/.../seleniumserver2.jar",
"log_path" : "",
"host" : "127.0.0.1",
"port" : 4444,
CONFIGURATION
"selenium" : {
...
"cli_args" : {
"webdriver.chrome.driver" : "./chromedriver",
"webdriver.gecko.driver" : "./geckodriver",
"webdriver.ie.driver" : ""
}
CONFIGURATION
"test_settings" : {
..
}
CONFIGURATION
"default" : {
"desiredCapabilities": {
"browserName": "firefox",
"javascriptEnabled": true,
}
}
> nightwatch
CONFIGURATION
"safari" : {
"desiredCapabilities": {
"browserName": "safari",
"javascriptEnabled": true,
}
}
> nightwatch -e safari
CONFIGURATION
"safari" : {
"desiredCapabilities": {
"browserName": "safari",
"javascriptEnabled": true,
}
}
> nightwatch -e default,safari
TOC
- Introduction
- Prerequisites
- Configuration
- Tests and reports
- Continuous integration
- Conclusion
TESTS
TESTS
TESTSmodule.exports = {
'As a user I want to see movie title in right hand side block' :
function (browser) {
}
};
TESTSmodule.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)
}
};
TESTSmodule.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]')
}
};
TESTSmodule.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)
}
};
TESTSmodule.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')
}
};
TESTSmodule.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();
}
};
TESTS: BDDmodule.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();
}
};
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();
…
TESTS
TESTS: groups
TESTS: groups
> nightwatch -g drupalsouth
TESTS: groups
> nightwatch -g drupalsouth/auth
Additional grouping
- Using groups
- Using tags
- Disabling tests
- Parallel running
- Use grunt
- Use mocha
TESTS: REPORTS
TESTS: REPORTS
- JUnit XML format
TESTS: REPORTS
TESTS: REPORTS
- Outputs Junit xml
- Extension allows to output json
TOC
- Introduction
- Prerequisites
- Configuration
- Tests and reports
- Continuous integration
- Conclusion
Headless Testing
Xvfb
- Virtual screen
- Native functionality
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/
Continuous Integration
- Code -> commit -> test (PASS!) -> deploy
- Platform configurator for saucelabs
- Nightwatchjs configuration:
Continuous Integration
Test
- Locally
- In the cloud
TOC
- Introduction
- Prerequisites
- Configuration
- Tests and reports
- Continuous integration
- Conclusion
CONCLUSION
PROS:
- TEST any website (Yes, Any!)
- Complements unit testing
- Produce REPORts
- VISUAL artifacts (screenshots, videos)
- CONTINUOUS INTEGRATION/Cloud services
CONCLUSION
CONS:
- Takes time for initial setup
- NEED TO KNOW BASIC PROGRAMMING
QUESTIONS?
- Twitter: @Jannaaus - @Vladimiraus
- Sample codes
- http://www.slideshare.net/VladimirAus