Run Playwright tests on Android devices using BrowserStack

Learn how to run your Playwright tests on Android devices with BrowserStack.

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.
NodeJS version 14 or higher is installed.
Playwright version 1.28 or higher.

Quickstart

To run your Playwright test suite with Android devices on BrowserStack, perform the following steps:

Step 1: Install the latest version of Playwright

Run the following command to install the latest Playwright version and the necessary dependencies:

Command Line

# The following command will install the latest version of Playwright 
npm i playwright

# Installing dependency is optional. However, the sample script uses this package.
npm i chai 

Step 2: Configure BrowserStack credentials

Set the environment variables BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY with your credentials as follows:

Command Line

export BROWSERSTACK_USERNAME="YOUR_USERNAME"
export BROWSERSTACK_ACCESS_KEY="YOUR_ACCESS_KEY"

Alternatively, your can add your credentials to the browserstack.username and browserstack.accessKey capabilities in the playwright-android.js file.

Step 3: Set devices and browsers

Add the required devices and browsers to your test script as shown in the following code example:

  const caps = {
    "osVersion": "12.0",
    "deviceName": "Samsung Galaxy S22", // "Samsung Galaxy S22 Ultra", "Google Pixel 7 Pro", "OnePlus 9", etc.
    "browserName": "chrome",
    "realMobile": "true",
    'name': 'My android playwright test',
    'build': 'playwright-build-1',
    'browserstack.playwrightLogs': 'true',
    'browserstack.console': 'verbose',
    'browserstack.username': process.env.BROWSERSTACK_USERNAME || 'YOUR_USERNAME',
    'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY || 'YOUR_ACCESS_KEY',
  };

Note: Check out the list of supported Android devices.

Save your test script as playwright-android.js, your finished test script will be as follows:

playwright-android.js

const { _android } = require('playwright');
const expect = require('chai').expect;

(async () => {
  const caps = {
    "osVersion": "12.0",
    "deviceName": "Samsung Galaxy S22", // "Samsung Galaxy S22 Ultra", "Google Pixel 7 Pro", "OnePlus 9", etc.
    "browserName": "chrome",
    "realMobile": "true",
    'name': 'My android playwright test',
    'build': 'playwright-build-1',
    'browserstack.playwrightLogs': 'true',
    'browserstack.console': 'verbose',
    'browserstack.username': process.env.BROWSERSTACK_USERNAME || 'YOUR_USERNAME',
    'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY || 'YOUR_ACCESS_KEY',
  };

  const device = await _android.connect(`wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify(caps))}`);

  console.log(device.model());
  console.log(device.serial());
  await device.shell('am force-stop com.android.chrome');
  const context = await device.launchBrowser();
  const page = await context.newPage();
  await page.goto('https://duckduckgo.com/')
  await page.click('#search_button_homepage');
  const title = await page.title();
  console.log(title);
  await page.screenshot({ path: 'image.png' });


  try {
    expect(title).to.equal("BrowserStack at DuckDuckGo", 'Expected title is incorrect!')
    // following line of code is responsible for marking the status of the test on BrowserStack as 'passed'. 
    await page.evaluate(_ => { }, `browserstack_executor: ${JSON.stringify({ action: 'setSessionStatus', arguments: { status: 'passed', reason: 'Title matched' } })}`);
  } catch {
    await page.evaluate(_ => { }, `browserstack_executor: ${JSON.stringify({ action: 'setSessionStatus', arguments: { status: 'failed', reason: 'Title did not match' } })}`);
  }
  await context.close();
  await device.close();
})();

The above script performs the following actions:

Starts the Chrome browser on an Android device
Opens the specified URL
Inputs the term BrowserStack
Marks the test as passed or failed based on the assertions

Step 4: Run your Playwright test

Use the following command to run your test on BrowserStack:

Command Line

node playwright-android.js

View test results

After the test has run, you can access the test results on the BrowserStack Automate dashboard.

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.

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!