BrowserStack e2e starter-kit

Installation	Running test	Configuring Browsers	PhantomJS	Writing tests	FAQ	TODO

---

MochaJS end-to-end tests against multiple browsers available at BrowserStack or locally against Selenium Standalone & PhantomJS. This is a starter-kit which you can copy to your own projects.

Here's what running test suites looks like:

Installation & config

• Requires NodeJS v0.10 or newer

• Install MochaJS globally:

  sudo npm install -g mocha

• Then install local depedencies

  npm install

• Configure your BrowserStack username and access key:

  export BROWSERSTACK_USERNAME=<your-browserstack-username>
  export BROWSERSTACK_ACCESS_KEY=<your-secret-browserstack-access-key>

Running tests

Locally

npm test

On Continuous Integration

Set an environment variable export CI=true (note: e.g. Travis-CI sets this automatically) in your continuous integration environment or just prepend the variable before the test command:

CI=true npm test

This outputs the test results as "standard-ish" XUnit XML.

Configuring browsers

Browsers (together with operating system versin and screen resolution) are configured in ./test/browsers.json. See BrowserStack capabilities and the list of available browsers & mobile devices for Selenium testing.

PhantomJS

For testing against local headless PhantomJS browser (without using BrowserStack) you must:

• Install PhantomJS

• Download Selenium Standalone

• Run the Selenium Standalone server:

  java -jar selenium-server-standalone-2.42.1.jar

• Run the tests with:

  HEADLESS_PHANTOM=true mocha

Writing tests

Test suites must be stored in ./test/suites/-folder. If you wish, you can also organize your test suites into folders (maximun 2 levels deep).

A test suite must exposed as CommonJS module function which takes the (webdriver.io) client as an argument. Suite must have at least one MochaJS describe-block inside them.

Here's an example structure:

module.exports = function(client) {

  describe('Describe your test suite here', function() {
    it('should do something', function(done) {
      /* some tests */
    });
  });

}

See the provided examples google-search.testsuite.js and github test suite for more examples.

FAQ

• Why a simple test which just opens a website takes so long? Is my website slow?

  No, your website is probably OK. Running a test against BrowserStack service means that when the test starts, BrowserStack has to start up a machine (or probably just a simulator) and open up a new browser before it gets to the part where the website starts to load. That's why the tests take some time.

• Can I run these BrowserStack tests in parallel?

  No you can't, at least without heavy refactor. Also by design MochaJS runs all the tests serially. You probably shouldn't be running end-to-end tests every minute, so the fact these tests take some time shouldn't be a problem. If you absolutely require parallel runs you should check out something like this.

• What's the motivation behind this?

  I really like using MochaJS for all my testing (I have done unit testing and API testing with it before) and there wasn't (at least I had not found) any good examples of testing with Mocha against multiple browsers on BrowserStack. The huge amount of choice (and noise) related to Selenium testing is also a factor that really slowed me down at first. Then I found webdriver.io which looks really promising as it has nice API & syntax and by default uses CSS-selectors well-known by front-end developers (instead of XPath or some weird methods like driver.findElement(webdriver.By.name('q')); as does the Selenium's own webdriverjs project). This starter-kit was mainly developed for myself and my work, but hopefully it'll help others to get started with Mocha+BrowserStack as well! — @aripalo