diff --git a/examples/with-playwright/e2e/example.spec.ts b/examples/with-playwright/e2e/example.spec.ts
index 547a6c4002cb..f552087a355a 100644
--- a/examples/with-playwright/e2e/example.spec.ts
+++ b/examples/with-playwright/e2e/example.spec.ts
@@ -4,9 +4,11 @@ test('should navigate to the about page', async ({ page }) => {
   // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
   await page.goto('/')
   // Find an element with the text 'About Page' and click on it
-  await page.click('text=About Page')
+  await page.getByText('About Page').click()
   // The new url should be "/about" (baseURL is used there)
   await expect(page).toHaveURL('/about')
   // The new page should contain an h1 with "About Page"
-  await expect(page.locator('h1')).toContainText('About Page')
+  await expect(page.getByRole('heading', { level: 1 })).toContainText(
+    'About Page'
+  )
 })
diff --git a/examples/with-playwright/package.json b/examples/with-playwright/package.json
index 555dec415467..25209924f85e 100644
--- a/examples/with-playwright/package.json
+++ b/examples/with-playwright/package.json
@@ -12,6 +12,6 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.15.0"
+    "@playwright/test": "^1.36.2"
   }
 }
diff --git a/examples/with-playwright/playwright.config.ts b/examples/with-playwright/playwright.config.ts
index 5048aa229a72..9ee78f1b8f51 100644
--- a/examples/with-playwright/playwright.config.ts
+++ b/examples/with-playwright/playwright.config.ts
@@ -1,4 +1,4 @@
-import { PlaywrightTestConfig, devices } from '@playwright/test'
+import { defineConfig, devices } from '@playwright/test'
 import path from 'path'
 
 // Use process.env.PORT by default and fallback to port 3000
@@ -8,7 +8,7 @@ const PORT = process.env.PORT || 3000
 const baseURL = `http://localhost:${PORT}`
 
 // Reference: https://playwright.dev/docs/test-configuration
-const config: PlaywrightTestConfig = {
+export default defineConfig({
   // Timeout per test
   timeout: 30 * 1000,
   // Test directory
@@ -73,5 +73,4 @@ const config: PlaywrightTestConfig = {
       use: devices['iPhone 12'],
     },
   ],
-}
-export default config
+})