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:
# 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:
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',
};
Save your test script as playwright-android.js
, your finished test script will be as follows:
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:
node playwright-android.js
View test results
After the test has run, you can access the test results on the BrowserStack Automate dashboard.
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!