Playwright Automation Tests Integration with Browserstack
In this blogpost, we will discuss how to run the playwright automation tests on BrowserStack platform.
First of all, Sign up with BrowserStack Signup
Now, once you sign up, login to your BrowserStack account.
For test code reference, Please see the GitHub Repo: Playwright-SauceDemo-BrowserStack
Open this repo mentioned above in your VS code and Now, go to the 'browserstack.config.js' file and the file looks like this
import { execSync } from "child_process";
const clientPlaywrightVersion = execSync("npx playwright --version")
.toString()
.trim()
.split(" ")[1];
const caps = {
browser: "chrome",
os: "osx",
os_version: "catalina",
name: "My first playwright test",
build: "playwright-build-009",
"browserstack.username": "jaykishore_kjTNiL",
"browserstack.accessKey": "9AnpwFRARxnsncYJzpq4",
"browserstack.local": false,
"client.playwrightVersion": clientPlaywrightVersion,
};
const patchCaps = (name, title) => {
let combination = name.split(/@browserstack/)[0];
let [browerCaps, osCaps] = combination.split(/:/);
let [browser, browser_version] = browerCaps.split(/@/);
let osCapsSplit = osCaps.split(/ /);
let os = osCapsSplit.shift();
let os_version = osCapsSplit.join(" ");
caps.browser = browser ? browser : "chrome";
caps.browser_version = browser_version ? browser_version : "latest";
caps.os = os ? os : "osx";
caps.os_version = os_version ? os_version : "catalina";
caps.name = title;
};
export function getCdpEndpoint(name, title) {
patchCaps(name, title);
const wsEndpoint = `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(
JSON.stringify(caps)
)}`;
console.log(`--> ${wsEndpoint}`);
return wsEndpoint;
}
Now, go to the 'playwright.config.js' file and the file looks like this
import { defineConfig } from "@playwright/test";
import { getCdpEndpoint } from "./browserstack.config.js";
export default defineConfig({
testDir: "./tests",
testMatch: "**/*.test.js",
reporter: [["list"], ["./CustomReporter"]],
timeout: 60000,
use: {
viewport: null,
},
projects: [
{
name: "chrome@latest:Windows 10",
use: {
browserName: "chromium",
channel: "chrome",
connectOptions: {
wsEndpoint: getCdpEndpoint("chrome@latest:Windows 10", "test1"),
},
},
},
{
name: "chrome@latest:Windows 11",
use: {
browserName: "chromium",
channel: "chrome",
connectOptions: {
wsEndpoint: getCdpEndpoint("chrome@latest:Windows 11", "test2"),
},
},
},
{
name: "chrome@latest-beta:OSX Big Sur",
use: {
browserName: "chromium",
channel: "chrome",
connectOptions: {
wsEndpoint: getCdpEndpoint("chrome@latest-beta:OSX Big Sur", "test3"),
},
},
},
{
name: "edge@90:Windows 10",
use: {
browserName: "chromium",
connectOptions: {
wsEndpoint: getCdpEndpoint("edge@90:Windows 10", "test4"),
},
},
},
{
name: "playwright-firefox@latest:OSX Catalina",
use: {
browserName: "firefox",
connectOptions: {
wsEndpoint: getCdpEndpoint(
"playwright-firefox@latest:OSX Catalina",
"test5"
),
},
},
},
{
name: "playwright-webkit@latest:OSX Big Sur",
use: {
browserName: "webkit",
connectOptions: {
wsEndpoint: getCdpEndpoint(
"playwright-webkit@latest:OSX Big Sur",
"test6"
),
},
},
},
{
name: "playwright-webkit@latest:OSX Ventura",
use: {
browserName: "webkit",
connectOptions: {
wsEndpoint: getCdpEndpoint(
"playwright-webkit@latest:OSX Ventura",
"test7"
),
},
},
},
{
name: "playwright-firefox:Windows 11",
use: {
browserName: "firefox",
connectOptions: {
wsEndpoint: getCdpEndpoint("playwright-firefox:Windows 11", "test8"),
},
},
},
],
});
Now, Go to your 'package.json' file and it looks like this below
{
"name": "playwright-test-automation",
"version": "1.0.0",
"description": "Playwright Test Runner with JavaScript",
"main": "index.js",
"scripts": {
"test": "npx playwright test",
"test:smoke": "npx playwright test --grep @smoke --project='chrome@latest:Windows 10'",
"test:browserstack": "npx playwright test --grep @smoke",
"test:serial": "npx playwright test --workers=1 --project=Chrome",
"test:one": "npx playwright test tests/TC_01_productPage.test.js",
"test:firefox": "npx playwright test --project=Firefox",
"test:safari": "npx playwright test TC_05_checkoutWithPGUandSU.test.js --project=Safari",
"test:edge": "npx playwright test --project=Edge",
"test:chrome-report": "npx playwright test --project=Chrome --reporter=html && npx playwright show-report",
"test:firefox-report": "npx playwright test --project=Firefox --reporter=line,allure-playwright",
"test:edge-report": "npx playwright test --project=Edge --reporter=html && npx playwright show-report",
"test:safari-report": "npx playwright test --project=Safari --reporter=line,allure-playwright",
"test:shard": "npx playwright test TC_01_productPage.test.js --shard=3/3 --project=Chrome",
"test:two": "npx playwright test TC_02_checkoutWorkflow.test.js --project=Chrome",
"test:three": "npx playwright test TC_03_checkoutWithSUandPGU.test.js --project=Chrome",
"test:four": "npx playwright test TC_04_checkoutWithPUandPGU.test.js --project=Chrome",
"test:five": "npx playwright test TC_05_checkoutWithPGUandSU.test.js --project=Chrome",
"test:record": "npx playwright codegen",
"html-report": "npx playwright test --reporter=html && npx playwright show-report",
"show-trace": "npx playwright show-trace",
"allure:clean": "rm -rf allure-results",
"allure-generate": "allure generate ./allure-results --clean",
"allure:report": "npm run allure-generate && allure serve",
"postinstall": "npm update browserstack-node-sdk"
},
"keywords": [
"Plawright",
"BrowserStack",
"Test Automation",
"JavaScript"
],
"author": "Jay Kishore Duvvuri",
"license": "ISC",
"dependencies": {
"@playwright/test": "^1.49.1",
"browserstack-local": "^1.5.3",
"fs": "^0.0.1-security",
"prettier": "^2.6.2"
},
"devDependencies": {
"browserstack-node-sdk": "^1.23.2"
}
}
This is the one we execute soon
"test:browserstack": "npx playwright test --grep @smoke",
All good to go! The set up is completed!
Now on your terminal run the test : npm run test:browserstack
Go to your BrowserStack account, the test will be running and completed...!
Click on the session name as shown below
Once the test is completed your VS Code console looks like this
Run all the tests now on your terminal: npm run test
Go to your BrowserStack account
Your VS Code console looks like this
A sample Test output on BrowserStack:
Here is the BrowserStack public link, just in case
Test-Run-1
Test-Run-2
Happy Automation testing Guys :)!
No comments:
Post a Comment