Playwright for Browser Rendering

Fork of Playwright that was modified to be compatible with Cloudflare Workers and Browser Rendering.

Getting Started

Create a Cloudflare Worker

npm create cloudflare@latest -- cf-playwright-worker

Installation

This package is released on npmjs.com at @cloudflare/playwright. To install it in your project:

npm i -s @cloudflare/playwright

Configuration

📄 Place this in wrangler.toml

compatibility_flags = [ "nodejs_compat" ]
browser = { binding = "MYBROWSER" }

Example

You can find a full running example here Cloudflare Playwright running example

Screenshot

import { launch } from '@cloudflare/playwright';

const todos = searchParams.getAll('todo');

const browser = await launch(env.MYBROWSER);
const page = await browser.newPage();

await page.goto('https://demo.playwright.dev/todomvc');

const TODO_ITEMS = todos.length > 0 ? todos : [
    'buy some cheese',
    'feed the cat',
    'book a doctors appointment'
];

const newTodo = page.getByPlaceholder('What needs to be done?');
for (const item of TODO_ITEMS) {
    await newTodo.fill(item);
    await newTodo.press('Enter');
}

const img = await page.screenshot();
    await browser.close();

    return new Response(img, {
        headers: {
            'Content-Type': 'image/png',
        },
    });

Trace

import { launch } from '@cloudflare/playwright';
import fs from "@cloudflare/playwright/fs";

const browser = await launch(env.MYBROWSER);
const page = await browser.newPage();

await page.context().tracing.start({ screenshots: true, snapshots: true });

// ... do something, screenshot for example

await page.context().tracing.stop({ path: 'trace.zip' });
await browser.close();
const file = await fs.promises.readFile('trace.zip');

return new Response(file, {
    status: 200,
    headers: {
        'Content-Type': 'application/zip',
    },
});

Assertions

import { launch } from '@cloudflare/playwright';
import { expect } from '@cloudflare/playwright/test';

const browser = await launch(env.MYBROWSER);
const page = await browser.newPage();

await page.goto('https://demo.playwright.dev/todomvc');

const TODO_ITEMS = todos.length > 0 ? todos : [
    'buy some cheese',
    'feed the cat',
    'book a doctors appointment'
];

const newTodo = page.getByPlaceholder('What needs to be done?');
for (const item of TODO_ITEMS) {
    await newTodo.fill(item);
    await newTodo.press('Enter');
}

await expect(page.getByTestId('todo-title')).toHaveCount(TODO_ITEMS.length);

await Promise.all(TODO_ITEMS.map(
    (value, index) => expect(page.getByTestId('todo-title').nth(index)).toHaveText(value)
));

Contribute

Build

To build Playwright for Cloudflare:

npm ci
cd packages/playwright-cloudflare
npm run build

Run

To run the TodoMVC example:

• launch it with wrangler:

cd packages/playwright-cloudflare/examples/todomvc
npm ci
npx wrangler dev --remote

• press b to open the browser

🚧 Currently Unsupported Features

The following capabilities are not yet fully supported, but we’re actively working on them.

• API Testing
• Playwright Test except Assertions
• Components
• Firefox, Android and Electron, as well as different versions of Chrome
• Network
• Videos

This is not an exhaustive list — expect rapid changes as we work toward broader parity with the original feature set. You can also check latest test results for a granular up to date list of the features that are fully supported