CF-Incidents Browser Run - Playwright for Browser Rendering now available

[ENF News Bot]

We're excited to share that you can now use Playwright's browser automation capabilities ↗︎ from Cloudflare Workers.

Playwright ↗︎ is an open-source package developed by Microsoft that can do browser automation tasks; it's commonly used to write software tests, debug applications, create screenshots, and crawl pages. Like Puppeteer, we forked ↗︎ Playwright and modified it to be compatible with Cloudflare Workers and Browser Rendering.

Below is an example of how to use Playwright with Browser Rendering to test a TODO application using assertions:

Assertion examplets

import { launch, type BrowserWorker } from "@cloudflare/playwright";
import { expect } from "@cloudflare/playwright/test";

interface Env {
	MYBROWSER: BrowserWorker;
}

export default {
	async fetch(request: Request, env: Env) {
		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),
			),
		);
	},
};

Playwright is available as an npm package at @cloudflare/playwright ↗︎ and the code is at GitHub ↗︎.

Learn more in our documentation.

Continue reading...