E2E: add final "open modal" part of testing-module e2e to surface server-errors #33126

ndelangen · 2025-11-21T16:51:08Z

Closes #

What I did

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

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

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>

…and improve visibility checks for UI elements in e2e tests.

github-actions · 2025-11-21T16:51:32Z

	Fails
🚫	PR title must be in the format of "Area: Summary", With both Area and Summary starting with a capital letter Good examples: - "Docs: Describe Canvas Doc Block" - "Svelte: Support Svelte v4" Bad examples: - "add new api docs" - "fix: Svelte 4 support" - "Vue: improve docs"

Generated by 🚫 dangerJS against 4e32302

nx-cloud · 2025-11-21T16:53:23Z

View your CI Pipeline Execution ↗ for commit 4e32302

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	44s	View ↗

☁️ Nx Cloud last updated this comment at 2025-11-28 12:14:28 UTC

ndelangen · 2025-11-21T19:22:53Z

Well, isn't it nice to see that the test is flaking on this PR, and we actually see why?

@yannbf @valentinpalkovic

Full error:

Error: I THREW AN UNHANDLED ERROR!

This error originated in "/tmp/storybook/test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/UnhandledErrors.stories.tsx". It doesn't mean the error was thrown inside the file itself, but while it was running.

The latest test that might've caused the error is "Unhandled Error". It might mean one of the following:

The error was thrown, while Vitest was running this test.
If the error occurred after the test had been completed, this was the last documented test before it was thrown.
Stacks:

/tmp/storybook/test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/UnhandledErrors.stories.tsx:12:8 - throwError
/tmp/storybook/test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/UnhandledErrors.stories.tsx:8:2 - throwError
Error: 
    at throwError (http://localhost:63315/tmp/storybook/test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/UnhandledErrors.stories.tsx?import&browserv=1763744364193:10:9)
    at unhandledError (http://localhost:63315/tmp/storybook/test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/UnhandledErrors.stories.tsx?import&browserv=1763744364193:7:3)

Error: I THREW AN UNHANDLED REJECTION!

This error originated in "/tmp/storybook/test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/UnhandledErrors.stories.tsx". It doesn't mean the error was thrown inside the file itself, but while it was running.

The latest test that might've caused the error is "Success". It might mean one of the following:

The error was thrown, while Vitest was running this test.
If the error occurred after the test had been completed, this was the last documented test before it was thrown.
Stacks:

/tmp/storybook/test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/UnhandledErrors.stories.tsx:12:8 - throwError
/tmp/storybook/test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/UnhandledErrors.stories.tsx:4:2 - throwError
Error: 
    at throwError (http://localhost:63315/tmp/storybook/test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/UnhandledErrors.stories.tsx?import&browserv=1763744364193:10:9)
    at unhandledRejection (http://localhost:63315/tmp/storybook/test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/UnhandledErrors.stories.tsx?import&browserv=1763744364193:4:3)



Troubleshoot: [https://storybook.js.org/docs/writing-tests/integrations/vitest-addon/?renderer=react#what-happens-if-vitest-itself-has-an-error](link://https//storybook.js.org/docs/writing-tests/integrations/vitest-addon/?renderer=react#what-happens-if-vitest-itself-has-an-error)

… enhance error visibility during tests.

ndelangen · 2025-11-25T10:36:43Z

...-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/component-testing.spec.ts

+    try {
+      /** Sometimes the vitest instance fails, but the error-content is only shown in a modal.
+       * We click the link so the modal opens and we can close it.
+       * Having it open shortly is enough to have it be in the playwright trace, for debugging purposes.
+       */
+      const descriptionButton = page.locator("#testing-module-description a");
+      if (
+        await descriptionButton.isVisible({ timeout: 4000 }).catch(() => false)
+      ) {
+        await descriptionButton.click({ timeout: 4000, force: true });
+      }
+
+      await page.getByLabel("Close modal").click();


@valentinpalkovic Is this better?

storybook-app-bot · 2025-11-25T10:44:33Z

Package Benchmarks

^{Commit: 4e32302, ran on 28 November 2025 at 12:01:14 UTC}

No significant changes detected, all good. 👏

ndelangen · 2025-11-28T11:53:45Z

@yannbf @valentinpalkovic I've iterated a bit more, and i think this is now in a state, where it improves the debug-ability, and does not cause new issues.

Shall we merge this?

Enhance component testing: Add error handling for modal interactions …

b7d2c74

…and improve visibility checks for UI elements in e2e tests.

ndelangen requested review from valentinpalkovic and yannbf November 21, 2025 16:51

ndelangen self-assigned this Nov 21, 2025

ndelangen added build Internal-facing build tooling & test updates ci:normal addon: vitest labels Nov 21, 2025

ndelangen assigned valentinpalkovic Nov 24, 2025

Improve e2e component testing: Add handling for modal interactions to…

024565e

… enhance error visibility during tests.

ndelangen commented Nov 25, 2025

View reviewed changes

valentinpalkovic and others added 5 commits November 25, 2025 15:27

Merge branch 'next' into norbert/add-debug-for-e2e

a1c1be0

Merge branch 'next' into norbert/add-debug-for-e2e

a69d9c1

expire early, and only try close when modal was opened

7c93a23

Merge branch 'next' into norbert/add-debug-for-e2e

b32bb30

Add click action to close modal in component testing spec

d82560c

Merge branch 'next' into norbert/add-debug-for-e2e

4e32302

valentinpalkovic merged commit 33cc93d into next Dec 1, 2025
65 of 66 checks passed

valentinpalkovic deleted the norbert/add-debug-for-e2e branch December 1, 2025 13:46

github-actions bot mentioned this pull request Dec 1, 2025

Release: Prerelease alpha 10.2.0-alpha.2 #33214

Merged

18 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

E2E: add final "open modal" part of testing-module e2e to surface server-errors #33126

E2E: add final "open modal" part of testing-module e2e to surface server-errors #33126

Uh oh!

ndelangen commented Nov 21, 2025

Uh oh!

github-actions bot commented Nov 21, 2025 •

edited

Loading

Uh oh!

nx-cloud bot commented Nov 21, 2025 •

edited

Loading

Uh oh!

ndelangen commented Nov 21, 2025 •

edited

Loading

Uh oh!

ndelangen Nov 25, 2025

Uh oh!

storybook-app-bot bot commented Nov 25, 2025 •

edited

Loading

Uh oh!

ndelangen commented Nov 28, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

E2E: add final "open modal" part of testing-module e2e to surface server-errors #33126

E2E: add final "open modal" part of testing-module e2e to surface server-errors #33126

Uh oh!

Conversation

ndelangen commented Nov 21, 2025

What I did

Checklist for Contributors

Testing

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

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Uh oh!

github-actions bot commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nx-cloud bot commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ndelangen commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ndelangen Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

storybook-app-bot bot commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Package Benchmarks

Uh oh!

ndelangen commented Nov 28, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Nov 21, 2025 •

edited

Loading

nx-cloud bot commented Nov 21, 2025 •

edited

Loading

ndelangen commented Nov 21, 2025 •

edited

Loading

storybook-app-bot bot commented Nov 25, 2025 •

edited

Loading