Run your first Playwright test on BrowserStack

Learn how to run your first Playwright tests across 100+ browser-OS combinations.

Introduction

Playwright allows you to perform end-to-end testing across all browsers. It is equipped with multiple features, such as resiliency, auto-wait, capturing test trace, and so on, that are supported with BrowserStack.

In this guide, you will learn about:

Prerequisites
Running your first test
Understanding your first test

Prerequisites

BrowserStack Username and Access key, which you can find in your account settings. If you have not created an account yet, you can sign up for a Free Trial or purchase a plan.
PIP is installed.

Note: To run your Python test with pytest and robot, check out our pytest repository and robot repository.

Run your first test

To run your first Playwright test on BrowserStack, complete the following steps:

Step 1: Clone the playwright-browserstack sample repo on GitHub using the following command in your terminal:

git clone https://github.com/browserstack/playwright-browserstack.git
cd playwright-browserstack/playwright-python/

Step 2: Install dependencies using the following command in your terminal:

pip install --upgrade pip 
pip install playwright
playwright install

Step 3: Set your BrowserStack credentials in the script as follows:

Navigate to the playwright-test.py file in the playwright-browserstack/playwright-python directory and set your BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY

desired_cap = {
  'browserstack.username': 'BROWSERSTACK_USERNAME',
  'browserstack.accessKey': 'BROWSERSTACK_ACCESS_KEY'
}

Alternatively, you can set the environment variables in your system as follows:

MacOS or Linux
Windows

# Set these values in your ~/.zprofile (zsh) or ~/.profile (bash)
  export BROWSERSTACK_USERNAME="YOUR_USERNAME"
  export BROWSERSTACK_ACCESS_KEY="YOUR_ACCESS_KEY"

# setx.exe does not set the environment variable in the current command prompt, but it will be available in subsequent command prompts
  setx BROWSERSTACK_USERNAME="YOUR_USERNAME"
  setx BROWSERSTACK_ACCESS_KEY="YOUR_ACCESS_KEY"

# Verify whether the variables have been set
echo BROWSERSTACK_USERNAME
echo BROWSERSTACK_ACCESS_KEY

Step 4: Run your first test using the following command in your terminal:

python single-playwright-test.py

Step 5: View your tests on BrowserStack on the BrowserStack Automate dashboard. Check out viewing test results to learn more about the dashboard.

Automate Dashboard

Understand the details of your test

When you run your test command, the test script:

Starts the latest version of the Chrome browser
Opens the Google search home page
Performs a search for the term “BrowserStack”
Marks the test as passed or failed based on the assertions

When you run the test command, tests present in the playwright-test.py file are executed

# playwright-test.py

import json
import urllib
import subprocess
from playwright.sync_api import sync_playwright

desired_cap = {
  'browser': 'chrome',  # allowed browsers are `chrome`, `edge`, `playwright-chromium`, `playwright-firefox` and `playwright-webkit`
  'browser_version': 'latest', # this capability is valid only for branded `chrome` and `edge` browsers and you can specify any browser version like `latest`, `latest-beta`, `latest-1` and so on.
  'os': 'osx',
  'os_version': 'catalina',
  'name': 'Branded Google Chrome on Catalina',
  'build': 'playwright-python-1',
  'browserstack.username': 'BROWSERSTACK_USERNAME',
  'browserstack.accessKey': 'BROWSERSTACK_ACCESS_KEY'
}

def run_session(playwright):
  clientPlaywrightVersion = str(subprocess.getoutput('playwright --version')).strip().split(" ")[1]
  desired_cap['client.playwrightVersion'] = clientPlaywrightVersion

  cdpUrl = 'wss://cdp.browserstack.com/playwright?caps=' + urllib.parse.quote(json.dumps(desired_cap))
  browser = playwright.chromium.connect(cdpUrl)
  page = browser.new_page()
  try:
    page.goto("https://www.google.co.in/")
    page.fill("[aria-label='Search']", 'Browserstack')
    locator = page.locator("[aria-label='Google Search'] >> nth=0")
    locator.click()
    title = page.title()

    if title == "Browserstack - Google Search":
      # following line of code is responsible for marking the status of the test on BrowserStack as 'passed'. You can use this code in your after hook after each test
      mark_test_status("passed", "Title matched", page)
    else:
      mark_test_status("failed", "Title did not match", page)
  except Exception as err:
      mark_test_status("failed", str(err), page)

  browser.close()

def mark_test_status(status, reason, page):
  page.evaluate("_ => {}", "browserstack_executor: {\"action\": \"setSessionStatus\", \"arguments\": {\"status\":\""+ status + "\", \"reason\": \"" + reason + "\"}}");

with sync_playwright() as playwright:
  run_session(playwright)

Note: 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.

Next Steps

Did this page help you?

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

This page has exactly what I am looking for
This content & code samples are accurate and up-to-date
The content on this page is easy to understand
Other (please tell us more below)

Any additional feedback?

Thank you for your valuable feedback

Is this page helping you?

Yes

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

This page has exactly what I am looking for
This content & code samples are accurate and up-to-date
The content on this page is easy to understand
Other (please tell us more below)

Any additional feedback?

Thank you for your valuable feedback!