Testing frontends with nightwatch & saucelabs
Download as PPTX, PDF0 likes1,449 views
The document discusses cross-browser testing using Nightwatch, Travis, and Sauce Labs, highlighting their integration for automated testing. It includes a sample app demonstration and outlines the testing environment setup, configuration, and the anatomy of a test. Additionally, it addresses potential issues such as latency and time zone differences that might affect test outcomes.
![// news items are
// populated correctly
[
{
"id": 1,
"title": "Everybody's rich",
"url": "http://fake.news/item/1",
"excerpt": "description",
"image": "url",
"timestamp": "1492375010933"
}
…
]
Current tab is selected
Dates are formatted
Missing images are
handled
Changing the category
works
// categories are populated
// correctly
[
{
"id": 1,
"name": "Financial"
},
{
"id": 2,
"name": "Sports"
}
]
Smoke test (Wikipedia)](https://image.slidesharecdn.com/testingfrontendswithnightwatchsaucelabs-170420200712/85/Testing-frontends-with-nightwatch-saucelabs-4-320.jpg)
Testing frontends with nightwatch & saucelabs
- 1. Cross browser testing with Nightwatch, Travis and Saucelabs Tudor Barbu @motanelu github.com/motanelu http://tudorbarbu.ninja Frontend engineer* *The views and opinions expressed in this presentation are my own
- 2. Everybody has a testing environment. Some people are lucky enough to have a totally separate environment to run production in. Unknown author
- 3. Sample app - plug and play news widget! Fully working demo at https://github.com/motanelu/bcn- js-news-widget new NewsWidget({ 'selector': '#widget', 'api': 'some.url', 'userId': 1 })
- 4. // news items are // populated correctly [ { "id": 1, "title": "Everybody's rich", "url": "http://fake.news/item/1", "excerpt": "description", "image": "url", "timestamp": "1492375010933" } … ] Current tab is selected Dates are formatted Missing images are handled Changing the category works // categories are populated // correctly [ { "id": 1, "name": "Financial" }, { "id": 2, "name": "Sports" } ] Smoke test (Wikipedia)
- 5. When the testing environment is just right
- 6. ● Popular Javascript testing framework ● Wraps around Selenium (W3C Webdriver compatible) ● Supports BDD style expectations and assertions ● Extensible via plugins http://nightwatchjs.org
- 7. http://expressjs.com http://restify.com ● more popular ● robust ● lots of extras (not always useful) ● aimed at RESTful APIs ● less popular
- 8. ● Cross-browser testing platform ● Over 800 platform / browser combinations ● Free for open source projects ● Automated testing ● Manual testing https://saucelabs.com
- 9. $ brew cask install sauce-connect $ export SAUCE_USERNAME="..." $ export SAUCE_ACCESS_KEY="..." $ sc sauce-connect tunnel Browser running on Saucelabs VM GET http://127.0.0.1:9000/ Local server listening on 9000
- 10. https://travis-ci.com ● Integration server ● Out of the box support for nodejs ● Integration with Saucelabs (sauce-connect) ● Free for open source (https://travis-ci.org)
- 11. Anatomy of a test
- 12. Load the page Load the script Point the API to a mocked URL Run assertions
- 13. /^dist/.+/ - express.static /^static/.+/ - express.static /^mock/.+/ /mock/{test} => fixtures/{test}
- 14. Default configuration for Saucelabs Each such object represents a platform (browser + OS) in Saucelabs Nightwatch configuration (paths, ...)
- 15. $ npm run test Run a build Configure Nightwatch Start Express Run the tests Send status to Saucelabs package.json runner.js express.conf.js nightwatch.conf.js Stop Express nightwatch.globals.conf.js
- 16. Example test for the header of the widget
- 17. Demo time ...what could possibly go wrong?
- 19. $ npm run test:debug
- 20. $ gem install travis $ travis encrypt SAUCE_USERNAME=... --add $ travis encrypt SAUCE_ACCESS_KEY=... --add language: node_js node_js: - '7.4' addons: apt: packages: - oracle-java8-set-default sauce_connect: true before_install: - export TZ=Europe/Madrid script: - npm run test env: global: - secure: ki4GZ/fXn... - secure: toxLrMviA9... .travis.yml
- 21. Caveats ● Latency between Travis / localhost and Saucelabs can lead to false negatives ● Difference in timezone (ex: 5 minutes ago messages) ● Booting VMs can be slow - try to group your tests and optimize the testing schedule