Run Playwright tests on Android devices
Learn how to run your Playwright tests on Android devices with BrowserStack Automate.
Prerequisites
Playwright for Android is currently supported only for NodeJS.
Quickstart
To run your Playwright test suite with Android devices on BrowserStack, perform the following steps:
Refer to the steps provided in the run your first test page.
In Step 3, while configuring your browserstack.yml file, use the deviceName parameter and specify the devices parameters as shown below:
```yml
userName: YOUR_USERNAME
accessKey: YOUR_ACCESS_KEY
platforms:
- deviceName: Samsung Galaxy S23 Ultra
browserName: chrome
osVersion: 13.0
- os: Windows
osVersion: 11
browserName: chrome
browserVersion: latest
- os: OS X
osVersion: Ventura
browserName: playwright-webkit
browserVersion: latest
```
userName: YOUR_USERNAME
accessKey: YOUR_ACCESS_KEY
platforms:
- deviceName: Samsung Galaxy S23 Ultra
browserName: chrome
osVersion: 13.0
- os: Windows
osVersion: 11
browserName: chrome
browserVersion: latest
- os: OS X
osVersion: Ventura
browserName: playwright-webkit
browserVersion: latest
Select over 100+ browsers-OS combinations from the list of supported device and OS.
Clone sample repository
Clone our sample Git repository using the following commands:
```bash
git clone -b playwright-legacy https://github.com/browserstack/node-js-playwright-browserstack.git
cd node-js-playwright-browserstack
```
Copy
git clone -b playwright-legacy https://github.com/browserstack/node-js-playwright-browserstack.git
cd node-js-playwright-browserstack
Install dependencies
Install the required dependencies by running the following command:
Set access credentials
Set the environment variables BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY with your credentials as follows:
```bash
export BROWSERSTACK_USERNAME="YOUR_USERNAME"
export BROWSERSTACK_ACCESS_KEY="YOUR_ACCESS_KEY"
```
Copy
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 fixtures.js file.
Execute build on BrowserStack
You are now ready to run your build on BrowserStack. From the root directory of the project, run the following command:
Understanding the test configurations
Set Browser-OS combination
You can set the Android Browser-OS combination in the playwright.config.js as shown:
```javascript
projects: [
{
name: "chrome@Samsung Galaxy S22:13@browserstack-mobile",
use: {
baseURL: "https://www.bstackdemo.com/",
browserName: "chromium",
channel: "chrome",
},
},
],
```
Copy
projects: [
{
name: "chrome@Samsung Galaxy S22:13@browserstack-mobile",
use: {
baseURL: "https://www.bstackdemo.com/",
browserName: "chromium",
channel: "chrome",
},
},
],
Patching the capabilities dynamically
The patchMobileCaps function within the fixture.js file facilitates dynamic patching of the capabilities according to the project name.
```javascript
const patchMobileCaps = (name, title) => {
let combination = name.split(/@browserstack/)[0];
let [browerCaps, osCaps] = combination.split(/:/);
let [browser, deviceName] = browerCaps.split(/@/);
let osCapsSplit = osCaps.split(/ /);
let os = osCapsSplit.shift();
let osVersion = osCapsSplit.join(" ");
caps.browser = browser ? browser : "chrome";
caps.deviceName = deviceName ? deviceName : "Samsung Galaxy S22 Ultra";
caps.osVersion = osVersion ? osVersion : "12.0";
caps.name = title;
caps.realMobile = "true";
};
```
Copy
const patchMobileCaps = (name, title) => {
let combination = name.split(/@browserstack/)[0];
let [browerCaps, osCaps] = combination.split(/:/);
let [browser, deviceName] = browerCaps.split(/@/);
let osCapsSplit = osCaps.split(/ /);
let os = osCapsSplit.shift();
let osVersion = osCapsSplit.join(" ");
caps.browser = browser ? browser : "chrome";
caps.deviceName = deviceName ? deviceName : "Samsung Galaxy S22 Ultra";
caps.osVersion = osVersion ? osVersion : "12.0";
caps.name = title;
caps.realMobile = "true";
};
Is this page helping you?
Thank you for your valuable feedback!
