Run CodeceptJS Playwright tests
Get started with running CodeceptJS Playwright tests on BrowserStack Automate across 100+ browser/OS combinations
Running your first CodeceptJS Playwright test suite on BrowserStack is super easy. Here’s a quick start guide to help you get started with Playwright testing on BrowserStack in under 2 minutes.
CodeceptJS + Playwright is only supported on desktop browsers via the BrowserStack SDK. Using this integration on mobile devices is not supported and may lead to errors.
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/playwright-browserstack.git
cd playwright-browserstack/codeceptjs-example
npm install
Step 2: Configuring BrowserStack credentials
Testing on BrowserStack requires username and access key that can be found in account settings.
If you have not created an account yet, you can sign up for a Free Trial or purchase a plan.
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 Playwright 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 Playwright suite on BrowserStack
If you have an existing CodeceptJS Playwright 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:
const { setHeadlessWhen } = require('@codeceptjs/configure');
// turn on headless mode when running with HEADLESS=true environment variable
// export HEADLESS=true && npx codeceptjs run
setHeadlessWhen(process.env.HEADLESS);
const cp = require('child_process');
const clientPlaywrightVersion = cp.execSync('npx playwright --version').toString().trim().split(' ')[1];
const caps = {
'browser': 'chrome', // allowed browsers are `chrome`, `edge`, `playwright-chromium`, `playwright-firefox` and `playwright-webkit`
'os': 'osx',
'os_version': 'catalina',
'name': 'Codecept test using Playwright',
'build': 'CodeceptJS on BrowserStack',
'browserstack.username': process.env.BROWSERSTACK_USERNAME || 'YOUR_USERNAME',
'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY || 'YOUR_ACCESS_KEY',
'client.playwrightVersion': clientPlaywrightVersion // example '1.11.1'
};
exports.config = {
tests: './*_test.js',
output: './output',
helpers: {
Playwright: {
// url: 'http://localhost',
show: true,
browser: 'chromium',
chromium: {
browserWSEndpoint: { wsEndpoint: `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify(caps))}` }
}
}
},
include: {
I: './steps_file.js'
},
bootstrap: null,
mocha: {},
name: 'codeceptjs',
plugins: {
pauseOnFail: {},
retryFailedStep: {
enabled: true
},
tryTo: {
enabled: true
},
screenshotOnFail: {
enabled: true
}
}
}
Playwright tests run on BrowserStack using a client-server architecture. So, test assertions run on the client side and hence BrowserStack won’t know whether your tests have passed or failed. Learn more how to mark tests as passed or failed on BrowserStack.
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
- RESOURCES
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!