Test Chrome extensions using Playwright
Learn how to test Chrome extensions on Playwright tests in BrowserStack Automate TurboScale
Learn how to effortlessly test your Chrome extensions using Playwright on Automate TurboScale. This guide walks you through uploading your extension, configuring your tests, and analyzing the results.
Prerequisites
Before you begin, make sure you have the following:
- 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.
- Latest Playwright version is installed.
- NodeJS version 14 or later is installed.
Test Chrome extensions
To test Chrome extension on Automate TurboScale, complete the following steps:
Set BrowserStack credentials
First, you need to 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-test.js
file.
Upload Chrome extension
Before you start the test execution, upload the extension (in .zip
format) using REST API. The REST API returns a response media_url
for successful upload.
curl -u "username:accesskey" -X POST "https://hub-cloud.browserstack-ats.com/automate-turboscale/upload-extensions" -F "file=@/path/to/file"
A Unique identifier value is returned upon successful upload of your file on BrowserStack. This value is used to specify the files to be used in your tests.
//sample respone
{
"media_url": "media://90c7a8h8dc82308108734e9a46c24d8f01de12881"
}
Update the extensions
in your script
Update the extensions
obtained in Step 2 in your script.
const caps = {
//update the extensions url
"browserstack.extensions": [
"<extensions-url>",
]},
Run your tests
Save the final script as playwright-test.js
:
'use strict';
const { chromium, firefox, webkit } = require('playwright');
const fs = require('fs')
const { promisify } = require('util');
const sleep = promisify(setTimeout);
const run = async (browser_name, os_name, os_version_name) => {
const tag = `Chrome Extension Testing`
const caps = {
build: `${tag}`,
name: `[${os_version_name}] ${browser_name}`, // test name
browser: browser_name,
os: os_name,
osVersion: os_version_name,
'browserstack.username': process.env.BROWSERSTACK_USERNAME || 'YOUR_USERNAME',
'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY || 'YOUR_ACCESS_KEY',
'browserstack.networkLogs': true,
};
// For loading the extension
const browser = await chromium.connectOverCDP(`wss://hub-cloud.browserstack-ats.com/playwright?caps=${encodeURIComponent(JSON.stringify(caps))}`);
const context = await browser.contexts()[0];
const page = await context.newPage();
// Actual tests start here
await page.goto('https://en.wikipedia.org/wiki/Apple');
const imageActual = page.locator('a > img[alt="Malus domestica a1.jpg"]');
await imageActual.waitFor({ state: "visible" })
await imageActual.hover();
await sleep(2 * 1000);
const imageActual2 = page.locator('div > img');
await imageActual2.waitFor({ state: "visible" })
await page.close();
await context.close();
await browser.close();
};
Promise.all([
run('chrome', 'windows' ),
]).then(responses => {
for (const response of responses) {
console.log(response);
}
}).catch(error => {
console.error(`Failed to fetch: ${error}`)
});
From the root directory, run the following command:
node playwright-test.js
View test results
After your tests have run, log in to your Automate TurboScale dashboard.
To learn more about the dashboard, check the view test results document.
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!