[Feature]: Adding test recording for web extension

[mhabsaoui]

🚀 Feature Request

To be able to launch a Playwright Test Record with a web extension's Options page URL (like chrome-extension://efloofkjifapnmlhlahjefjhibkpecdh/options.html) in the browser and start playing usage scenarios.

Example

For instance we start a test recording for a web extension project from IDE (VSCode Playwright Testing plugin).

In the opened browser window we should be able to go to the web extension URL (set in fixtures.ts) and start playing the E2E tests scenarios.

import { BrowserContext, Page } from "@playwright/test";

export async function openOptions(
  context: BrowserContext,
  page: Page,
  extensionId: string
) {
  await page.goto(`chrome-extension://${extensionId}/options.html`);
  return page;
}

But web add-ons special URLs are blocked (by Browser security / Playwright context ?) :

Motivation

It Would be very useful to be able to also test record pages from Web Extension, like we already do for web pages 👍

[mxschmitt]

I tried the following inside our tests and it works for me in Chrome and Edge:

    const context = await launchPersistentContext(extensionPath);
    const serviceWorkers = context.serviceWorkers();
    const serviceWorker = serviceWorkers.length ? serviceWorkers[0] : await context.waitForEvent('serviceworker');
    
    // Interesting part:
    const extensionURL = new URL(serviceWorker.url());
    extensionURL.pathname = '/popup.html';
    const popupPage = await context.newPage();
    await popupPage.goto(extensionURL.toString());
    await popupPage.pause();

Making record possible inside VSCode is not planned for now - via page.pause() it should already work. Have you tried that?