Skip to content
Cloudflare Docs

Changelog

New updates and improvements at Cloudflare.

Subscribe to RSS
View all RSS feeds

hero image
← Back to all posts

Playwright for Browser Rendering now available

Browser Rendering

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 example
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.