chore: upgrade playwright (#18793)

* chore: upgrade playwright

* remove core

* upgrade container image

* use test-runner version

.github/workflows/storybook-chromatic.yml

@@ -54,7 +54,7 @@ jobs:
         runs-on: ubuntu-latest
         timeout-minutes: 30
         container:
-            image: mcr.microsoft.com/playwright:v1.29.2 # Same as @storybook/test-runner@0.13's dependency
+            image: mcr.microsoft.com/playwright:v1.32.2 # Same as @storybook/test-runner@0.15.2's dependency
         strategy:
             fail-fast: false
             matrix:

.storybook/test-runner.ts

@@ -1,6 +1,6 @@
 import { toMatchImageSnapshot } from 'jest-image-snapshot'
 import { getStoryContext, TestRunnerConfig, TestContext } from '@storybook/test-runner'
-import type { Locator, Page, LocatorScreenshotOptions } from 'playwright-core'
+import type { Locator, Page, LocatorScreenshotOptions } from '@playwright/test'
 import type { Mocks } from '~/mocks/utils'
 import { StoryContext } from '@storybook/types'
 

Dockerfile.playwright

@@ -3,7 +3,7 @@
 # We do this to ensure our reference images for visual regression tests are the same during development and in CI.
 #
 
-FROM mcr.microsoft.com/playwright:v1.29.2
+FROM mcr.microsoft.com/playwright:v1.32.2
 
 WORKDIR /work
 

package.json

@@ -15,7 +15,7 @@
     "engines": {
         "node": ">=18 <19"
     },
-    "packageManager": "pnpm@8.6.0",
+    "packageManager": "pnpm@8.10.5",
     "scripts": {
         "copy-scripts": "mkdir -p frontend/dist/ && ./bin/copy-posthog-js",
         "test": "pnpm test:unit && pnpm test:visual-regression",
@@ -182,7 +182,7 @@
         "@babel/preset-typescript": "^7.22.5",
         "@babel/runtime": "^7.22.10",
         "@cypress/webpack-preprocessor": "^5.17.1",
-        "@playwright/test": "1.29.2",
+        "@playwright/test": "1.32.2",
         "@sentry/types": "7.22.0",
         "@storybook/addon-a11y": "^7.5.1",
         "@storybook/addon-actions": "^7.5.1",
@@ -271,7 +271,6 @@
         "msw": "^0.49.0",
         "path-browserify": "^1.0.1",
         "pixelmatch": "^5.3.0",
-        "playwright-core": "1.29.2",
         "pngjs": "^6.0.0",
         "postcss": "^8.4.31",
         "postcss-loader": "^4.3.0",

playwright.config.ts

@@ -1,5 +1,4 @@
-import type { PlaywrightTestConfig } from '@playwright/test'
-import { devices } from '@playwright/test'
+import { defineConfig, devices } from '@playwright/test'
 
 /**
  * Read environment variables from file.
@@ -10,7 +9,7 @@ import { devices } from '@playwright/test'
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
-const config: PlaywrightTestConfig = {
+export default defineConfig({
     testDir: './playwright',
     /* Maximum time one test can run for. */
     timeout: 30 * 1000,
@@ -102,6 +101,4 @@ const config: PlaywrightTestConfig = {
     //   command: 'npm run start',
     //   port: 3000,
     // },
-}
-
-export default config
+})