Home Travis CI
Saucelabs Configuration

Objectives

We will see a bit of configuration from karma and an example of a working enviroment for testing and coverage. This project is the same I am using for browser testing , but with integration to saucelabs. So we can make our tests run in different devices and browsers. For impatients you can find the repo here

The karma configuration we will be analyzing will be this one

Saucelabs will be working with our code in order to test in different devices and browsers. Please create an account on saucelabs.

Pre requisites

In this case we need to have installed nodejs, npm, and karma, mocha, phantomjs and expect for assertion. It would be nice that you already saw this post that explains about karma configuration of this project.

Defining browsers and platforms

We need to define with karma which are going to be those devices and browsers that saucelabs will take care for. 

// https://saucelabs.com/platforms/
var browsers = {
  sl_chrome: {
    base: 'SauceLabs',
    browserName: 'chrome',
    platform: 'Windows 7',
    version: '35'
  },
  sl_firefox: {
    base: 'SauceLabs',
    browserName: 'firefox',
    version: '30'
  },
  sl_ios_safari: {
    base: 'SauceLabs',
    browserName: 'iphone',
    platform: 'OS X 10.9',
    version: '7.1'
  },
  sl_ie_11: {
    base: 'SauceLabs',
    browserName: 'internet explorer',
    platform: 'Windows 8.1',
    version: '11'
  }
};

Karma saucelabs configurations

We will take those configurations from our local enviroment, and we will override those configurations with the ones we need for sauce labs. 

var cfg = {
    reporters: ['saucelabs', 'spec'],
    browsers: Object.keys(browsers),
    customLaunchers: browsers,
    captureTimeout: 120000,
    browserNoActivityTimeout: 60000,
    sauceLabs: {
      testName: 'web-istanbul',
      build: 'local ' + Date.now(),
      recordLogs: true,
      recordVideo: false,
      startConnect: true,
      recordScreenshots: true,
      captureHtml: true,
      passed: true,
      public: 'public',
      connectOptions: {
        port: 5757,
        logfile: 'sauce-connect.log'
      }
    },
    singleRun: true,
    autoWatch : false
  }

So we can see that reporters defined are saucelabs and spec, all this values will override the ones from karma.local.conf.js.

We are adding our browsers to the configuration. We will record logs in the file sauce-connect.log in order to see if there where any error during this execution.

Running Saucelabs

So after defining our configurations for sauce labs on top of our locals. We can run saucelabs through our command line.

To do so we will define our credentials for saucelabs in enviroment variables. Those creadentials you will get after logging to saucelabs in your account settings.

$ export SAUCE_USERNAME=[YOUR USER NAME]
$ export SAUCE_ACCESS_KEY=[YOUR ACCESS KEY]

Remember export running from terminal will actually work in that terminal, in order to get it working all the time from the command line you need to define it locally.

I will not go further on this two environment variables, the reasons is we will define them lately in another place, and actually some one else will run our configurations to saucelabs. (cough cough travis)

So running saucelabs from command line now will be. The same as running locally but with the configuration for saucelabs.

$ karma start karma.saucelabs.conf.js Sauce labs reports for testing in some configurations

Conclusion

At this moment we just created a nice environment to test what we need with mocha, karma, phantomjs, and then we just added some cross browsing tests with saucelabs. Whats next? We can tell someone else to run all this for us hang tight to your chair and read the next post for Continuous Integration and Github.

Home Travis CI