open-wc/packages/testing-karma-bs/README.md

Testing via Browserstack

Part of Open Web Component Recommendation open-wc

Open Web Components provides a set of defaults, recommendations and tools to help facilitate your Web Component. Our recommendations include: developing, linting, testing, tooling, demoing, publishing and automating.

This will run your local test via Browserstack browsers/devices. You will need to have a Browserstack automate account.

Using:

• Karma via @open-wc/testing-karma
• Testing via Browserstack via karma-browserstack-launcher

::: tip Info This is part of the default open-wc recommendation :::

Setup

npx -p yo -p generator-open-wc -c 'yo open-wc:testing-karma-bs'
# follow Setup user + key

Manual

• yarn add @open-wc/testing-karma-bs --dev
• Copy karma.es5.bs.config.js to karma.es5.bs.config.js
• Add these scripts to your package.json

  "scripts": {
    "test:es5:bs": "karma start karma.es5.bs.config.js"
  },
  

Setup user + key

• Go to https://www.browserstack.com/accounts/settings
• Look for "Automate" and write down your "Access Key" and "Username"

# 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:es5:bs