Build: Use Playwright setup project for Storybook readiness

[kasperpeulen]

Closes #

What I did

Moved Storybook readiness for Playwright browser tasks into a dedicated Playwright setup project. The setup test waits for /index.json to expose example-button--primary, opens that route, verifies the manager has selected the story, and then waits for the preview to settle before the rest of the Playwright suite runs.

This keeps the readiness check inside Playwright instead of mixing task-level waits with a separate browser bootstrap path.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

Caution

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

1. Run nx run vue3-vite/default-ts:e2e-tests-dev:production.
2. Confirm Playwright runs the setup project first.
3. Confirm the setup test waits for /index.json, opens /?path=/story/example-button--primary, and only then starts the main browser tests.

I did not run this locally in this worktree because Yarn dependencies are not installed here.

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

[coderabbitai]

📝 Walkthrough

Walkthrough

Introduces a Playwright e2e setup module that waits for Storybook server readiness by polling /index.json for story availability, then verifies navigation and page load before tests run. Updates Playwright configuration to register and apply this setup project.

Changes

Cohort / File(s)	Summary
Storybook E2E Setup code/e2e-tests/storybook.setup.ts	New Playwright setup module that polls Storybook /index.json endpoint with configurable timeout, waits for example-button--primary story availability, navigates to the story, verifies navigation and story visibility, and invokes page load completion check.
Playwright Configuration code/playwright.config.ts	Registers new "setup" project with testMatch pattern for .setup.ts files and declares dependency from Chromium project to execute setup tests before main test suite.

Sequence Diagram(s)

sequenceDiagram
    participant Test Setup as Playwright<br/>Setup
    participant Storybook as Storybook<br/>Server
    participant Page as Browser<br/>Page
    participant Navigation as Stories<br/>Navigation

    Test Setup->>Test Setup: Read STORYBOOK_URL & timeout
    loop Poll until ready or timeout
        Test Setup->>Storybook: GET /index.json
        Storybook-->>Test Setup: Check for example-button--primary
    end
    Test Setup->>Page: Navigate to story URL
    Test Setup->>Navigation: Locate navigation element
    Test Setup->>Navigation: Locate selected story
    Test Setup->>Page: Verify navigation visibility
    Test Setup->>Page: Verify story visibility
    Test Setup->>Page: waitUntilLoaded()
    Page-->>Test Setup: Ready for tests

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Build: Wait for composed Storybooks to load before continuing E2E test #33278: Adds explicit Storybook load-time checks and readiness timeouts in e2e test composition, complementing this PR's dedicated setup/wait infrastructure for test initialization.

📝 Coding Plan

• Generate coding plan for human review comments

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

code/e2e-tests/storybook.setup.ts (1)

7-8: Extract the story id into one constant to prevent selector/assert drift.

example-button--primary is duplicated across URL, poll assertion, and locator filters; a single constant reduces maintenance mistakes.

Suggested refactor

 const STORYBOOK_READY_TIMEOUT = 200000;
+const READY_STORY_ID = 'example-button--primary';
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
-const storybookReadyPath = `${storybookUrl}/?path=/story/example-button--primary`;
+const storybookReadyPath = `${storybookUrl}/?path=/story/${READY_STORY_ID}`;
@@
-        return index?.entries?.['example-button--primary']?.id;
+        return index?.entries?.[READY_STORY_ID]?.id;
@@
-    .toBe('example-button--primary');
+    .toBe(READY_STORY_ID);
@@
   const selectedStory = storiesNavigation.locator(
-    '[data-item-id="example-button--primary"][data-selected="true"]'
+    `[data-item-id="${READY_STORY_ID}"][data-selected="true"]`
   );

Also applies to: 23-23, 31-31, 37-37

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@code/e2e-tests/storybook.setup.ts` around lines 7 - 8, Extract the story id
string ("example-button--primary") into a single constant (e.g., const STORY_ID
= 'example-button--primary') and use that constant everywhere the literal
appears instead of repeating it: build storybookReadyPath using STORY_ID
(replace storybookReadyPath), use STORY_ID in the poll/assert checks and in any
locator/filter selectors referenced in this file (where the literal is currently
duplicated). This ensures a single source of truth for the story id and prevents
selector/assert drift.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@code/e2e-tests/storybook.setup.ts`:
- Around line 7-8: Extract the story id string ("example-button--primary") into
a single constant (e.g., const STORY_ID = 'example-button--primary') and use
that constant everywhere the literal appears instead of repeating it: build
storybookReadyPath using STORY_ID (replace storybookReadyPath), use STORY_ID in
the poll/assert checks and in any locator/filter selectors referenced in this
file (where the literal is currently duplicated). This ensures a single source
of truth for the story id and prevents selector/assert drift.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f9e8b10d-198f-428d-b369-65796b5089c0

📥 Commits

Reviewing files that changed from the base of the PR and between 1210a3a and b914b13.

📒 Files selected for processing (2)

• code/e2e-tests/storybook.setup.ts
• code/playwright.config.ts