Skip to content

Commit 5567ba7

Browse files
authored
Update playwright.mdx (#25328)
1 parent 91c3f2f commit 5567ba7

File tree

1 file changed

+38
-26
lines changed

1 file changed

+38
-26
lines changed

src/content/docs/browser-rendering/platform/playwright.mdx

Lines changed: 38 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ title: Playwright
44
description: Learn how to use Playwright with Cloudflare Workers for browser automation. Access Playwright API, manage sessions, and optimize browser rendering.
55
sidebar:
66
order: 5
7-
badge: Beta
87
---
98

109
import {
@@ -24,11 +23,17 @@ Our version is open sourced and can be found in [Cloudflare's fork of Playwright
2423
<PackageManagers pkg="@cloudflare/playwright" dev />
2524

2625
:::note
27-
The current version of the Playwright is **v1.54.0**.
26+
The current version of the Playwright is [**v1.55.0**](https://github.com/cloudflare/playwright/pull/67).
2827
:::
2928

3029
## Use Playwright in a Worker
3130

31+
In this [example](https://github.com/cloudflare/playwright/tree/main/packages/playwright-cloudflare/examples/todomvc), you will run Playwright tests in a Cloudflare Worker using the [todomvc](https://demo.playwright.dev/todomvc) application.
32+
33+
If you want to skip the steps and get started quickly, select **Deploy to Cloudflare** below.
34+
35+
[![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/cloudflare/playwright/tree/main/packages/playwright-cloudflare/examples/todomvc)
36+
3237
Make sure you have the [browser binding](/browser-rendering/platform/wrangler/#bindings) configured in your `wrangler.toml` file:
3338

3439
<WranglerConfig>
@@ -37,13 +42,10 @@ Make sure you have the [browser binding](/browser-rendering/platform/wrangler/#b
3742
name = "cloudflare-playwright-example"
3843
main = "src/index.ts"
3944
workers_dev = true
40-
compatibility_flags = ["nodejs_compat_v2"]
41-
compatibility_date = "2025-03-05"
45+
compatibility_flags = ["nodejs_compat"]
46+
compatibility_date = "2025-09-17"
4247
upload_source_maps = true
4348

44-
[dev]
45-
port = 9000
46-
4749
[browser]
4850
binding = "MYBROWSER"
4951
```
@@ -61,11 +63,7 @@ Let's look at some examples of how to use Playwright:
6163
Using browser automation to take screenshots of web pages is a common use case. This script tells the browser to navigate to https://demo.playwright.dev/todomvc, create some items, take a screenshot of the page, and return the image in the response.
6264

6365
```ts
64-
import { launch, type BrowserWorker } from "@cloudflare/playwright";
65-
66-
interface Env {
67-
MYBROWSER: BrowserWorker;
68-
}
66+
import { launch } from "@cloudflare/playwright";
6967

7068
export default {
7169
async fetch(request: Request, env: Env) {
@@ -105,12 +103,8 @@ A Playwright trace is a detailed log of your workflow execution that captures in
105103
Here's an example of a worker generating a trace file:
106104

107105
```ts
108-
import { launch, type BrowserWorker } from "@cloudflare/playwright";
109-
import fs from "@cloudflare/playwright/fs";
110-
111-
interface Env {
112-
MYBROWSER: BrowserWorker;
113-
}
106+
import fs from "fs";
107+
import { launch } from "@cloudflare/playwright";
114108

115109
export default {
116110
async fetch(request: Request, env: Env) {
@@ -154,13 +148,9 @@ export default {
154148
One of the most common use cases for using Playwright is software testing. Playwright includes test assertion features in its APIs; refer to [Assertions](https://playwright.dev/docs/test-assertions) in the Playwright documentation for details. Here's an example of a Worker doing `expect()` test assertions of the [todomvc](https://demo.playwright.dev/todomvc) demo page:
155149

156150
```ts
157-
import { launch, type BrowserWorker } from "@cloudflare/playwright";
151+
import { launch } from "@cloudflare/playwright";
158152
import { expect } from "@cloudflare/playwright/test";
159153

160-
interface Env {
161-
MYBROWSER: BrowserWorker;
162-
}
163-
164154
export default {
165155
async fetch(request: Request, env: Env) {
166156
const browser = await launch(env.MYBROWSER);
@@ -201,6 +191,30 @@ const browser = await playwright.launch(env.MYBROWSER, { keep_alive: 600000 });
201191

202192
Using the above, the browser will stay open for up to 10 minutes, even if inactive.
203193

194+
### Session Reuse
195+
196+
The best way to improve the performance of your browser rendering Worker is to reuse sessions by keeping the browser open after you've finished with it, and connecting to that session each time you have a new request. Playwright handles [`browser.close`](https://playwright.dev/docs/api/class-browser#browser-close) differently from Puppeteer. In Playwright, if the browser was obtained using a `connect` session, the session will disconnect. If the browser was obtained using a `launch` session, the session will close.
197+
198+
```js
199+
import { env } from "cloudflare:workers";
200+
import { acquire, connect } from "@cloudflare/playwright";
201+
202+
async function reuseSameSession() {
203+
// acquires a new session
204+
const { sessionId } = await acquire(env.BROWSER);
205+
206+
for (let i = 0; i < 5; i++) {
207+
// connects to the session that was previously acquired
208+
const browser = await connect(env.BROWSER, sessionId);
209+
210+
// ...
211+
212+
// this will disconnect the browser from the session, but the session will be kept alive
213+
await browser.close();
214+
}
215+
}
216+
```
217+
204218
### Set a custom user agent
205219

206220
To specify a custom user agent in Playwright, set it in the options when creating a new browser context with `browser.newContext()`. All pages subsequently created from this context will use the new user agent. This is useful if the target website serves different content based on the user agent.
@@ -294,13 +308,11 @@ You should also be able to access this information in the dashboard, albeit with
294308

295309
The full Playwright API can be found at the [Playwright API documentation](https://playwright.dev/docs/api/class-playwright).
296310

297-
Note that `@cloudflare/playwright` is in beta. The following capabilities are not yet fully supported, but we’re actively working on them:
311+
The following capabilities are not yet fully supported, but we’re actively working on them:
298312

299-
- [API Testing](https://playwright.dev/docs/api-testing)
300313
- [Playwright Test](https://playwright.dev/docs/test-configuration) except [Assertions](https://playwright.dev/docs/test-assertions)
301314
- [Components](https://playwright.dev/docs/test-components)
302315
- [Firefox](https://playwright.dev/docs/api/class-playwright#playwright-firefox), [Android](https://playwright.dev/docs/api/class-android) and [Electron](https://playwright.dev/docs/api/class-electron), as well as different versions of Chrome
303-
- [Network](https://playwright.dev/docs/next/network#network)
304316
- [Videos](https://playwright.dev/docs/next/videos)
305317

306318
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](https://playwright-full-test-report.pages.dev/) for a granular up to date list of the features that are fully supported.

0 commit comments

Comments
 (0)