Integrate your playwright test suite with BrowserStack

Do you have an existing playwright automation suite? Then you can integrate your suite with BrowserStack with just a few easy steps. I will try to break down the process, keeping it as simple as possible.

Prerequisites

• An existing playwright automation suite
• NodeJS installed(Version 14 and above)

Integration Steps

Step 1:

We need to set our BrowserStack credentials as your environment variable. We can do this by opening up CMD/terminal/bash from Windows, Linux, and MacOS.

macOS or Linux
export BROWSERSTACK_USERNAME="<your_user_name>"
export BROWSERSTACK_ACCESS_KEY="<your_bs_access_key>"

Windows PowerShell
$env:BROWSERSTACK_USERNAME="<your_user_name>"
$env:BROWSERSTACK_ACCESS_KEY="<your_bs_access_key>"

Windows Cmd
set BROWSERSTACK_USERNAME=<your_user_name>
set BROWSERSTACK_ACCESS_KEY=<your_bs_access_key>`

We can get these credentials by clicking on the profile icon and Account and Profile and My Profile

Step 2: Install NodeJS BrowserStack SDK

Execute the following command to enable BrowserStack SDK for our project

npm i -D browserstack-node-sdk@latest
npx setup --username "<your_user_name>" --key "<your_bs_access_key>"

Step 3:

Create the config file for BrowserStack in your project's root directory by creating the browserstack.yml file. The .yml file can be configured like this -

userName: <your_user_name>
accessKey: <your_bs_access_key>
framework: playwright
platforms:
  - os: Windows
    osVersion: 11
    browserName: chrome
    browserVersion: latest
  - os: OS X
    osVersion: Ventura
    browserName: playwright-webkit
    browserVersion: latest
  - os: Windows
    osVersion: 11
    browserName: playwright-firefox
    browserVersion: latest
browserstackLocal: true
buildName: bstack-demo
buildIdentifier: ${BUILD_NUMBER}
projectName: BrowserStack Sample
testObservability: true
debug: true
consoleLogs: info

Of course, you can configure this .yml according to your preference. But for now, it just should work.

Step 4: Run your suite

Now your suite is ready to run on BrowserStack. Use the following command to execute your test -
npx browserstack-node-sdk <Your existing command for running your test suite>
In general cases, for running playwright project this command should work with BrowserStack -
npx browserstack-node-sdk playwright test

After that, you should be able to see your tests running on BrowserStack. To see the tests, go to Automate and check the results from there.

Hope it helps! Thanks for reading out :)