Migrate existing Playwright test suites
A guide to integrating your existing Playwright test suites to run on BrowserStack
A basic locally running Playwright script
The following is a very simple Playwright script that would spawn up a browser on your local system and run the script:
const playwright = require('playwright');
(async () => {
const browser = await playwright['chromium'].launch({
headless: false
});
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('http://whatsmyuseragent.org/');
await page.screenshot({ path: `example-chromium.png` });
await browser.close();
})();
What needs to change to make the script work on BrowserStack?
In the above script, we saw that playwright['chromium'].launch
is used to spawn up a new Chromium browser window in the system where the script is running and the rest of the script works on that browser. To make the same script work on BrowserStack, you would need to add the following instead of playwright['chromium'].launch
:
const { chromium } = require('playwright');
const cp = require('child_process');
const clientPlaywrightVersion = cp.execSync('npx playwright --version').toString().trim().split(' ')[1]; // This is used to get the installed Playwright version on you machine. The same needs to be passed on to BrowserStack so that proper request-response mapping can be done for mismatched client and server Playwright versions in the same test
const caps = {
'browser': 'playwright-chromium',
'os': 'os x',
'os_version': 'mojave',
'browserstack.username': process.env.BROWSERSTACK_USERNAME || 'YOUR_USERNAME',
'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY || 'YOUR_ACCESS_KEY',
'client.playwrightVersion': clientPlaywrightVersion
};
const browser = await chromium.connect({
wsEndpoint: `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify(caps))}`
});
// chromium.connect needs to be used to connect to BrowserStack instead of using playwright['chromium'].launch
As you can see in the above snippet, you need to use chromium.connect
to connect to the CDP endpoint at BrowserStack. The caps
variable is used to send the additional parameters to BrowserStack so that the specific browser/OS combination can be assigned to your test.
How to choose which browser/OS version to run the tests on?
You can select any of the browsers and OS combinations to run your script. All you need to do is to specify the browser
, browser_version
, os
and os_version
in the caps
JSON before hitting the CDP endpoint.
Learn more about selecting the browsers and OS versions to run your test on.
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
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!