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.

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

22. jobs.schibsted.com
@Schibsted_Eng
bytes.schibsted.com
We’re hiring!
Thank you
@motanelu
github.com/motanelu
http://tudorbarbu.ninja