Playwright Advanced Topics

{
  "manifest_version": 3,
  "name": "Bookshelf Banner",
  "version": "1.0.0",
  "description": "Adds a banner to Bookshelf pages.",
  "background": { "service_worker": "background.js" },
  "content_scripts": [
    {
      "matches": ["http://localhost/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ],
  "action": { "default_popup": "popup.html" },
  "permissions": ["storage"]
}

// content.js
const banner = document.createElement('div');
banner.setAttribute('data-testid', 'ext-banner');
banner.textContent = 'Extension active';
banner.style.cssText = 'position:fixed;bottom:0;left:0;right:0;padding:4px;background:#fde68a;color:#000;text-align:center;z-index:99999';
document.body.appendChild(banner);
chrome.runtime.sendMessage({ type: 'banner-shown', url: location.href });

// background.js (the service worker)
let shown = 0;

chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
  if (message.type === 'banner-shown') {
    shown += 1;
    sendResponse({ ok: true });
  }
  if (message.type === 'count')
    sendResponse({ shown });
});

globalThis.getShownCount = () => shown;

import { test as base, chromium, type BrowserContext } from '@playwright/test';
import path from 'path';

export const test = base.extend<{
  context: BrowserContext;
  extensionId: string;
}>({
  context: async ({}, use) => {
    const pathToExtension = path.join(__dirname, 'ext');
    const context = await chromium.launchPersistentContext('', {
      channel: 'chromium',
      args: [
        `--disable-extensions-except=${pathToExtension}`,
        `--load-extension=${pathToExtension}`,
      ],
    });
    await use(context);
    await context.close();
  },
  extensionId: async ({ context }, use) => {
    let [serviceWorker] = context.serviceWorkers();
    if (!serviceWorker)
      serviceWorker = await context.waitForEvent('serviceworker');
    await use(serviceWorker.url().split('/')[2]);
  },
});

export const expect = test.expect;

import { test, expect } from './fixtures';

test('the content script adds a banner to Bookshelf', async ({ page }) => {
  await page.goto('/books');
  await expect(page.getByTestId('ext-banner')).toHaveText('Extension active');
});

test('the popup page is served from chrome-extension://', async ({ page, extensionId }) => {
  await page.goto(`chrome-extension://${extensionId}/popup.html`);
  await expect(page.locator('#status')).toHaveText('Bookshelf Banner popup');
});

test('the service worker counts the banners it was told about', async ({ context, page }) => {
  const [worker] = context.serviceWorkers();
  expect(worker.url()).toMatch(/^chrome-extension:\/\/[a-p]{32}\/background\.js$/);

  await page.goto('/books');
  await expect(page.getByTestId('ext-banner')).toBeVisible();

  const manifestName = await worker.evaluate(() => chrome.runtime.getManifest().name);
  expect(manifestName).toBe('Bookshelf Banner');

  await expect.poll(() => worker.evaluate(() => (globalThis as any).getShownCount())).toBeGreaterThan(0);
});

import { chromium } from '@playwright/test';
import path from 'path';

const ext = path.join(import.meta.dirname, 'ext');
for (const channel of [undefined, 'chromium']) {
  const context = await chromium.launchPersistentContext('', {
    channel,
    args: [`--disable-extensions-except=${ext}`, `--load-extension=${ext}`],
  });
  const page = await context.newPage();
  await page.goto(process.env.BASE_URL + '/books');
  await page.waitForTimeout(1500);
  console.log(`channel=${channel ?? 'default (headless shell)'}: serviceWorkers=${context.serviceWorkers().length}, banner=${await page.getByTestId('ext-banner').count()}`);
  await context.close();
}

channel=default (headless shell): serviceWorkers=0, banner=0
channel=chromium: serviceWorkers=1, banner=1

const { app, BrowserWindow } = require('electron');

app.whenReady().then(() => {
  const win = new BrowserWindow({ width: 1100, height: 800, show: false });
  win.loadURL((process.env.BASE_URL ?? 'http://localhost:3000') + '/books');
});

// Quit when the last window closes, also on macOS.
app.on('window-all-closed', () => app.quit());

import { _electron as electron } from 'playwright-core';
import { strict as assert } from 'node:assert';

const app = await electron.launch({
  args: ['main.js'],
  env: { ...process.env, BASE_URL: process.env.BASE_URL },
});

// Runs in the Electron main process.
const version = await app.evaluate(({ app }) => app.getVersion());
console.log('app version from main process:', version);
console.log('electron version:', await app.evaluate(() => process.versions.electron));

const window = await app.firstWindow();
await window.waitForLoadState('domcontentloaded');
console.log('title:', await window.title());

// Same Page API as in the browser.
await window.getByTestId('search-input').fill('quiet');
await window.getByRole('button', { name: 'Search' }).click();
const cards = window.getByTestId('book-card');
await cards.first().waitFor();
assert.equal(await cards.count(), 1);
console.log('heading:', await window.getByRole('heading', { name: 'The Quiet Compiler' }).textContent());

// Stub a native dialog in the main process.
await app.evaluate(({ dialog }) => {
  dialog.showOpenDialog = () => Promise.resolve({ canceled: false, filePaths: ['/tmp/x.txt'] });
});
const result = await app.evaluate(({ dialog }) => dialog.showOpenDialog({}));
console.log('stubbed dialog result:', JSON.stringify(result));

await window.screenshot({ path: 'electron.png' });
await app.close();
console.log('closed');

app version from main process: 45.0.0
electron version: 45.0.0
title: Catalogue - Bookshelf
heading: The Quiet Compiler
stubbed dialog result: {"canceled":false,"filePaths":["/tmp/x.txt"]}
closed

services:
  selenium-hub:
    image: selenium/hub:4.51.0
    ports: ["4442:4442", "4443:4443", "4444:4444"]
  chrome:
    image: selenium/node-chrome:4.51.0
    shm_size: 2gb
    depends_on: [selenium-hub]
    environment:
      - SE_EVENT_BUS_HOST=selenium-hub
      - SE_EVENT_BUS_PUBLISH_PORT=4442
      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443
      - SE_NODE_MAX_SESSIONS=2
      # Playwright connects to the CDP endpoint the grid advertises,
      # so the node must report an address that is reachable from the test runner.
      - SE_NODE_GRID_URL=http://localhost:4444

<selenium> retrieved endpoint ws://172.18.0.3:4444/session/<id>/se/cdp for sessionId=<id>
<ws error> ws://172.18.0.3:4444/session/<id>/se/cdp error connect ETIMEDOUT 172.18.0.3:4444
Error: browserType.launch: WebSocket error: connect ETIMEDOUT 172.18.0.3:4444

import { defineConfig } from '@playwright/test';

// No device descriptor: the browser keeps its own user agent, so the test can see where it runs.
export default defineConfig({
  testDir: '.',
  testMatch: 'grid.spec.ts',
  workers: 1,
  outputDir: './test-results-grid',
  use: {
    baseURL: process.env.BASE_URL,
    testIdAttribute: 'data-testid',
  },
  projects: [{ name: 'chromium' }],
});

import { test, expect } from '@playwright/test';

test('the browser runs on the Selenium Grid node', async ({ page, browser }) => {
  await page.goto('/books');
  await expect(page.getByTestId('book-card')).toHaveCount(6);

  console.log('browser version:', browser.version());
  console.log('user agent:', await page.evaluate(() => navigator.userAgent));

  // The node is a Linux container; the test runner is not.
  if (process.env.SELENIUM_REMOTE_URL)
    expect(await page.evaluate(() => navigator.userAgent)).toContain('Linux');
});

# on the grid
SELENIUM_REMOTE_URL=http://localhost:4444 BASE_URL=http://host.docker.internal:3921 npx playwright test -c playwright.grid.config.ts
# locally
BASE_URL=http://localhost:3921 npx playwright test -c playwright.grid.config.ts

browser version: 155.0.8059.79
user agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/155.0.0.0 Safari/537.36
  ✓  1 [chromium] › grid.spec.ts:3:5 › the browser runs on the Selenium Grid node (173ms)

browser version: 156.0.8078.4
user agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36
  ✓  1 [chromium] › grid.spec.ts:3:5 › the browser runs on the Selenium Grid node (95ms)

import { test, expect, chromium } from '@playwright/test';

test('browser.bind() exposes a launched browser to other clients over a web socket', async () => {
  const browser = await chromium.launch();
  const { endpoint } = await browser.bind('bookshelf-session', { host: 'localhost', port: 0 });
  expect(endpoint).toMatch(/^ws:\/\//);

  // A second, independent client connects to the same browser.
  const client = await chromium.connect(endpoint);
  const context = await client.newContext();
  const page = await context.newPage();
  await page.goto(process.env.BASE_URL + '/books');
  await expect(page.getByTestId('book-card')).toHaveCount(6);

  // The first client sees the context created by the second.
  expect(browser.contexts().length).toBe(1);

  await client.close();
  await browser.unbind();
  await browser.close();
});

const browser = await chromium.launch();
const a = await browser.bind('bookshelf-pipe', { workspaceDir: process.cwd(), metadata: { owner: 'docs' } });
console.log('pipe endpoint:', a.endpoint);
await browser.unbind();
const b = await browser.bind('bookshelf-ws', { host: 'localhost', port: 0 });
console.log('ws endpoint:', b.endpoint);
await browser.close();

pipe endpoint: /var/folders/.../T/pw-8721d46c/browser/browser-606e3c.sock
ws endpoint: ws://[::1]:64773/8a4500c5174aae238e14efe27a013d28

import { test, expect, chromium } from '@playwright/test';

test('launchServer + connect', async () => {
  const server = await chromium.launchServer({ host: 'localhost' });
  const browser = await chromium.connect(server.wsEndpoint());
  const page = await browser.newPage();
  await page.goto(process.env.BASE_URL + '/books');
  await expect(page).toHaveTitle(/Catalogue/);
  await browser.close();
  await server.close();
});

test('connectOverCDP to a browser started with --remote-debugging-port', async () => {
  const server = await chromium.launchServer({ args: ['--remote-debugging-port=9333'] });
  const browser = await chromium.connectOverCDP('http://localhost:9333');
  const context = browser.contexts()[0];
  const page = await context.newPage();
  await page.goto(process.env.BASE_URL + '/books');
  await expect(page.getByTestId('book-card')).toHaveCount(6);
  await browser.close();
  await server.close();
});

import { test, expect } from '@playwright/test';
import fs from 'fs';

test('screencast records a video with action annotations and chapters', async ({ page }, testInfo) => {
  const video = testInfo.outputPath('walkthrough.webm');
  await page.goto('/books');

  await page.screencast.start({ path: video, size: { width: 1280, height: 720 }, fps: 25 });
  const actions = await page.screencast.showActions({ position: 'top-left', cursor: 'pointer' });

  await page.screencast.showChapter('Search the catalogue', {
    description: 'Looking for The Quiet Compiler',
    duration: 800,
  });
  const badge = await page.screencast.showOverlay('<div style="position:fixed;top:8px;right:8px;background:#b91c1c;color:#fff;padding:4px 8px">REC</div>');

  await page.getByTestId('search-input').fill('quiet');
  await page.getByRole('button', { name: 'Search' }).click();
  await expect(page.getByTestId('book-card')).toHaveCount(1);

  await badge.dispose();   // remove the overlay
  await actions.dispose(); // stop annotating actions
  await page.screencast.stop();

  expect(fs.statSync(video).size).toBeGreaterThan(1000);
  console.log('video bytes:', fs.statSync(video).size);
});

test('screencast delivers JPEG frames to a callback', async ({ page }) => {
  const frames: { bytes: number; w: number; h: number; ts: number }[] = [];
  await page.goto('/books');

  await page.screencast.start({
    size: { width: 640, height: 480 },
    quality: 60,
    onFrame: ({ data, timestamp, viewportWidth, viewportHeight }) => {
      frames.push({ bytes: data.length, w: viewportWidth, h: viewportHeight, ts: timestamp });
      // JPEG files start with the bytes FF D8
      expect(data[0]).toBe(0xff);
      expect(data[1]).toBe(0xd8);
    },
  });
  await page.getByTestId('search-input').fill('quiet');
  await page.getByRole('button', { name: 'Search' }).click();
  await expect(page.getByTestId('book-card')).toHaveCount(1);
  await page.screencast.stop();

  console.log('frames:', frames.length, 'first:', JSON.stringify(frames[0]));
  expect(frames.length).toBeGreaterThan(0);
});

frames: 5 first: {"bytes":10103,"w":1280,"h":720,"ts":1792958167921.269}