From f8592c09dd797153693a72bd3a47eaa44324e637 Mon Sep 17 00:00:00 2001 From: Rui Figueira Date: Thu, 25 Sep 2025 15:23:21 +0100 Subject: [PATCH 01/10] docs: add wrangler config example for Playwright storage state persistence --- .../browser-rendering/platform/playwright.mdx | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/src/content/docs/browser-rendering/platform/playwright.mdx b/src/content/docs/browser-rendering/platform/playwright.mdx index 970efeb503afad..2ec24b4bc228a6 100644 --- a/src/content/docs/browser-rendering/platform/playwright.mdx +++ b/src/content/docs/browser-rendering/platform/playwright.mdx @@ -181,6 +181,54 @@ export default { }; ``` +### Storage state + +Playwright supports [storage state](https://playwright.dev/docs/api/class-browsercontext#browsercontext-storage-state) to obtain and persist cookies and other storage data. + +Here's an example that uses storage state to persist cookies and other storage data in [KV](https://developers.cloudflare.com/kv): + + + +```jsonc +{ + "name": "storage-state-examples", + "main": "src/index.ts", + "compatibility_flags": ["nodejs_compat"], + "compatibility_date": "2025-09-17", + "browser": { + "binding": "MYBROWSER" + }, + "kv_namespaces": [ + { + "binding": "KV", + "id": "" + } + ] +} +``` + + + +```ts title="src/index.ts" +// gets persisted storage state from KV or undefined if it doesn't exist +const storageStateJson = await env.KV.get('storageState'); +const storageState = storageStateJson ? await JSON.parse(storageStateJson) as BrowserContextOptions['storageState'] : undefined; + +await using browser = await launch(env.MYBROWSER); +// creates a new context with storage state persisted in KV +await using context = await browser.newContext({ storageState }); + +await using page = await context.newPage(); + +// do some actions on the page that may update client-side storage + +// gets updated storage state: cookies, localStorage and IndexedDB +const updatedStorageState = await context.storageState({ indexedDB: true }); + +// persist updated storage state in KV +await env.KV.put('storageState', JSON.stringify(updatedStorageState)); +``` + ### Keep Alive If users omit the `browser.close()` statement, the browser instance will stay open, ready to be connected to again and [re-used](/browser-rendering/workers-bindings/reuse-sessions/) but it will, by default, close automatically after 1 minute of inactivity. Users can optionally extend this idle time up to 10 minutes, by using the `keep_alive` option, set in milliseconds: From 89501bb1fb1da9ab284e8889d53034ba4f013522 Mon Sep 17 00:00:00 2001 From: Rui Figueira Date: Mon, 29 Sep 2025 10:29:09 +0100 Subject: [PATCH 02/10] docs: add KV setup for Playwright storage state example --- .../docs/browser-rendering/platform/playwright.mdx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/content/docs/browser-rendering/platform/playwright.mdx b/src/content/docs/browser-rendering/platform/playwright.mdx index 2ec24b4bc228a6..36ff891617b69e 100644 --- a/src/content/docs/browser-rendering/platform/playwright.mdx +++ b/src/content/docs/browser-rendering/platform/playwright.mdx @@ -187,6 +187,14 @@ Playwright supports [storage state](https://playwright.dev/docs/api/class-browse Here's an example that uses storage state to persist cookies and other storage data in [KV](https://developers.cloudflare.com/kv): +- First, ensure you have a KV namespace. You can create a new one with: + +```bash +npx wrangler kv namespace create KV +``` + +- Ensure you add the KV namespace to your `wrangler.toml` file: + ```jsonc @@ -207,7 +215,7 @@ Here's an example that uses storage state to persist cookies and other storage d } ``` - +- Now, you can use the storage state to persist cookies and other storage data in KV: ```ts title="src/index.ts" // gets persisted storage state from KV or undefined if it doesn't exist From 6de2041df34ce7ddfbef090f8f7f56db7b7b8808 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Mon, 29 Sep 2025 09:56:49 -0700 Subject: [PATCH 03/10] Update playwright.mdx add missing close for WranglerConfig --- src/content/docs/browser-rendering/platform/playwright.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/content/docs/browser-rendering/platform/playwright.mdx b/src/content/docs/browser-rendering/platform/playwright.mdx index 36ff891617b69e..ffbe1b7abf65c1 100644 --- a/src/content/docs/browser-rendering/platform/playwright.mdx +++ b/src/content/docs/browser-rendering/platform/playwright.mdx @@ -215,6 +215,8 @@ npx wrangler kv namespace create KV } ``` + + - Now, you can use the storage state to persist cookies and other storage data in KV: ```ts title="src/index.ts" From 29b88169b22c363871c599c7c02295ead1d7d4d3 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Mon, 29 Sep 2025 10:28:33 -0700 Subject: [PATCH 04/10] Update playwright.mdx -update bullets in new storage section -update kv link -add note about mandatory compatibility flags to use Playwright latest version --- .../docs/browser-rendering/platform/playwright.mdx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/content/docs/browser-rendering/platform/playwright.mdx b/src/content/docs/browser-rendering/platform/playwright.mdx index ffbe1b7abf65c1..8737454f332312 100644 --- a/src/content/docs/browser-rendering/platform/playwright.mdx +++ b/src/content/docs/browser-rendering/platform/playwright.mdx @@ -36,6 +36,10 @@ If you want to skip the steps and get started quickly, select **Deploy to Cloudf Make sure you have the [browser binding](/browser-rendering/platform/wrangler/#bindings) configured in your `wrangler.toml` file: +:::note +To use the latest version of `@cloudflare/playwright`, your Worker configuration must include the `nodejs_compat` compatibility flag and a `compatibility_date` of 2025-09-15 or later. This change is necessary because the library's functionality requires the native `node.fs` API. +::: + ```toml @@ -185,15 +189,15 @@ export default { Playwright supports [storage state](https://playwright.dev/docs/api/class-browsercontext#browsercontext-storage-state) to obtain and persist cookies and other storage data. -Here's an example that uses storage state to persist cookies and other storage data in [KV](https://developers.cloudflare.com/kv): +Here's an example that uses storage state to persist cookies and other storage data in [KV](/kv): -- First, ensure you have a KV namespace. You can create a new one with: +First, ensure you have a KV namespace. You can create a new one with: ```bash npx wrangler kv namespace create KV ``` -- Ensure you add the KV namespace to your `wrangler.toml` file: +Ensure you add the KV namespace to your `wrangler.toml` file: @@ -217,7 +221,7 @@ npx wrangler kv namespace create KV -- Now, you can use the storage state to persist cookies and other storage data in KV: +Now, you can use the storage state to persist cookies and other storage data in KV: ```ts title="src/index.ts" // gets persisted storage state from KV or undefined if it doesn't exist From db75d7dcdda179c629c3d2d92e49f045262b20f7 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Tue, 30 Sep 2025 10:22:49 -0700 Subject: [PATCH 05/10] Update src/content/docs/browser-rendering/platform/playwright.mdx Co-authored-by: ToriLindsay --- src/content/docs/browser-rendering/platform/playwright.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/docs/browser-rendering/platform/playwright.mdx b/src/content/docs/browser-rendering/platform/playwright.mdx index 8737454f332312..33b512dced3e8c 100644 --- a/src/content/docs/browser-rendering/platform/playwright.mdx +++ b/src/content/docs/browser-rendering/platform/playwright.mdx @@ -189,7 +189,6 @@ export default { Playwright supports [storage state](https://playwright.dev/docs/api/class-browsercontext#browsercontext-storage-state) to obtain and persist cookies and other storage data. -Here's an example that uses storage state to persist cookies and other storage data in [KV](/kv): First, ensure you have a KV namespace. You can create a new one with: From 8d553444e18873613e247ca9719c6de8c398a886 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Tue, 30 Sep 2025 10:22:56 -0700 Subject: [PATCH 06/10] Update src/content/docs/browser-rendering/platform/playwright.mdx Co-authored-by: ToriLindsay --- src/content/docs/browser-rendering/platform/playwright.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/browser-rendering/platform/playwright.mdx b/src/content/docs/browser-rendering/platform/playwright.mdx index 33b512dced3e8c..68c5ee988681bc 100644 --- a/src/content/docs/browser-rendering/platform/playwright.mdx +++ b/src/content/docs/browser-rendering/platform/playwright.mdx @@ -187,7 +187,7 @@ export default { ### Storage state -Playwright supports [storage state](https://playwright.dev/docs/api/class-browsercontext#browsercontext-storage-state) to obtain and persist cookies and other storage data. +Playwright supports [storage state](https://playwright.dev/docs/api/class-browsercontext#browsercontext-storage-state) to obtain and persist cookies and other storage data. In this example, you will use storage state to persist cookies and other storage data in [Workers KV](/kv). First, ensure you have a KV namespace. You can create a new one with: From 97eb9416c144f1237ea3efb54d5d00235c843cd4 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Tue, 30 Sep 2025 10:23:13 -0700 Subject: [PATCH 07/10] Update src/content/docs/browser-rendering/platform/playwright.mdx Co-authored-by: ToriLindsay --- src/content/docs/browser-rendering/platform/playwright.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/browser-rendering/platform/playwright.mdx b/src/content/docs/browser-rendering/platform/playwright.mdx index 68c5ee988681bc..3aeb8d6b3180fa 100644 --- a/src/content/docs/browser-rendering/platform/playwright.mdx +++ b/src/content/docs/browser-rendering/platform/playwright.mdx @@ -196,7 +196,7 @@ First, ensure you have a KV namespace. You can create a new one with: npx wrangler kv namespace create KV ``` -Ensure you add the KV namespace to your `wrangler.toml` file: +Then, add the KV namespace to your `wrangler.toml` file: From 2ddd991e86adc79f41d403ba7cfa454c2cf5ff29 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Tue, 30 Sep 2025 10:23:20 -0700 Subject: [PATCH 08/10] Update src/content/docs/browser-rendering/platform/playwright.mdx Co-authored-by: ToriLindsay --- src/content/docs/browser-rendering/platform/playwright.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/browser-rendering/platform/playwright.mdx b/src/content/docs/browser-rendering/platform/playwright.mdx index 3aeb8d6b3180fa..f5e1cfe8c2ea5d 100644 --- a/src/content/docs/browser-rendering/platform/playwright.mdx +++ b/src/content/docs/browser-rendering/platform/playwright.mdx @@ -223,7 +223,7 @@ Then, add the KV namespace to your `wrangler.toml` file: Now, you can use the storage state to persist cookies and other storage data in KV: ```ts title="src/index.ts" -// gets persisted storage state from KV or undefined if it doesn't exist +// gets persisted storage state from KV or undefined if it does not exist const storageStateJson = await env.KV.get('storageState'); const storageState = storageStateJson ? await JSON.parse(storageStateJson) as BrowserContextOptions['storageState'] : undefined; From 8cee66416c23ebc1acb42a77c7cfddc2765ae44d Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Tue, 30 Sep 2025 10:23:28 -0700 Subject: [PATCH 09/10] Update src/content/docs/browser-rendering/platform/playwright.mdx Co-authored-by: ToriLindsay --- src/content/docs/browser-rendering/platform/playwright.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/browser-rendering/platform/playwright.mdx b/src/content/docs/browser-rendering/platform/playwright.mdx index f5e1cfe8c2ea5d..ae6bb164db6045 100644 --- a/src/content/docs/browser-rendering/platform/playwright.mdx +++ b/src/content/docs/browser-rendering/platform/playwright.mdx @@ -235,7 +235,7 @@ await using page = await context.newPage(); // do some actions on the page that may update client-side storage -// gets updated storage state: cookies, localStorage and IndexedDB +// gets updated storage state: cookies, localStorage, and IndexedDB const updatedStorageState = await context.storageState({ indexedDB: true }); // persist updated storage state in KV From 2aad81df2a0259bc74c19d78d6dcdcbd000a06a8 Mon Sep 17 00:00:00 2001 From: Kathy <153706637+kathayl@users.noreply.github.com> Date: Tue, 30 Sep 2025 10:23:35 -0700 Subject: [PATCH 10/10] Update src/content/docs/browser-rendering/platform/playwright.mdx Co-authored-by: ToriLindsay --- src/content/docs/browser-rendering/platform/playwright.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/browser-rendering/platform/playwright.mdx b/src/content/docs/browser-rendering/platform/playwright.mdx index ae6bb164db6045..05987051b8e32f 100644 --- a/src/content/docs/browser-rendering/platform/playwright.mdx +++ b/src/content/docs/browser-rendering/platform/playwright.mdx @@ -238,7 +238,7 @@ await using page = await context.newPage(); // gets updated storage state: cookies, localStorage, and IndexedDB const updatedStorageState = await context.storageState({ indexedDB: true }); -// persist updated storage state in KV +// persists updated storage state in KV await env.KV.put('storageState', JSON.stringify(updatedStorageState)); ```