chore: upgrade playwright example (#53584)

Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>

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'
+  )
 })

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"
   }
 }

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
+})