Testing via Browserstack

To make sure your project is production-ready, we recommend running tests in all the browsers you want to support.

If you do not have access to all browsers, we recommend using a service like Browserstack to make sure your project works as intended. Browserstack offers free accounts for open source projects.

The testing-karma-bs configuration helps setting up karma with Browserstack. To set it up you need to use the configuration in your project, and follow the instructions below to set up a user account

Setup

With our project scaffolding you can set up a pre-configured project, or you can upgrade an existing project by choosing Upgrade -> Testing:

npm init @open-wc

Manual

Install:

npm i -D @open-wc/testing-karma-bs deepmerge

Add a karma.conf.bs.js:

const merge = require('deepmerge');
const { bsSettings } = require('@open-wc/testing-karma-bs');
const createBaseConfig = require('./karma.conf.js');

module.exports = config => {
  config.set(
    merge(bsSettings(config), createBaseConfig(config), {
      browserStack: {
        project: 'your-name',
      },
    }),
  );

  return config;
};

Add a script to your package.json:

{
  "scripts": {
    "test:bs": "karma start karma.bs.config.js --compatibility all --coverage"
  }
}

Setup user + key

# for one-time use only
export BROWSER_STACK_USERNAME=xxx
export BROWSER_STACK_ACCESS_KEY=xxx

# or add them to your .bashrc
echo "export BROWSER_STACK_USERNAME=xxx" >> ~/.bashrc
echo "export BROWSER_STACK_ACCESS_KEY=xxx" >> ~/.bashrc

# to verify, run:
echo "User: $BROWSER_STACK_USERNAME"
echo "Key: $BROWSER_STACK_ACCESS_KEY"

Usage

npm run test:bs
Last Updated: 1/13/2019, 10:46:34 AM