Ember.js - CircleCI - BrowserStack

Question

I try to connect together our cicleCI with browserstack and run our integration_test and unit tests not only with PhantomJS but on real Firefox and Internet Explorer as well, using Browserstack service.

I try to configure browserstack-cli. I can run the test from circleci via tunnel on Browserstack, but never report back to circleci server.

Could you please share your experience if you already played with this stack? Thank you very much!

Answer 1

The solution is to use BrowserStackLocal and browserstack-cli tools together. The 64bit linux version of BrowserStackLocal builds up the tunnel from circleCI server to Browserstack server. After that we can use browserstack-cli to launch browsers and running tests from testem.

Download BrowserStackLocal

and insert in .browserstack folder in your project.

• 64bit linux version of BrowserStackLocal: http://www.browserstack.com/local-testing (Binnaries)

Create a script,

which will run and create settings for browserstack-cli. You have to setup global variables in circleCI, and you can keep your access details there secretly. Let's call this file runthis.sh and save in .browserstack folder. This script will run your BrowserStackLocal binary as well, so the tunnel will be exist.

    #!/bin/bash
    echo "{\"username\":\"`echo $BS_USER`\", \"password\":\"`echo $BS_PASSWORD`\", \"privateKey\": \"`echo $BS_KEY`\", \"apiKey\":\"`echo $BS_KEY`\"}" >> ~/.browserstack/browserstack.json
    ./.browserstack/BrowserStackLocal $BS_KEY &

CircleCI config

(circle.yml) file mainly depend of your project. We have to copy .browserstack folder in home folder, install bower, browserstack-cli and testem.

An example:

 
machine:
  timezone:
    Pacific/Auckland
  node:
    version: v0.10.28

dependencies:
  pre:
    - mv ./.browserstack ~/
    - sh ~/.browserstack/runthis.sh

  post:
    - bower install
    - npm install browserstack-cli -g
    - npm install testem -g

test:
  override:
    - PATH=$PATH:bin grunt integration_tests_cli; testem ci
    - PATH=$PATH:bin grunt tests_cli; testem ci
 

Testem config:

testem.yml - Most of the part is depend of your project. Important in our case is launchers section.

 
framework: "qunit"
test_page: "tmp/index.html"

src_files:
  - "tmp/assets/application.js"
  - "tmp/tests.js"
  - "tmp/integration_tests.js"

launchers:
  bs_chrome:
    command: browserstack launch chrome --attach 
    protocol: browser
    timeout: 300

launch_in_ci:
  - "PhantomJS"
  - "bs_chrome"

launch_in_dev:
  - "Chrome"
  - "Firefox"
  - "PhantomJS"

parallel: 2

So, if you update your project on github, circleci will launch your test and connect to browserstack and gonna use browsers there...