Run CodeceptJS Puppeteer tests on BrowserStack

Get started with running CodeceptJS Puppeteer tests on BrowserStack across 100+ browser/OS combinations

Quickstart

Running your first CodeceptJS Puppeteer test suite on BrowserStack is super easy. Here’s a quick start guide to help you get started with Puppeteer testing on BrowserStack in under 2 minutes.

Step 1: Clone our sample repository and install dependencies (if not already done)

All our sample tests are available on this GitHub repository. The first step is to download this repository on your system and install the dependencies as shown below:

# The following command will clone the repository on your system

git clone https://github.com/browserstack/puppeteer-browserstack.git
cd puppeteer-browserstack/codeceptjs-example
npm install

Step 2: Configuring BrowserStack credentials

All our sample scripts need your BrowserStack credentials to run. Please set the environment variables BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY with your credentials as shown below:

export BROWSERSTACK_USERNAME="YOUR_USERNAME"
export BROWSERSTACK_ACCESS_KEY="YOUR_ACCESS_KEY"

Alternatively, your can put your credentials in the browserstack.username and browserstack.accessKey capabilities in the codecept.conf.js file in the sample repository.

Step 3: Run your CodeceptJS test

After you have configured the credentials and installed the npm dependencies, you can invoke your first CodeceptJS Puppeteer test on BrowserStack using the following:

npx codeceptjs run

After the test has run, you can access the test results on the BrowserStack Automate dashboard.

Run your existing CodeceptJS Puppeteer suite on BrowserStack

If you have an existing CodeceptJS Puppeteer test suite, then you can make a few quick modifications to the codecept.conf.js file as shown below and make your suite run on BrowserStack:

// The following caps JSON contains the information based on which your test would run on BrowserStack. You need to specify the browser/OS combination here and pass on the BrowserStack credentials
const caps = {
  'browser': 'chrome',
  'browser_version': 'latest',
  'os': 'osx',
  'os_version': 'catalina',
  'name': 'Codecept test using Puppeteer',
  'build': 'CodeceptJS Puppeteer on BrowserStack',
  'browserstack.username': process.env.BROWSERSTACK_USERNAME || 'YOUR_USERNAME',
  'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY || 'YOUR_ACCESS_KEY'
};

exports.config = {
  tests: './*_test.js',
  output: './output',
  helpers: {
    Puppeteer: {
      chrome: {
        browserWSEndpoint: `wss://cdp.browserstack.com/puppeteer?caps=${encodeURIComponent(JSON.stringify(caps))}`  
        // Though this is defined under 'chrome' but you would get the browser type based on what you have passed in the 'caps' variable. This line ensures that a browser from BrowserStack would be used to run your tests
      }
    }
  },
  include: {
    I: './steps_file.js'
  },
  bootstrap: null,
  mocha: {},
  name: 'codeceptjs-example',
  plugins: {
    pauseOnFail: {},
    retryFailedStep: {
      enabled: true
    },
    tryTo: {
      enabled: true
    },
    screenshotOnFail: {
      enabled: true
    }
  }
}