Playwright for Browser Rendering


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

🏷️ Upstream Playwright version: 1.57.0

Getting Started

Create a Cloudflare Worker

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

Installation

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

`Shell
npm i -s @cloudflare/playwright
`

Configuration

📄 Place this in wrangler.toml

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

Example

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

$3

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

export default {
async fetch(request, env): Promise {
const browser = await launch(env.MYBROWSER);
const page = await browser.newPage();

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

const TODO_ITEMS = [
'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',
},
});
}
} satisfies ExportedHandler;
`

$3

`js
import fs from "fs";

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

export default {
async fetch(request, env): Promise {
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

// For now, fs only supports writing into /tmp
await page.context().tracing.stop({ path: "/tmp/trace.zip" });
await browser.close();
const file = await fs.promises.readFile("/tmp/trace.zip");

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

$3

`js
import { launch } from "@cloudflare/playwright";
import { expect } from "@cloudflare/playwright/test";

export default {
async fetch(request, env): Promise {
const browser = await launch(env.MYBROWSER);
const page = await browser.newPage();

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

const TODO_ITEMS = [
"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)
)
);
}
} satisfies ExportedHandler;
`

Contribute

Build

To build Playwright for Cloudflare:

`sh
npm ci
git submodule update --init
cd packages/playwright-cloudflare
npm run build
`

Run

To run the TodoMVC example:

- launch it with wrangler:

`sh
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 fully supported, but we’re actively working on them.

- Playwright Test except Assertions
- Components
- Firefox, Android and Electron, as well as different versions of Chrome
- 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