Test any (yes, any) website using NightwatchJS - selenium based JavaScript test runner. We will cover
- prerequisites
- configuration
- writing tests
- reading reports
- continuous integration and services
6. 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
10. nightwatch.js
● Command line test runner
● Write tests in Javascript
● CSS Selectors (Also Xpath)
● Continuous integration support
● Cloud services support
● Easy to extend
13. 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...
14.
15. 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
27. TESTS
module.exports = {
'As a user I want to see movie title in right hand side block' :
function (browser) {
}
};
28. TESTS
module.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)
}
};
29. TESTS
module.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]')
}
};
30. TESTS
module.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)
}
};
31. TESTS
module.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')
}
};
32. TESTS
module.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();
}
};
33. TESTS: BDD
module.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();
}
};
34. 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();
…
46. 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/
47. Continuous Integration
- Code -> commit -> test (PASS!) -> deploy
- Platform configurator for saucelabs
- Nightwatchjs configuration: