Quick start guide to integrate BrowserStack Test Observability with Playwright Node.js
Prerequisites
You have an account with BrowserStack (even a free trial works) and can get your Username and Access Key from Settings.
You have a Playwright v1.31 or higher test suite, (it is okay even if you do not run your tests on BrowserStack infrastructure).
You use the Playwright test runner in your tests. The test variable used in writing the tests should be imported from @playwright/test.
Integrate with Test Observability
BrowserStack Test Observability can be used regardless of where your tests run - whether on BrowserStack’s devices and browsers, locally on your laptop, CI machines, or using another cloud provider.
Not only that, Test Observability is agnostic to the type of testing and hence you could also integrate it with your unit or integration test suite written using Playwright.
Please select your setup below to get started with an awesome debugging experience with Test Observability:
Install or update to the latest version of BrowserStack Node SDK
Go to your Playwright project’s root directory and run the following commands to update or install the BrowserStack Node SDK and verify the installed version:
Terminal
npm i -D browserstack-node-sdk
npm list browserstack-node-sdk
Please ensure that you have at least browserstack-node-sdk v1.21.1 before proceeding.
Create the browserstack.yml file
Run the following command to create a browserstack.yml file:
Update the following configurations in the browserstack.yml file:
browserstack.yml
userName: YOUR_USERNAME
accessKey: YOUR_ACCESS_KEY
buildName:"Your static build/job name goes here"projectName:"Your static project name goes here"CUSTOM_TAG_1:"You can set a custom Build Tag here"# Use CUSTOM_TAG_<N> and set more build tags as you need.testObservability:truebrowserstackAutomation:false# Set to true for tests on BrowserStack products....
The projectName and buildName config must be static and not change across different runs of the same build. Restrict the characters in your projectName and buildName to alphanumeric characters (A-Z, a-z, 0-9), underscores (_), colons (:), and hyphens (-). Any other character will be replaced with a space.
Please note that if you are running tests on BrowserStack Automate already, this SDK is only for Test Observability and will not override the capabilities you have configured in browserstack.config.js. This means if you want to have the same build & project names across Test Observability & BrowserStack Automate, you need to maintain the same values across both browserstack.config.js and browserstack.yml.
Run your test suite with Test Observability
Prepend browserstack-node-sdk to the existing command that you use to trigger a run as shown below and data will automatically start getting sent to BrowserStack Test Observability.
Terminal
npx browserstack-node-sdk <Your existing command for running your test suite>
For example, if you use the command npx playwright test sample --project=chromium to run your test suite, you need to replace it with npx browserstack-node-sdk playwright test sample --project=chromium.
Post build run completion, you will see the build URL of Test Observability. Alternatively, you can also navigate to your build run using Build Runs.
Enable Trace Viewer
Playwright’s Trace Viewer helps you debug your tests efficiently. If the trace is generated successfully, you should be able to view trace logs in Test Observability by default.
In case you are not able to view the trace logs on Test Observability, you can enable it in any of the following three ways:
Set trace capability to on in the browserstack.yml file for each platform:
```yml
platforms:
- os: Windows
osVersion: 11
browserName: chrome
browserVersion: latest
playwrightConfigOptions:
use:
trace: 'on'
- os: OS X
osVersion: Ventura
browserName: playwright-webkit
browserVersion: latest
playwrightConfigOptions:
use:
trace: 'off'
```
Install or update to the latest version of BrowserStack Node SDK
Go to your Playwright project’s root directory and run the following commands to update or install the BrowserStack Node SDK and ensure that you have the latest version:
Terminal
npm i -D browserstack-node-sdk
npm list browserstack-node-sdk
Please verify that you now have at least browserstack-node-sdk v1.21.1 before proceeding.
Set up the browserstack.yml file
Set up the browserstack.yml file as in the following code sample:
```yml
userName: "YOUR_USERNAME"
accessKey: "YOUR_ACCESS_KEY"
buildName: "Your static build/job name goes here"
projectName: "Your static project name goes here"
CUSTOM_TAG_1: "You can set a custom Build Tag here"
# Use CUSTOM_TAG_<N> and set more build tags as you need.
testObservability: true
...
```
userName: "YOUR_USERNAME"
accessKey: "YOUR_ACCESS_KEY"
buildName: "Your static build/job name goes here"
projectName: "Your static project name goes here"
CUSTOM_TAG_1: "You can set a custom Build Tag here"# Use CUSTOM_TAG_<N> and set more build tags as you need.
testObservability: true...
The projectName and buildName config must be static and not change across different runs of the same build. Restrict the characters in your projectName and buildName to alphanumeric characters (A-Z, a-z, 0-9), underscores (_), colons (:), and hyphens (-). Any other character will be replaced with a space.
Run your test suite with Test Observability
Prepend browserstack-node-sdk to the existing command that you use to trigger a run as shown below and data will automatically start getting sent to BrowserStack Test Observability.
Terminal
npx browserstack-node-sdk <Your existing command for running your test suite>
For example, if you use the command npx playwright test sample --project=chromium to run your test suite, you need to replace it with npx browserstack-node-sdk playwright test sample --project=chromium.
Post build run completion, you will see the build URL of Test Observability. Alternatively, you can also navigate to your build run using Build Runs.
Enable Trace Viewer
Playwright’s Trace Viewer helps you debug your tests efficiently. If the trace is generated successfully, you should be able to view trace logs in Test Observability by default.
In case you are not able to view the trace logs on Test Observability, you can enable it in any of the following three ways:
Set trace capability to on in the browserstack.yml file for each platform:
```yml
platforms:
- os: Windows
osVersion: 11
browserName: chrome
browserVersion: latest
playwrightConfigOptions:
use:
trace: 'on'
- os: OS X
osVersion: Ventura
browserName: playwright-webkit
browserVersion: latest
playwrightConfigOptions:
use:
trace: 'off'
```
Install or update to the latest version of BrowserStack Node SDK
Go to your Playwright project’s root directory and run the following commands to update or install the BrowserStack Node SDK and verify the installed version:
Terminal
npm i -D browserstack-node-sdk
npm list browserstack-node-sdk
Please ensure that you now have at least browserstack-node-sdk v1.21.1 before proceeding.
Create the browserstack.yml file
If you don’t already have a browserstack.yml file, run the following command to create one:
userName: YOUR_USERNAME
accessKey: YOUR_ACCESS_KEY
buildName:"Your static build/job name goes here"projectName:"Your static project name goes here"CUSTOM_TAG_1:"You can set a custom Build Tag here"# Use CUSTOM_TAG_<N> and set more build tags as you need.testObservability:truebrowserstackAutomation:false# Set to true for tests on BrowserStack products....
The projectName and buildName config must be static and not change across different runs of the same build. Restrict the characters in your projectName and buildName to alphanumeric characters (A-Z, a-z, 0-9), underscores (_), colons (:), and hyphens (-). Any other character will be replaced with a space.
Run your test suite with Test Observability
Prepend browserstack-node-sdk to the existing command that you use to trigger a run as shown below and data will automatically start getting sent to BrowserStack Test Observability.
Terminal
npx browserstack-node-sdk <Your existing command for running your test suite>
For example, if you use the command npx playwright test sample --project=chromium to run your test suite, you need to replace it with npx browserstack-node-sdk playwright test sample --project=chromium.
Post build run completion, you will see the build URL of Test Observability. Alternatively, you can also navigate to your build run using Build Runs.
Enable Trace Viewer
Playwright’s Trace Viewer helps you debug your tests efficiently. If the trace is generated successfully, you should be able to view trace logs in Test Observability by default.
In case you are not able to view the trace logs on Test Observability, you can enable it in any of the following three ways:
Set trace capability to on in the browserstack.yml file for each platform:
```yml
platforms:
- os: Windows
osVersion: 11
browserName: chrome
browserVersion: latest
playwrightConfigOptions:
use:
trace: 'on'
- os: OS X
osVersion: Ventura
browserName: playwright-webkit
browserVersion: latest
playwrightConfigOptions:
use:
trace: 'off'
```
