From d0c693f3749dcf390000476e6ed6b478e09032ba Mon Sep 17 00:00:00 2001 From: Steve Dodier-Lazaro Date: Thu, 12 Mar 2026 12:55:42 +0100 Subject: [PATCH 1/7] Update Node CI executors to support Angular min version --- scripts/ci/utils/executors.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/ci/utils/executors.ts b/scripts/ci/utils/executors.ts index a342eac36c30..9268a3bbb7d9 100644 --- a/scripts/ci/utils/executors.ts +++ b/scripts/ci/utils/executors.ts @@ -7,7 +7,7 @@ export const executors = { environment: { NODE_OPTIONS: '--max_old_space_size=6144', }, - image: 'cimg/node:22.15.0-browsers', + image: 'cimg/node:22.22.1-browsers', }, ], parameters: { @@ -27,7 +27,7 @@ export const executors = { environment: { NODE_OPTIONS: '--max_old_space_size=6144', }, - image: 'cimg/node:22.15.0', + image: 'cimg/node:22.22.1', }, ], parameters: { From 42dfeeac095ce75801dde94f520603bbf2a7ccb6 Mon Sep 17 00:00:00 2001 From: Steve Dodier-Lazaro Date: Thu, 12 Mar 2026 14:58:42 +0100 Subject: [PATCH 2/7] Update Playwright executor to use node 24 --- scripts/ci/utils/executors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/ci/utils/executors.ts b/scripts/ci/utils/executors.ts index 9268a3bbb7d9..4644297c9a7b 100644 --- a/scripts/ci/utils/executors.ts +++ b/scripts/ci/utils/executors.ts @@ -47,7 +47,7 @@ export const executors = { environment: { NODE_OPTIONS: '--max_old_space_size=6144', }, - image: 'mcr.microsoft.com/playwright:v1.52.0-noble', + image: 'mcr.microsoft.com/playwright:v1.58.2-noble', }, ], parameters: { From 0a17c99ac51077b51fc2060ef3ab5e2df4b11b17 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 12 Mar 2026 15:35:26 +0100 Subject: [PATCH 3/7] Update playwright dependencies --- .github/copilot-instructions.md | 2 +- .../cli-storybook/src/sandbox-templates.ts | 9 +++++ code/package.json | 2 +- docs/writing-tests/in-ci.mdx | 14 ++++---- docs/writing-tests/index.mdx | 2 +- package.json | 8 ++--- scripts/package.json | 4 +-- scripts/utils/yarn.ts | 6 ++-- .../react-vitest-3/package.json | 6 ++-- .../react/package.json | 8 ++--- .../svelte/package.json | 6 ++-- .../vue3/package.json | 6 ++-- test-storybooks/yarn-pnp/package.json | 4 +-- yarn.lock | 36 +++++++++---------- 14 files changed, 61 insertions(+), 52 deletions(-) diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index dc9785e14913..4980ff7b9e90 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -303,7 +303,7 @@ cd code && yarn test ### End-to-End Testing -- Playwright tests available (version 1.52.0 configured) +- Playwright tests available (version 1.58.2 configured) - E2E test tasks: `yarn task e2e-tests-build --start-from auto` or `yarn task e2e-tests-dev --start-from auto` - Test runner scenarios: `yarn task test-runner-build --start-from auto` or `yarn task test-runner-dev --start-from auto` - Smoke tests: `yarn task smoke-test --start-from auto` diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index 6e0c36b22d84..82da38f4783b 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -625,6 +625,9 @@ export const baseTemplates = { renderer: '@storybook/svelte', builder: '@storybook/builder-vite', }, + modifications: { + extraDependencies: ['@sveltejs/vite-plugin-svelte@7.0.0'], + }, skipTasks: ['e2e-tests', 'bench'], }, 'svelte-vite/default-ts': { @@ -635,6 +638,9 @@ export const baseTemplates = { renderer: '@storybook/svelte', builder: '@storybook/builder-vite', }, + modifications: { + extraDependencies: ['@sveltejs/vite-plugin-svelte@7.0.0'], + }, // Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed. skipTasks: ['smoke-test', 'bench'], }, @@ -677,6 +683,9 @@ export const baseTemplates = { renderer: '@storybook/svelte', builder: '@storybook/builder-vite', }, + modifications: { + extraDependencies: ['@sveltejs/vite-plugin-svelte@7.0.0'], + }, skipTasks: ['e2e-tests', 'bench'], }, 'lit-vite/default-js': { diff --git a/code/package.json b/code/package.json index a5c7eb85dbcb..8575b1910938 100644 --- a/code/package.json +++ b/code/package.json @@ -70,7 +70,7 @@ ], "dependencies": { "@chromatic-com/storybook": "^5.0.0", - "@playwright/test": "1.52.0", + "@playwright/test": "1.58.2", "@storybook/addon-a11y": "workspace:*", "@storybook/addon-designs": "^11.0.3", "@storybook/addon-docs": "workspace:*", diff --git a/docs/writing-tests/in-ci.mdx b/docs/writing-tests/in-ci.mdx index eba10a08cce2..0bd8aa72b12e 100644 --- a/docs/writing-tests/in-ci.mdx +++ b/docs/writing-tests/in-ci.mdx @@ -58,7 +58,7 @@ jobs: container: # Make sure to grab the latest version of the Playwright image # https://playwright.dev/docs/docker#pull-the-image - image: mcr.microsoft.com/playwright:v1.52.0-noble + image: mcr.microsoft.com/playwright:v1.58.2-noble steps: - uses: actions/checkout@v4 @@ -98,7 +98,7 @@ Test: stage: UI_Tests # Make sure to grab the latest version of the Playwright image # https://playwright.dev/docs/docker#pull-the-image - image: mcr.microsoft.com/playwright:v1.52.0-noble + image: mcr.microsoft.com/playwright:v1.58.2-noble script: - npm run test-storybook ``` @@ -125,7 +125,7 @@ pipelines: name: "Run Tests" # Make sure to grab the latest version of the Playwright image # https://playwright.dev/docs/docker#pull-the-image - image: mcr.microsoft.com/playwright:v1.52.0-noble + image: mcr.microsoft.com/playwright:v1.58.2-noble caches: - npm - node @@ -149,7 +149,7 @@ executors: docker: # Make sure to grab the latest version of the Playwright image # https://playwright.dev/docs/docker#pull-the-image - - image: mcr.microsoft.com/playwright:v1.52.0-noble + - image: mcr.microsoft.com/playwright:v1.58.2-noble working_directory: ~/repo jobs: @@ -222,7 +222,7 @@ pipeline { * Make sure to grab the latest version of the Playwright image * https://playwright.dev/docs/docker#pull-the-image */ - image 'mcr.microsoft.com/playwright:v1.52.0-noble' + image 'mcr.microsoft.com/playwright:v1.58.2-noble' reuseNode true } } @@ -257,7 +257,7 @@ stages: displayName: "Storybook tests" # Make sure to grab the latest version of the Playwright image # https://playwright.dev/docs/docker#pull-the-image - container: mcr.microsoft.com/playwright:v1.52.0-noble + container: mcr.microsoft.com/playwright:v1.58.2-noble variables: npm_config_cache: $(Pipeline.Workspace)/.npm steps: @@ -308,7 +308,7 @@ jobs: test: runs-on: ubuntu-latest container: - image: mcr.microsoft.com/playwright:v1.52.0-noble + image: mcr.microsoft.com/playwright:v1.58.2-noble + # 👇 Only run on successful deployments + if: github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success' steps: diff --git a/docs/writing-tests/index.mdx b/docs/writing-tests/index.mdx index 9d1f693ad93a..099008cb5f9a 100644 --- a/docs/writing-tests/index.mdx +++ b/docs/writing-tests/index.mdx @@ -90,7 +90,7 @@ Next, add a new CI workflow. container: # Make sure to grab the latest version of the Playwright image # https://playwright.dev/docs/docker#pull-the-image - image: mcr.microsoft.com/playwright:v1.52.0-noble + image: mcr.microsoft.com/playwright:v1.58.2-noble steps: - uses: actions/checkout@v4 diff --git a/package.json b/package.json index d6e3c288464f..64fc59250dee 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "@babel/runtime": "latest", "@babel/traverse": "latest", "@babel/types": "^7.28.4", - "@playwright/test": "1.52.0", + "@playwright/test": "1.58.2", "@testing-library/user-event@npm:^14.4.0": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch", "@testing-library/user-event@npm:^14.6.1": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch", "@types/babel__traverse@npm:*": "patch:@types/babel__traverse@npm%3A7.20.6#~/.yarn/patches/@types-babel__traverse-npm-7.20.6-fac4243243.patch", @@ -51,8 +51,8 @@ "@vitest/expect@npm:3.2.4": "patch:@vitest/expect@npm%3A3.2.4#~/.yarn/patches/@vitest-expect-npm-3.2.4-97c526d5cc.patch", "aria-query@5.3.0": "^5.3.0", "esbuild": "^0.27.0", - "playwright": "1.52.0", - "playwright-core": "1.52.0", + "playwright": "1.58.2", + "playwright-core": "1.58.2", "react": "^18.2.0", "serialize-javascript": "^3.1.0", "type-fest": "~2.19", @@ -60,7 +60,7 @@ }, "devDependencies": { "@nx/workspace": "^22.1.3", - "@playwright/test": "^1.52.0", + "@playwright/test": "^1.58.2", "@types/kill-port": "^2.0.3", "http-server": "^14.1.1", "husky": "^9.1.7", diff --git a/scripts/package.json b/scripts/package.json index e5db1e082858..d0e330c65af0 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -138,8 +138,8 @@ "p-limit": "^7.2.0", "p-retry": "^7.1.0", "picocolors": "^1.1.0", - "playwright": "1.52.0", - "playwright-core": "1.52.0", + "playwright": "1.58.2", + "playwright-core": "1.58.2", "polka": "^1.0.0-next.28", "prettier": "^3.7.1", "prettier-plugin-brace-style": "^0.8.1", diff --git a/scripts/utils/yarn.ts b/scripts/utils/yarn.ts index 7630ca403324..ca0c67ff7042 100644 --- a/scripts/utils/yarn.ts +++ b/scripts/utils/yarn.ts @@ -37,9 +37,9 @@ export const addPackageResolutions = async ({ cwd, dryRun }: YarnOptions) => { ...packageJson.resolutions, ...storybookVersions, // this is for our CI test, ensure we use the same version as docker image, it should match version specified in `./code/package.json` and `.circleci/config.yml` - playwright: '1.52.0', - 'playwright-core': '1.52.0', - '@playwright/test': '1.52.0', + playwright: '1.58.2', + 'playwright-core': '1.58.2', + '@playwright/test': '1.58.2', }; await writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2)); }; diff --git a/test-storybooks/portable-stories-kitchen-sink/react-vitest-3/package.json b/test-storybooks/portable-stories-kitchen-sink/react-vitest-3/package.json index ebaa7cd0f087..0a6d58169e9d 100644 --- a/test-storybooks/portable-stories-kitchen-sink/react-vitest-3/package.json +++ b/test-storybooks/portable-stories-kitchen-sink/react-vitest-3/package.json @@ -12,7 +12,7 @@ "vitest": "SKIP_FAIL_ON_PURPOSE=true vitest run" }, "resolutions": { - "@playwright/test": "1.52.0", + "@playwright/test": "1.58.2", "@storybook/addon-a11y": "file:../../../code/addons/a11y", "@storybook/addon-docs": "file:../../../code/addons/docs", "@storybook/addon-jest": "file:../../../code/addons/jest", @@ -47,7 +47,7 @@ "@storybook/web-components": "file:../../../code/renderers/web-components", "@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite", "eslint-plugin-storybook": "file:../../../code/lib/eslint-plugin", - "playwright": "1.52.0", + "playwright": "1.58.2", "storybook": "portal:../../../code/core" }, "dependencies": { @@ -55,7 +55,7 @@ "react-dom": "^18.0.0" }, "devDependencies": { - "@playwright/test": "1.52.0", + "@playwright/test": "1.58.2", "@storybook/addon-a11y": "^8.0.0", "@storybook/addon-vitest": "^8.0.0", "@storybook/react": "^8.0.0", diff --git a/test-storybooks/portable-stories-kitchen-sink/react/package.json b/test-storybooks/portable-stories-kitchen-sink/react/package.json index 24835d2fb05d..59991571370c 100644 --- a/test-storybooks/portable-stories-kitchen-sink/react/package.json +++ b/test-storybooks/portable-stories-kitchen-sink/react/package.json @@ -16,7 +16,7 @@ "vitest": "SKIP_FAIL_ON_PURPOSE=true vitest run" }, "resolutions": { - "@playwright/test": "1.52.0", + "@playwright/test": "1.58.2", "@storybook/addon-a11y": "file:../../../code/addons/a11y", "@storybook/addon-docs": "file:../../../code/addons/docs", "@storybook/addon-links": "file:../../../code/addons/links", @@ -50,7 +50,7 @@ "@storybook/web-components": "file:../../../code/renderers/web-components", "@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite", "eslint-plugin-storybook": "file:../../../code/lib/eslint-plugin", - "playwright": "1.52.0", + "playwright": "1.58.2", "storybook": "portal:../../../code/core" }, "dependencies": { @@ -58,8 +58,8 @@ "react-dom": "^18.0.0" }, "devDependencies": { - "@playwright/experimental-ct-react": "1.52.0", - "@playwright/test": "1.52.0", + "@playwright/experimental-ct-react": "1.58.2", + "@playwright/test": "1.58.2", "@storybook/addon-a11y": "^10.0.0", "@storybook/addon-vitest": "^10.0.0", "@storybook/react": "^10.0.0", diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/package.json b/test-storybooks/portable-stories-kitchen-sink/svelte/package.json index e351a866665f..5f41275af50f 100644 --- a/test-storybooks/portable-stories-kitchen-sink/svelte/package.json +++ b/test-storybooks/portable-stories-kitchen-sink/svelte/package.json @@ -14,7 +14,7 @@ "vitest": "vitest" }, "resolutions": { - "@playwright/test": "1.52.0", + "@playwright/test": "1.58.2", "@storybook/addon-a11y": "portal:../../../code/addons/a11y", "@storybook/addon-docs": "portal:../../../code/addons/docs", "@storybook/addon-links": "portal:../../../code/addons/links", @@ -46,11 +46,11 @@ "@storybook/vue3-vite": "portal:../../../code/frameworks/vue3-vite", "@storybook/web-components": "portal:../../../code/renderers/web-components", "@storybook/web-components-vite": "portal:../../../code/frameworks/web-components-vite", - "playwright": "1.52.0", + "playwright": "1.58.2", "storybook": "portal:../../../code/core" }, "devDependencies": { - "@playwright/experimental-ct-svelte": "1.52.0", + "@playwright/experimental-ct-svelte": "1.58.2", "@storybook/svelte": "9.0.0-alpha.0", "@storybook/svelte-vite": "9.0.0-alpha.0", "@sveltejs/vite-plugin-svelte": "^6.2.0", diff --git a/test-storybooks/portable-stories-kitchen-sink/vue3/package.json b/test-storybooks/portable-stories-kitchen-sink/vue3/package.json index fe78b5c5f255..8f7bf135e7de 100644 --- a/test-storybooks/portable-stories-kitchen-sink/vue3/package.json +++ b/test-storybooks/portable-stories-kitchen-sink/vue3/package.json @@ -15,7 +15,7 @@ "vitest": "echo 'Vitest tests are implemented in the renderer directory instead!'" }, "resolutions": { - "@playwright/test": "1.52.0", + "@playwright/test": "1.58.2", "@storybook/addon-a11y": "file:../../../code/addons/a11y", "@storybook/addon-docs": "file:../../../code/addons/docs", "@storybook/addon-links": "file:../../../code/addons/links", @@ -48,14 +48,14 @@ "@storybook/web-components": "file:../../../code/renderers/web-components", "@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite", "eslint-plugin-storybook": "file:../../../code/lib/eslint-plugin", - "playwright": "1.52.0", + "playwright": "1.58.2", "storybook": "file:../../../code/core" }, "dependencies": { "vue": "^3.4.19" }, "devDependencies": { - "@playwright/experimental-ct-vue": "1.52.0", + "@playwright/experimental-ct-vue": "1.58.2", "@storybook/vue3": "^8.0.0", "@storybook/vue3-vite": "^8.0.0", "@testing-library/jest-dom": "^6.6.3", diff --git a/test-storybooks/yarn-pnp/package.json b/test-storybooks/yarn-pnp/package.json index 9cc1347e1290..2f935ee231e6 100644 --- a/test-storybooks/yarn-pnp/package.json +++ b/test-storybooks/yarn-pnp/package.json @@ -11,7 +11,7 @@ "storybook": "storybook dev -p 6006" }, "resolutions": { - "@playwright/test": "1.52.0", + "@playwright/test": "1.58.2", "@storybook/addon-a11y": "file:../../code/addons/a11y", "@storybook/addon-docs": "file:../../code/addons/docs", "@storybook/addon-links": "file:../../code/addons/links", @@ -45,7 +45,7 @@ "@storybook/web-components": "file:../../code/renderers/web-components", "@storybook/web-components-vite": "file:../../code/frameworks/web-components-vite", "eslint-plugin-storybook": "file:../../code/lib/eslint-plugin", - "playwright": "1.52.0", + "playwright": "1.58.2", "storybook": "file:../../code/core" }, "dependencies": { diff --git a/yarn.lock b/yarn.lock index 493339d5f83e..8ee934dd00b0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4970,14 +4970,14 @@ __metadata: languageName: node linkType: hard -"@playwright/test@npm:1.52.0": - version: 1.52.0 - resolution: "@playwright/test@npm:1.52.0" +"@playwright/test@npm:1.58.2": + version: 1.58.2 + resolution: "@playwright/test@npm:1.58.2" dependencies: - playwright: "npm:1.52.0" + playwright: "npm:1.58.2" bin: playwright: cli.js - checksum: 10c0/1c428b421593eb4f79b7c99783a389c3ab3526c9051ec772749f4fca61414dfa9f2344eba846faac5f238084aa96c836364a91d81d3034ac54924f239a93e247 + checksum: 10c0/2164c03ad97c3653ff02e8818a71f3b2bbc344ac07924c9d8e31cd57505d6d37596015a41f51396b3ed8de6840f59143eaa9c21bf65515963da20740119811da languageName: node linkType: hard @@ -7915,7 +7915,7 @@ __metadata: resolution: "@storybook/code@workspace:code" dependencies: "@chromatic-com/storybook": "npm:^5.0.0" - "@playwright/test": "npm:1.52.0" + "@playwright/test": "npm:1.58.2" "@storybook/addon-a11y": "workspace:*" "@storybook/addon-designs": "npm:^11.0.3" "@storybook/addon-docs": "workspace:*" @@ -8453,7 +8453,7 @@ __metadata: resolution: "@storybook/root@workspace:." dependencies: "@nx/workspace": "npm:^22.1.3" - "@playwright/test": "npm:^1.52.0" + "@playwright/test": "npm:^1.58.2" "@types/kill-port": "npm:^2.0.3" http-server: "npm:^14.1.1" husky: "npm:^9.1.7" @@ -8556,8 +8556,8 @@ __metadata: p-limit: "npm:^7.2.0" p-retry: "npm:^7.1.0" picocolors: "npm:^1.1.0" - playwright: "npm:1.52.0" - playwright-core: "npm:1.52.0" + playwright: "npm:1.58.2" + playwright-core: "npm:1.58.2" polka: "npm:^1.0.0-next.28" prettier: "npm:^3.7.1" prettier-plugin-brace-style: "npm:^0.8.1" @@ -24590,27 +24590,27 @@ __metadata: languageName: node linkType: hard -"playwright-core@npm:1.52.0": - version: 1.52.0 - resolution: "playwright-core@npm:1.52.0" +"playwright-core@npm:1.58.2": + version: 1.58.2 + resolution: "playwright-core@npm:1.58.2" bin: playwright-core: cli.js - checksum: 10c0/640945507e6ca2144e9f596b2a6ecac042c2fd3683ff99e6271e9a7b38f3602d415f282609d569456f66680aab8b3c5bb1b257d8fb63a7fc0ed648261110421f + checksum: 10c0/5aa15b2b764e6ffe738293a09081a6f7023847a0dbf4cd05fe10eed2e25450d321baf7482f938f2d2eb330291e197fa23e57b29a5b552b89927ceb791266225b languageName: node linkType: hard -"playwright@npm:1.52.0": - version: 1.52.0 - resolution: "playwright@npm:1.52.0" +"playwright@npm:1.58.2": + version: 1.58.2 + resolution: "playwright@npm:1.58.2" dependencies: fsevents: "npm:2.3.2" - playwright-core: "npm:1.52.0" + playwright-core: "npm:1.58.2" dependenciesMeta: fsevents: optional: true bin: playwright: cli.js - checksum: 10c0/2c6edf1e15e59bbaf77f3fa0fe0ac975793c17cff835d9c8b8bc6395a3b6f1c01898b3058ab37891b2e4d424bcc8f1b4844fe70d943e0143d239d7451408c579 + checksum: 10c0/d060d9b7cc124bd8b5dffebaab5e84f6b34654a553758fe7b19cc598dfbee93f6ecfbdc1832b40a6380ae04eade86ef3285ba03aa0b136799e83402246dc0727 languageName: node linkType: hard From 080ef08fb87868c45f0c83128af5bc5b6c014248 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 12 Mar 2026 16:20:43 +0100 Subject: [PATCH 4/7] Use Playwright with Node.js v22 --- scripts/ci/common-jobs.ts | 3 +++ scripts/ci/sandboxes.ts | 41 ++++++++++++++++------------------- scripts/ci/test-storybooks.ts | 4 +++- scripts/ci/utils/executors.ts | 2 +- scripts/ci/utils/helpers.ts | 13 +++++++++++ 5 files changed, 39 insertions(+), 24 deletions(-) diff --git a/scripts/ci/common-jobs.ts b/scripts/ci/common-jobs.ts index a294206c1fed..42c4362b6e42 100644 --- a/scripts/ci/common-jobs.ts +++ b/scripts/ci/common-jobs.ts @@ -11,6 +11,7 @@ import { git, node, npm, + playwright, server, testResults, verdaccio, @@ -273,6 +274,7 @@ export const testsStories_linux = defineJob( }, steps: [ ...workflow.restoreLinux(), + playwright.install('code'), { run: { name: 'Run stories tests', @@ -309,6 +311,7 @@ export const testUnit_windows = defineJob( name: 'Install dependencies', }, }, + playwright.install(`${WINDOWS_ROOT_DIR}\\${WORKING_DIR}`, true), { run: { command: diff --git a/scripts/ci/sandboxes.ts b/scripts/ci/sandboxes.ts index fc1ebec3fbb0..6af1d38613f0 100644 --- a/scripts/ci/sandboxes.ts +++ b/scripts/ci/sandboxes.ts @@ -7,6 +7,7 @@ import { CACHE_KEYS, artifact, cache, + playwright, server, testResults, toId, @@ -18,12 +19,12 @@ import { defineJob, defineNoOpJob, isWorkflowOrAbove } from './utils/types'; import type { JobOrNoOpJob, Workflow } from './utils/types'; function defineSandboxJob_build({ - directory, + id, name, template, requires, }: { - directory: string; + id: string; name: string; requires: JobOrNoOpJob[]; template: string; @@ -43,19 +44,21 @@ function defineSandboxJob_build({ command: `yarn task build --template ${template} --no-link -s build`, }, }, - workspace.persist([`${SANDBOX_DIR}/${directory}/storybook-static`]), + workspace.persist([`${SANDBOX_DIR}/${id}/storybook-static`]), ], }), requires ); } function defineSandboxJob_dev({ + id, name, template, requires, options, }: { name: string; + id: string; requires: JobOrNoOpJob[]; template: string; options: { @@ -78,6 +81,7 @@ function defineSandboxJob_dev({ ...workflow.restoreLinux(), ...(options.e2e ? [ + playwright.install(`${SANDBOX_DIR}/${id}`), { run: { name: 'Run storybook', @@ -124,8 +128,6 @@ export function defineSandboxFlow(key: Key) { const data = sandboxTemplates.allTemplates[key as keyof typeof sandboxTemplates.allTemplates]; const { skipTasks = [], name } = data; - const path = key.replace('/', '-'); - const createJob = defineJob( `${name} (create)`, () => ({ @@ -206,12 +208,13 @@ export function defineSandboxFlow(key: Key) { const buildJob = defineSandboxJob_build({ name: `${name} (build)`, template: key, - directory: id, + id, requires: [createJob], }); const devJob = defineSandboxJob_dev({ name: `${name} (dev)`, template: key, + id, requires: [createJob], options: { e2e: !skipTasks?.includes('e2e-tests-dev') }, }); @@ -255,6 +258,7 @@ export function defineSandboxFlow(key: Key) { }, steps: [ ...workflow.restoreLinux(), + playwright.install(`${SANDBOX_DIR}/${id}`), { run: { name: 'Running Vitest', @@ -275,6 +279,7 @@ export function defineSandboxFlow(key: Key) { }, steps: [ ...workflow.restoreLinux(), + playwright.install(`${SANDBOX_DIR}/${id}`), { run: { name: 'Serve storybook', @@ -311,6 +316,7 @@ export function defineSandboxFlow(key: Key) { }, steps: [ ...workflow.restoreLinux(), + playwright.install(`${SANDBOX_DIR}/${id}`), { run: { name: 'Running test-runner', @@ -345,7 +351,7 @@ export function defineSandboxFlow(key: Key) { ].filter(Boolean); return { name: key, - path, + id, jobs, }; } @@ -360,6 +366,7 @@ export function defineSandboxTestRunner(sandbox: ReturnType { + return { + run: { + name: 'Install Playwright', + working_directory, + ...(isOnWindows ? { shell: 'powershell.exe' } : {}), + command: 'npx playwright install chromium --with-deps', + }, + }; + }, +}; + export const npm = { installScripts: () => { return { From 6bfaf84e21edaf7b02edc58cccf5ca5e3382a490 Mon Sep 17 00:00:00 2001 From: yannbf Date: Fri, 13 Mar 2026 12:10:06 +0100 Subject: [PATCH 5/7] Revert "Use Playwright with Node.js v22" This reverts commit 080ef08fb87868c45f0c83128af5bc5b6c014248. --- scripts/ci/common-jobs.ts | 3 --- scripts/ci/sandboxes.ts | 41 +++++++++++++++++++---------------- scripts/ci/test-storybooks.ts | 4 +--- scripts/ci/utils/executors.ts | 2 +- scripts/ci/utils/helpers.ts | 13 ----------- 5 files changed, 24 insertions(+), 39 deletions(-) diff --git a/scripts/ci/common-jobs.ts b/scripts/ci/common-jobs.ts index 42c4362b6e42..a294206c1fed 100644 --- a/scripts/ci/common-jobs.ts +++ b/scripts/ci/common-jobs.ts @@ -11,7 +11,6 @@ import { git, node, npm, - playwright, server, testResults, verdaccio, @@ -274,7 +273,6 @@ export const testsStories_linux = defineJob( }, steps: [ ...workflow.restoreLinux(), - playwright.install('code'), { run: { name: 'Run stories tests', @@ -311,7 +309,6 @@ export const testUnit_windows = defineJob( name: 'Install dependencies', }, }, - playwright.install(`${WINDOWS_ROOT_DIR}\\${WORKING_DIR}`, true), { run: { command: diff --git a/scripts/ci/sandboxes.ts b/scripts/ci/sandboxes.ts index 6af1d38613f0..fc1ebec3fbb0 100644 --- a/scripts/ci/sandboxes.ts +++ b/scripts/ci/sandboxes.ts @@ -7,7 +7,6 @@ import { CACHE_KEYS, artifact, cache, - playwright, server, testResults, toId, @@ -19,12 +18,12 @@ import { defineJob, defineNoOpJob, isWorkflowOrAbove } from './utils/types'; import type { JobOrNoOpJob, Workflow } from './utils/types'; function defineSandboxJob_build({ - id, + directory, name, template, requires, }: { - id: string; + directory: string; name: string; requires: JobOrNoOpJob[]; template: string; @@ -44,21 +43,19 @@ function defineSandboxJob_build({ command: `yarn task build --template ${template} --no-link -s build`, }, }, - workspace.persist([`${SANDBOX_DIR}/${id}/storybook-static`]), + workspace.persist([`${SANDBOX_DIR}/${directory}/storybook-static`]), ], }), requires ); } function defineSandboxJob_dev({ - id, name, template, requires, options, }: { name: string; - id: string; requires: JobOrNoOpJob[]; template: string; options: { @@ -81,7 +78,6 @@ function defineSandboxJob_dev({ ...workflow.restoreLinux(), ...(options.e2e ? [ - playwright.install(`${SANDBOX_DIR}/${id}`), { run: { name: 'Run storybook', @@ -128,6 +124,8 @@ export function defineSandboxFlow(key: Key) { const data = sandboxTemplates.allTemplates[key as keyof typeof sandboxTemplates.allTemplates]; const { skipTasks = [], name } = data; + const path = key.replace('/', '-'); + const createJob = defineJob( `${name} (create)`, () => ({ @@ -208,13 +206,12 @@ export function defineSandboxFlow(key: Key) { const buildJob = defineSandboxJob_build({ name: `${name} (build)`, template: key, - id, + directory: id, requires: [createJob], }); const devJob = defineSandboxJob_dev({ name: `${name} (dev)`, template: key, - id, requires: [createJob], options: { e2e: !skipTasks?.includes('e2e-tests-dev') }, }); @@ -258,7 +255,6 @@ export function defineSandboxFlow(key: Key) { }, steps: [ ...workflow.restoreLinux(), - playwright.install(`${SANDBOX_DIR}/${id}`), { run: { name: 'Running Vitest', @@ -279,7 +275,6 @@ export function defineSandboxFlow(key: Key) { }, steps: [ ...workflow.restoreLinux(), - playwright.install(`${SANDBOX_DIR}/${id}`), { run: { name: 'Serve storybook', @@ -316,7 +311,6 @@ export function defineSandboxFlow(key: Key) { }, steps: [ ...workflow.restoreLinux(), - playwright.install(`${SANDBOX_DIR}/${id}`), { run: { name: 'Running test-runner', @@ -351,7 +345,7 @@ export function defineSandboxFlow(key: Key) { ].filter(Boolean); return { name: key, - id, + path, jobs, }; } @@ -366,7 +360,6 @@ export function defineSandboxTestRunner(sandbox: ReturnType { - return { - run: { - name: 'Install Playwright', - working_directory, - ...(isOnWindows ? { shell: 'powershell.exe' } : {}), - command: 'npx playwright install chromium --with-deps', - }, - }; - }, -}; - export const npm = { installScripts: () => { return { From 85e4c9052ed3a9997662bb9c9a7577d33cae73e3 Mon Sep 17 00:00:00 2001 From: yannbf Date: Fri, 13 Mar 2026 12:11:11 +0100 Subject: [PATCH 6/7] Conditionally setup node installation in some sandbox jobs --- .../cli-storybook/src/sandbox-templates.ts | 10 ++++++++ scripts/ci/sandboxes.ts | 25 +++++++++++++++++++ 2 files changed, 35 insertions(+) diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index 82da38f4783b..68f1dd498635 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -96,6 +96,10 @@ export type Template = { editAddons?: (addons: string[]) => string[]; useCsfFactory?: boolean; }; + /** Additional CI steps in case this template has special needs during CI. */ + extraCiSteps?: { + useNode22?: boolean; + }; /** Additional options to pass to the initiate command when initializing Storybook. */ initOptions?: { builder?: SupportedBuilder; @@ -652,6 +656,9 @@ export const baseTemplates = { // extraDependencies: ['@standard-schema/spec@^1', '@angular/forms@next'], useCsfFactory: true, }, + extraCiSteps: { + useNode22: true, + }, expected: { framework: '@storybook/angular', renderer: '@storybook/angular', @@ -667,6 +674,9 @@ export const baseTemplates = { extraDependencies: ['@angular/forms@latest'], useCsfFactory: true, }, + extraCiSteps: { + useNode22: true, + }, expected: { framework: '@storybook/angular', renderer: '@storybook/angular', diff --git a/scripts/ci/sandboxes.ts b/scripts/ci/sandboxes.ts index fc1ebec3fbb0..36a89fd35fe6 100644 --- a/scripts/ci/sandboxes.ts +++ b/scripts/ci/sandboxes.ts @@ -1,6 +1,7 @@ import { join } from 'path'; import * as sandboxTemplates from '../../code/lib/cli-storybook/src/sandbox-templates'; +import { type TemplateKey } from '../../code/lib/cli-storybook/src/sandbox-templates'; import { build_linux } from './common-jobs'; import { LINUX_ROOT_DIR, SANDBOX_DIR, WINDOWS_ROOT_DIR, WORKING_DIR } from './utils/constants'; import { @@ -17,6 +18,22 @@ import { import { defineJob, defineNoOpJob, isWorkflowOrAbove } from './utils/types'; import type { JobOrNoOpJob, Workflow } from './utils/types'; +function getSandboxSetupSteps(template: string) { + const extraSteps = []; + const templateData = sandboxTemplates.allTemplates[template as TemplateKey]; + + if (templateData.extraCiSteps?.useNode22) { + extraSteps.push({ + 'node/install': { + 'install-yarn': true, + 'node-version': '22.22.1', + }, + }); + } + + return extraSteps; +} + function defineSandboxJob_build({ directory, name, @@ -36,6 +53,7 @@ function defineSandboxJob_build({ class: 'medium+', }, steps: [ + ...getSandboxSetupSteps(template), ...workflow.restoreLinux(), { run: { @@ -75,6 +93,7 @@ function defineSandboxJob_dev({ class: 'medium', }, steps: [ + ...getSandboxSetupSteps(template), ...workflow.restoreLinux(), ...(options.e2e ? [ @@ -134,6 +153,7 @@ export function defineSandboxFlow(key: Key) { class: 'large', }, steps: [ + ...getSandboxSetupSteps(key), ...workflow.restoreLinux(), verdaccio.start(), { @@ -223,6 +243,7 @@ export function defineSandboxFlow(key: Key) { class: 'medium', }, steps: [ + ...getSandboxSetupSteps(key), 'checkout', // we need the full git history for chromatic workspace.attach(), cache.attach(CACHE_KEYS()), @@ -254,6 +275,7 @@ export function defineSandboxFlow(key: Key) { class: 'medium', }, steps: [ + ...getSandboxSetupSteps(key), ...workflow.restoreLinux(), { run: { @@ -274,6 +296,7 @@ export function defineSandboxFlow(key: Key) { class: 'medium+', }, steps: [ + ...getSandboxSetupSteps(key), ...workflow.restoreLinux(), { run: { @@ -310,6 +333,7 @@ export function defineSandboxFlow(key: Key) { class: 'medium', }, steps: [ + ...getSandboxSetupSteps(key), ...workflow.restoreLinux(), { run: { @@ -359,6 +383,7 @@ export function defineSandboxTestRunner(sandbox: ReturnType Date: Fri, 13 Mar 2026 13:07:21 +0100 Subject: [PATCH 7/7] rename variable and add jsdocs --- code/lib/cli-storybook/src/sandbox-templates.ts | 7 ++++--- scripts/ci/sandboxes.ts | 3 ++- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index 68f1dd498635..b7338baad4bc 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -98,7 +98,8 @@ export type Template = { }; /** Additional CI steps in case this template has special needs during CI. */ extraCiSteps?: { - useNode22?: boolean; + // Some sandboxes (e.g. Angular) rely on Node 22.22.1 as minimum supported version and threfore it needs enforcing, even if the CI image comes with a different node version. + ensureMinNodeVersion?: boolean; }; /** Additional options to pass to the initiate command when initializing Storybook. */ initOptions?: { @@ -657,7 +658,7 @@ export const baseTemplates = { useCsfFactory: true, }, extraCiSteps: { - useNode22: true, + ensureMinNodeVersion: true, }, expected: { framework: '@storybook/angular', @@ -675,7 +676,7 @@ export const baseTemplates = { useCsfFactory: true, }, extraCiSteps: { - useNode22: true, + ensureMinNodeVersion: true, }, expected: { framework: '@storybook/angular', diff --git a/scripts/ci/sandboxes.ts b/scripts/ci/sandboxes.ts index 36a89fd35fe6..40dd08beec29 100644 --- a/scripts/ci/sandboxes.ts +++ b/scripts/ci/sandboxes.ts @@ -22,10 +22,11 @@ function getSandboxSetupSteps(template: string) { const extraSteps = []; const templateData = sandboxTemplates.allTemplates[template as TemplateKey]; - if (templateData.extraCiSteps?.useNode22) { + if (templateData.extraCiSteps?.ensureMinNodeVersion) { extraSteps.push({ 'node/install': { 'install-yarn': true, + // Currently using Node 22.22.1 as minimum supported version for Angular sandboxes 'node-version': '22.22.1', }, });