test: use new chromium headless browser for playwright, bump playwright (#14464)

AlessioGr · web-flow · commit 2bb5535f32b1 · 2025-11-06T16:35:54.000-05:00
This PR bumps the playwright version and configures it to use the new chromium headless browser. See https://playwright.dev/docs/browsers#chromium-new-headless-mode and microsoft/playwright#33566 > New Headless on the other hand is the real Chrome browser, and is thus more authentic, reliable, and offers more features. This makes it more suitable for high-accuracy end-to-end web app testing or browser extension testing. > Switching to new headless mode gives you a browser that closely follows the regular headed browser, at the cost of being a bit heavier on features you probably do not need and being slightly slower. In order for CI playwright caching to work, the playwright version we use in our templates needs to match the one we use in our test suite. Thus, this PR bumps the templates playwright version and regenerates them.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -364,7 +364,7 @@ jobs:
 
       - name: Setup Playwright - Browsers and Dependencies
         if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
-        run: pnpm exec playwright install --with-deps chromium
+        run: pnpm exec playwright install --with-deps chromium --no-shell
 
       - name: Setup Playwright - Dependencies-only
         if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
@@ -591,7 +591,7 @@ jobs:
       - name: Start PostgreSQL
         uses: CasperWA/postgresql-action@v1.2
         with:
-          postgresql version: "14" # See https://hub.docker.com/_/postgres for available versions
+          postgresql version: '14' # See https://hub.docker.com/_/postgres for available versions
           postgresql db: ${{ env.POSTGRES_DB }}
           postgresql user: ${{ env.POSTGRES_USER }}
           postgresql password: ${{ env.POSTGRES_PASSWORD }}
@@ -753,4 +753,4 @@ jobs:
         if: github.event.pull_request.head.repo.fork == false
         uses: exoego/esbuild-bundle-analyzer@v1
         with:
-          metafiles: "packages/payload/meta_index.json,packages/payload/meta_shared.json,packages/ui/meta_client.json,packages/ui/meta_shared.json,packages/next/meta_index.json,packages/richtext-lexical/meta_client.json"
+          metafiles: 'packages/payload/meta_index.json,packages/payload/meta_shared.json,packages/ui/meta_client.json,packages/ui/meta_shared.json,packages/next/meta_index.json,packages/richtext-lexical/meta_client.json'
diff --git a/package.json b/package.json
@@ -143,7 +143,7 @@
     "@payloadcms/eslint-config": "workspace:*",
     "@payloadcms/eslint-plugin": "workspace:*",
     "@payloadcms/live-preview-react": "workspace:*",
-    "@playwright/test": "1.54.1",
+    "@playwright/test": "1.56.1",
     "@sentry/nextjs": "^8.33.1",
     "@sentry/node": "^8.33.1",
     "@swc-node/register": "1.10.10",
@@ -178,8 +178,8 @@
     "open": "^10.1.0",
     "p-limit": "^5.0.0",
     "pg": "8.16.3",
-    "playwright": "1.54.1",
-    "playwright-core": "1.54.1",
+    "playwright": "1.56.1",
+    "playwright-core": "1.56.1",
     "prettier": "3.5.3",
     "react": "19.1.1",
     "react-dom": "19.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/templates/_template/package.json b/templates/_template/package.json
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
-    "@playwright/test": "1.54.1",
+    "@playwright/test": "1.56.1",
     "@testing-library/react": "16.3.0",
     "@types/node": "^22.5.4",
     "@types/react": "19.1.8",
@@ -41,8 +41,8 @@
     "eslint": "^9.16.0",
     "eslint-config-next": "15.4.4",
     "jsdom": "26.1.0",
-    "playwright": "1.54.1",
-    "playwright-core": "1.54.1",
+    "playwright": "1.56.1",
+    "playwright-core": "1.56.1",
     "prettier": "^3.4.2",
     "typescript": "5.7.3",
     "vite-tsconfig-paths": "5.1.4",
diff --git a/templates/_template/playwright.config.ts b/templates/_template/playwright.config.ts
@@ -30,7 +30,7 @@ export default defineConfig({
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: { ...devices['Desktop Chrome'], channel: 'chromium' },
     },
   ],
   webServer: {
diff --git a/templates/blank/package.json b/templates/blank/package.json
@@ -32,7 +32,7 @@
     "sharp": "0.34.2"
   },
   "devDependencies": {
-    "@playwright/test": "1.54.1",
+    "@playwright/test": "1.56.1",
     "@testing-library/react": "16.3.0",
     "@types/node": "^22.5.4",
     "@types/react": "19.1.8",
@@ -41,8 +41,8 @@
     "eslint": "^9.16.0",
     "eslint-config-next": "15.4.4",
     "jsdom": "26.1.0",
-    "playwright": "1.54.1",
-    "playwright-core": "1.54.1",
+    "playwright": "1.56.1",
+    "playwright-core": "1.56.1",
     "prettier": "^3.4.2",
     "typescript": "5.7.3",
     "vite-tsconfig-paths": "5.1.4",
diff --git a/templates/blank/playwright.config.ts b/templates/blank/playwright.config.ts
@@ -30,7 +30,7 @@ export default defineConfig({
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: { ...devices['Desktop Chrome'], channel: 'chromium' },
     },
   ],
   webServer: {
diff --git a/templates/ecommerce/playwright.config.ts b/templates/ecommerce/playwright.config.ts
@@ -30,7 +30,7 @@ export default defineConfig({
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: { ...devices['Desktop Chrome'], channel: 'chromium' },
     },
   ],
   webServer: {
diff --git a/templates/website/package.json b/templates/website/package.json
@@ -57,7 +57,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
-    "@playwright/test": "1.54.1",
+    "@playwright/test": "1.56.1",
     "@tailwindcss/typography": "^0.5.13",
     "@testing-library/react": "16.3.0",
     "@types/escape-html": "^1.0.2",
@@ -70,8 +70,8 @@
     "eslint": "^9.16.0",
     "eslint-config-next": "15.4.4",
     "jsdom": "26.1.0",
-    "playwright": "1.54.1",
-    "playwright-core": "1.54.1",
+    "playwright": "1.56.1",
+    "playwright-core": "1.56.1",
     "postcss": "^8.4.38",
     "prettier": "^3.4.2",
     "tailwindcss": "^3.4.3",
diff --git a/templates/website/playwright.config.ts b/templates/website/playwright.config.ts
@@ -30,7 +30,7 @@ export default defineConfig({
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: { ...devices['Desktop Chrome'], channel: 'chromium' },
     },
   ],
   webServer: {
diff --git a/templates/with-cloudflare-d1/package.json b/templates/with-cloudflare-d1/package.json
@@ -40,7 +40,7 @@
     "react-dom": "19.1.0"
   },
   "devDependencies": {
-    "@playwright/test": "1.54.1",
+    "@playwright/test": "1.56.1",
     "@testing-library/react": "16.3.0",
     "@types/node": "^22.5.4",
     "@types/react": "19.1.8",
@@ -49,8 +49,8 @@
     "eslint": "^9.16.0",
     "eslint-config-next": "15.4.4",
     "jsdom": "26.1.0",
-    "playwright": "1.54.1",
-    "playwright-core": "1.54.1",
+    "playwright": "1.56.1",
+    "playwright-core": "1.56.1",
     "prettier": "^3.4.2",
     "typescript": "5.7.3",
     "vite-tsconfig-paths": "5.1.4",
diff --git a/templates/with-cloudflare-d1/playwright.config.ts b/templates/with-cloudflare-d1/playwright.config.ts
@@ -30,7 +30,7 @@ export default defineConfig({
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: { ...devices['Desktop Chrome'], channel: 'chromium' },
     },
   ],
   webServer: {
diff --git a/templates/with-postgres/package.json b/templates/with-postgres/package.json
@@ -6,6 +6,7 @@
   "type": "module",
   "scripts": {
     "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "ci": "payload migrate && pnpm build",
     "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
     "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
     "generate:importmap": "cross-env NODE_OPTIONS=--no-deprecation payload generate:importmap",
@@ -15,10 +16,10 @@
     "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
     "test": "pnpm run test:int && pnpm run test:e2e",
     "test:e2e": "cross-env NODE_OPTIONS=\"--no-deprecation --no-experimental-strip-types\" pnpm exec playwright test",
-    "test:int": "cross-env NODE_OPTIONS=--no-deprecation vitest run --config ./vitest.config.mts",
-    "ci": "payload migrate && pnpm build"
+    "test:int": "cross-env NODE_OPTIONS=--no-deprecation vitest run --config ./vitest.config.mts"
   },
   "dependencies": {
+    "@payloadcms/db-postgres": "3.62.1",
     "@payloadcms/next": "3.62.1",
     "@payloadcms/richtext-lexical": "3.62.1",
     "@payloadcms/ui": "3.62.1",
@@ -28,12 +29,11 @@
     "payload": "3.62.1",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "sharp": "0.34.2",
-    "@payloadcms/db-postgres": "3.62.1"
+    "sharp": "0.34.2"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
-    "@playwright/test": "1.54.1",
+    "@playwright/test": "1.56.1",
     "@testing-library/react": "16.3.0",
     "@types/node": "^22.5.4",
     "@types/react": "19.1.8",
@@ -42,8 +42,8 @@
     "eslint": "^9.16.0",
     "eslint-config-next": "15.4.4",
     "jsdom": "26.1.0",
-    "playwright": "1.54.1",
-    "playwright-core": "1.54.1",
+    "playwright": "1.56.1",
+    "playwright-core": "1.56.1",
     "prettier": "^3.4.2",
     "typescript": "5.7.3",
     "vite-tsconfig-paths": "5.1.4",
diff --git a/templates/with-postgres/playwright.config.ts b/templates/with-postgres/playwright.config.ts
@@ -30,7 +30,7 @@ export default defineConfig({
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: { ...devices['Desktop Chrome'], channel: 'chromium' },
     },
   ],
   webServer: {
diff --git a/templates/with-postgres/src/migrations/20251106_203721_initial.json b/templates/with-postgres/src/migrations/20251106_203721_initial.json
@@ -1,5 +1,5 @@
 {
-  "id": "ee91e817-d329-46a5-87cf-43c44425fec4",
+  "id": "0bb0da09-2927-4ed1-9d1f-cb3bd16e878b",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "version": "7",
   "dialect": "postgresql",
diff --git a/templates/with-postgres/src/migrations/20251106_203721_initial.ts b/templates/with-postgres/src/migrations/20251106_203721_initial.ts
diff --git a/templates/with-postgres/src/migrations/index.ts b/templates/with-postgres/src/migrations/index.ts
@@ -1,9 +1,9 @@
-import * as migration_20251105_063810_initial from './20251105_063810_initial'
+import * as migration_20251106_203721_initial from './20251106_203721_initial'
 
 export const migrations = [
   {
-    up: migration_20251105_063810_initial.up,
-    down: migration_20251105_063810_initial.down,
-    name: '20251105_063810_initial',
+    up: migration_20251106_203721_initial.up,
+    down: migration_20251106_203721_initial.down,
+    name: '20251106_203721_initial',
   },
 ]
diff --git a/templates/with-vercel-mongodb/package.json b/templates/with-vercel-mongodb/package.json
@@ -21,18 +21,18 @@
     "@payloadcms/db-mongodb": "3.62.1",
     "@payloadcms/next": "3.62.1",
     "@payloadcms/richtext-lexical": "3.62.1",
+    "@payloadcms/storage-vercel-blob": "3.62.1",
     "@payloadcms/ui": "3.62.1",
     "cross-env": "^7.0.3",
     "graphql": "^16.8.1",
     "next": "15.4.4",
     "payload": "3.62.1",
     "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "@payloadcms/storage-vercel-blob": "3.62.1"
+    "react-dom": "19.1.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
-    "@playwright/test": "1.54.1",
+    "@playwright/test": "1.56.1",
     "@testing-library/react": "16.3.0",
     "@types/node": "^22.5.4",
     "@types/react": "19.1.8",
@@ -41,13 +41,14 @@
     "eslint": "^9.16.0",
     "eslint-config-next": "15.4.4",
     "jsdom": "26.1.0",
-    "playwright": "1.54.1",
-    "playwright-core": "1.54.1",
+    "playwright": "1.56.1",
+    "playwright-core": "1.56.1",
     "prettier": "^3.4.2",
     "typescript": "5.7.3",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "3.2.3"
   },
+  "packageManager": "pnpm@10.20.0",
   "engines": {
     "node": "^18.20.2 || >=20.9.0"
   },
@@ -57,6 +58,5 @@
       "esbuild",
       "unrs-resolver"
     ]
-  },
-  "packageManager": "pnpm@10.20.0"
+  }
 }
diff --git a/templates/with-vercel-mongodb/playwright.config.ts b/templates/with-vercel-mongodb/playwright.config.ts
@@ -30,7 +30,7 @@ export default defineConfig({
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: { ...devices['Desktop Chrome'], channel: 'chromium' },
     },
   ],
   webServer: {
diff --git a/templates/with-vercel-postgres/package.json b/templates/with-vercel-postgres/package.json
@@ -6,6 +6,7 @@
   "type": "module",
   "scripts": {
     "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "ci": "payload migrate && pnpm build",
     "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
     "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
     "generate:importmap": "cross-env NODE_OPTIONS=--no-deprecation payload generate:importmap",
@@ -15,25 +16,24 @@
     "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
     "test": "pnpm run test:int && pnpm run test:e2e",
     "test:e2e": "cross-env NODE_OPTIONS=\"--no-deprecation --no-experimental-strip-types\" pnpm exec playwright test",
-    "test:int": "cross-env NODE_OPTIONS=--no-deprecation vitest run --config ./vitest.config.mts",
-    "ci": "payload migrate && pnpm build"
+    "test:int": "cross-env NODE_OPTIONS=--no-deprecation vitest run --config ./vitest.config.mts"
   },
   "dependencies": {
+    "@payloadcms/db-vercel-postgres": "3.62.1",
     "@payloadcms/next": "3.62.1",
     "@payloadcms/richtext-lexical": "3.62.1",
+    "@payloadcms/storage-vercel-blob": "3.62.1",
     "@payloadcms/ui": "3.62.1",
     "cross-env": "^7.0.3",
     "graphql": "^16.8.1",
     "next": "15.4.4",
     "payload": "3.62.1",
     "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "@payloadcms/db-vercel-postgres": "3.62.1",
-    "@payloadcms/storage-vercel-blob": "3.62.1"
+    "react-dom": "19.1.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",
-    "@playwright/test": "1.54.1",
+    "@playwright/test": "1.56.1",
     "@testing-library/react": "16.3.0",
     "@types/node": "^22.5.4",
     "@types/react": "19.1.8",
@@ -42,13 +42,14 @@
     "eslint": "^9.16.0",
     "eslint-config-next": "15.4.4",
     "jsdom": "26.1.0",
-    "playwright": "1.54.1",
-    "playwright-core": "1.54.1",
+    "playwright": "1.56.1",
+    "playwright-core": "1.56.1",
     "prettier": "^3.4.2",
     "typescript": "5.7.3",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "3.2.3"
   },
+  "packageManager": "pnpm@10.20.0",
   "engines": {
     "node": "^18.20.2 || >=20.9.0"
   },
@@ -58,6 +59,5 @@
       "esbuild",
       "unrs-resolver"
     ]
-  },
-  "packageManager": "pnpm@10.20.0"
+  }
 }
diff --git a/templates/with-vercel-postgres/playwright.config.ts b/templates/with-vercel-postgres/playwright.config.ts
@@ -30,7 +30,7 @@ export default defineConfig({
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: { ...devices['Desktop Chrome'], channel: 'chromium' },
     },
   ],
   webServer: {
diff --git a/templates/with-vercel-postgres/src/migrations/20251106_203708_initial.json b/templates/with-vercel-postgres/src/migrations/20251106_203708_initial.json
@@ -1,5 +1,5 @@
 {
-  "id": "d951574d-9285-4004-ba16-2ef73e07251c",
+  "id": "a6aed79c-fbfa-4c8a-92b0-861d9c9a7cf9",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "version": "7",
   "dialect": "postgresql",
diff --git a/templates/with-vercel-postgres/src/migrations/20251106_203708_initial.ts b/templates/with-vercel-postgres/src/migrations/20251106_203708_initial.ts
diff --git a/templates/with-vercel-postgres/src/migrations/index.ts b/templates/with-vercel-postgres/src/migrations/index.ts
@@ -1,9 +1,9 @@
-import * as migration_20251105_063738_initial from './20251105_063738_initial'
+import * as migration_20251106_203708_initial from './20251106_203708_initial'
 
 export const migrations = [
   {
-    up: migration_20251105_063738_initial.up,
-    down: migration_20251105_063738_initial.down,
-    name: '20251105_063738_initial',
+    up: migration_20251106_203708_initial.up,
+    down: migration_20251106_203708_initial.down,
+    name: '20251106_203708_initial',
   },
 ]
diff --git a/templates/with-vercel-website/package.json b/templates/with-vercel-website/package.json
diff --git a/templates/with-vercel-website/playwright.config.ts b/templates/with-vercel-website/playwright.config.ts
diff --git a/templates/with-vercel-website/src/migrations/20251106_203714_initial.json b/templates/with-vercel-website/src/migrations/20251106_203714_initial.json
diff --git a/templates/with-vercel-website/src/migrations/20251106_203714_initial.ts b/templates/with-vercel-website/src/migrations/20251106_203714_initial.ts
diff --git a/templates/with-vercel-website/src/migrations/index.ts b/templates/with-vercel-website/src/migrations/index.ts
diff --git a/test/package.json b/test/package.json
diff --git a/test/playwright.config.ts b/test/playwright.config.ts

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ export default defineConfig({`
`30`	`30`	`projects: [`
`31`	`31`	`{`
`32`	`32`	`name: 'chromium',`
`33`		`- use: { ...devices['Desktop Chrome'] },`
	`33`	`+ use: { ...devices['Desktop Chrome'], channel: 'chromium' },`
`34`	`34`	`},`
`35`	`35`	`],`
`36`	`36`	`webServer: {`