Skip to main content
No Result Found

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:

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:

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-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.

Command Line
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.

Command Line
//sample respone
{
  "media_url": "media://90c7a8h8dc82308108734e9a46c24d8f01de12881"
}

Update the extensions in your script

Update the extensions obtained in Step 2 in your script.

playwright-test.js
const caps = {
  //update the extensions url
  "browserstack.extensions": [
    "<extensions-url>",
  ]},

Run your tests

Save the final script as playwright-test.js:

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:

Command Line
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





Thank you for your valuable feedback

Is this page helping you?

Yes
No

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!

Talk to an Expert
Download Copy Check Circle