Improve Plawright examples

Author: ruifigueira

src/content/changelog/browser-rendering/2025-04-04-playwright-beta.mdx

@@ -13,12 +13,11 @@ We're excited to share that you can now use Playwright's browser automation [cap
 Below is an example of how to use Playwright with Browser Rendering to test a TODO application using assertions:
 
 ```ts title="Assertion example"
-import type { Fetcher } from '@cloudflare/workers-types';
-import { launch } from '@cloudflare/playwright';
+import { launch, type BrowserWorker } from '@cloudflare/playwright';
 import { expect } from '@cloudflare/playwright/test';
 
 interface Env {
-  MYBROWSER: Fetcher;
+  MYBROWSER: BrowserWorker;
 }
 
 export default {
@@ -29,7 +28,7 @@ export default {
 
     await page.goto('https://demo.playwright.dev/todomvc');
 
-    const TODO_ITEMS = todos.length > 0 ? todos : [
+    const TODO_ITEMS = [
         'buy some cheese',
         'feed the cat',
         'book a doctors appointment'

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

@@ -55,24 +55,20 @@ Let's look at some examples of how to use Playwright:
 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.
 
 ```ts
-import type { Fetcher } from '@cloudflare/workers-types';
-import { launch } from '@cloudflare/playwright';
+import { launch, type BrowserWorker } from '@cloudflare/playwright';
 
 interface Env {
-  MYBROWSER: Fetcher;
+  MYBROWSER: BrowserWorker;
 }
 
 export default {
   async fetch(request: Request, env: Env) {
-		const { searchParams } = new URL(request.url);
-    const todos = searchParams.getAll('todo');
-
     const browser = await launch(env.MYBROWSER);
     const page = await browser.newPage();
 
     await page.goto('https://demo.playwright.dev/todomvc');
 
-    const TODO_ITEMS = todos.length > 0 ? todos : [
+    const TODO_ITEMS = [
       'buy some cheese',
       'feed the cat',
       'book a doctors appointment'
@@ -103,28 +99,24 @@ A Playwright trace is a detailed log of your workflow execution that captures in
 Here's an example of a worker generating a trace file:
 
 ```ts
-import type { Fetcher } from '@cloudflare/workers-types';
-import { launch, fs } from "@cloudflare/playwright";
+import { launch, type BrowserWorker } from "@cloudflare/playwright";
 import fs from '@cloudflare/playwright/fs';
 
 interface Env {
-  MYBROWSER: Fetcher;
+  MYBROWSER: BrowserWorker;
 }
 
 export default {
   async fetch(request: Request, env: Env) {
-    const { searchParams } = new URL(request.url);
-    const todos = searchParams.getAll('todo');
-    const trace = searchParams.has('trace');
-
     const browser = await launch(env.MYBROWSER);
     const page = await browser.newPage();
 
-    if (trace) await page.context().tracing.start({ screenshots: true, snapshots: true });
+	  // Start tracing before navigating to the page
+    await page.context().tracing.start({ screenshots: true, snapshots: true });
 
     await page.goto('https://demo.playwright.dev/todomvc');
 
-    const TODO_ITEMS = todos.length > 0 ? todos : [
+    const TODO_ITEMS = [
       'buy some cheese',
       'feed the cat',
       'book a doctors appointment'
@@ -136,33 +128,17 @@ export default {
       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)
-    ));
+		// Stop tracing and save the trace to a zip file
+    await page.context().tracing.stop({ path: 'trace.zip' });
+    await browser.close();
+    const file = await fs.promises.readFile('trace.zip');
 
-    if (trace) {
-      await page.context().tracing.stop({ path: 'trace.zip' });
-      await browser.close();
-      const file = await fs.promises.readFile('trace.zip');
-
-      return new Response(file, {
-        status: 200,
-        headers: {
-          'Content-Type': 'application/zip',
-        },
-      });
-    } else {
-      const img = await page.screenshot();
-      await browser.close();
-
-      return new Response(img, {
-        headers: {
-          'Content-Type': 'image/png',
-        },
-      });
-    }
+    return new Response(file, {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/zip',
+      },
+    });
   },
 };
 ```
@@ -172,12 +148,11 @@ export default {
 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:
 
 ```ts
-import type { Fetcher } from '@cloudflare/workers-types';
-import { launch } from '@cloudflare/playwright';
+import { launch, type BrowserWorker } from '@cloudflare/playwright';
 import { expect } from '@cloudflare/playwright/test';
 
 interface Env {
-  MYBROWSER: Fetcher;
+  MYBROWSER: BrowserWorker;
 }
 
 export default {
@@ -187,7 +162,7 @@ export default {
 
     await page.goto('https://demo.playwright.dev/todomvc');
 
-    const TODO_ITEMS = todos.length > 0 ? todos : [
+    const TODO_ITEMS = [
         'buy some cheese',
         'feed the cat',
         'book a doctors appointment'