Ask the Community
Run TypeScript Playwright tests
Get started with running TypeScript Playwright tests on BrowserStack Automate across 100+ browser/OS combinations
Running your first TypeScript Playwright test suite on BrowserStack is simple. Use this quick start guide to run Playwright tests on BrowserStack in a few minutes.
Step 1: Clone our sample repository and install dependencies (if not already done)
All sample tests are available in this GitHub repository. Download the repository to your system and install the dependencies as follows:
# The following command will clone the repository on your system
git clone https://github.com/browserstack/typescript-playwright-browserstack.git
cd typescript-playwright-browserstack
npm i
Step 2: Configuring BrowserStack credentials
To test on BrowserStack, you need a username and an access key. You can find them in your 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. Set the environment variables BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY with your credentials as shown in the example code. You can find these values on the BrowserStack Username and Access Key settings page:
export BROWSERSTACK_USERNAME="YOUR_USERNAME"
export BROWSERSTACK_ACCESS_KEY="YOUR_ACCESS_KEY"
Alternatively, you can put your credentials in the browserstack.username and browserstack.accessKey capabilities in the browserstack.config.ts file in the sample repository.
Step 3: Run your TypeScript Playwright test
After you configure the credentials and install the npm dependencies, you can invoke a sample TypeScript Playwright test on BrowserStack by running the following command:
npm run sample-test
Run tests on locally hosted websites
To run this sample project against a website hosted on your local machine:
- Start your web application on http://localhost:5500.
- From the project root, run
npm run sample-local-test.
Understand how many parallel sessions you need by using the Parallel Test Calculator.
Run your existing TypeScript Playwright suite on BrowserStack
If you already have a TypeScript Playwright test suite, then you can make a few quick modifications to the browserstack.config.ts file as shown and run your test suite on BrowserStack:
const base = require('@playwright/test');
const cp = require('child_process');
const clientPlaywrightVersion = cp
.execSync('npx playwright --version')
.toString()
.trim()
.split(' ')[1];
const BrowserStackLocal = require('browserstack-local');
const util = require('util');
// BrowserStack Specific Capabilities.
// Set 'browserstack.local:true For Local testing
const caps = {
browser: 'chrome',
os: 'osx',
os_version: 'catalina',
name: 'My first playwright test',
build: 'playwright-build',
'browserstack.username': process.env.BROWSERSTACK_USERNAME || 'USERNAME',
'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY || 'ACCESSKEY',
'browserstack.local': process.env.BROWSERSTACK_LOCAL || true,
'client.playwrightVersion': clientPlaywrightVersion,
};
exports.bsLocal = new BrowserStackLocal.Local();
// replace YOUR_ACCESS_KEY with your key. You can also set an environment variable - "BROWSERSTACK_ACCESS_KEY".
exports.BS_LOCAL_ARGS = {
key: process.env.BROWSERSTACK_ACCESS_KEY || 'ACCESSKEY',
};
// Patching the capabilities dynamically according to the project name.
const patchCaps = (name, title) => {
let combination = name.split(/@browserstack/)[0];
let [browserCaps, osCaps] = combination.split(/:/);
let [browser, browser_version] = browserCaps.split(/@/);
let osCapsSplit = osCaps.split(/ /);
let os = osCapsSplit.shift();
let os_version = osCapsSplit.join(' ');
caps.browser = browser ? browser : 'chrome';
caps.os_version = browser_version ? browser_version : 'latest';
caps.os = os ? os : 'osx';
caps.os_version = os_version ? os_version : 'catalina';
caps.name = title;
};
exports.getCdpEndpoint = (name, title) => {
patchCaps(name, title)
const cdpUrl = `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify(caps))}`
console.log(`--> ${cdpUrl}`)
return cdpUrl;
}
You can view your test results on the BrowserStack Automate dashboard.
Playwright tests run on BrowserStack using a client-server architecture. Your test assertions run on the client side, so BrowserStack cannot determine whether your tests have passed or failed. For more information, see 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!