[Chore] Stabilize VRT flakes, update snapshots and fix local mobile timeout by weronikaolejniczak · Pull Request #9795 · elastic/eui

weronikaolejniczak · 2026-07-09T16:29:46Z

Summary

Unskip flaky stories from [Chore] VRT fixes #9721 and stabilize them.
Fix local mobile timeout: run VRT against static Storybook build instead of dev server with HMR.
Update stories to have correct snapshots.
Skip behavioral-only story.
Add a new story.
Update baselines.

QA instructions for reviewer

Running VRT locally succeeds: yarn workspace @elastic/eui test-visual-regression (remember to turn on Docker)
After running CI at least 5 times, there are no flakes
- Build #1 🟢
- Build #2 🟢
- Build #3 🟢
- Build #4 🟢
- Build #5 🟢
- Build #6 🟢
Added/changes snapshots are correct: added, updated
Wiki is clear, not repetitive, not too verbose

snyk-io · 2026-07-09T16:30:08Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scan Engine	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

Copilot

Pull request overview

This PR focuses on reducing Visual Regression Testing (VRT) flakes in EUI by improving local VRT execution (static Storybook build instead of the HMR dev server), updating Storybook stories to be more VRT-stable/correctly captured, and documenting stable story authoring patterns.

Changes:

Switch local VRT to run against a served static Storybook build by default (with flags to opt out), plus add serve-storybook tooling (http-server).
Update multiple stories to improve VRT capture stability (portal selectors, play functions that wait for overlays, avoid fragment root clipping, reduce oversized datasets, etc.).
Expand VRT wiki docs with clearer local-running guidance, stability tips, and troubleshooting.

Reviewed changes

Copilot reviewed 24 out of 27 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
yarn.lock	Adds `http-server` dependency resolution for the new static Storybook serving script.
wiki/contributing-to-eui/testing/visual-regression-testing.md	Updates local VRT guidance, adds stable story authoring tips, and troubleshooting for local timeouts.
packages/eui/src/components/text_truncate/text_truncate.stories.tsx	Replaces fragment roots with a wrapper element to avoid VRT clipping.
packages/eui/src/components/spacer/spacer.stories.tsx	Replaces fragment decorator wrapper with an element to avoid VRT clipping.
packages/eui/src/components/popover/wrapping_popover.stories.tsx	Stabilizes popover VRT by waiting for visibility and forcing a post-font-load resize.
packages/eui/src/components/popover/popover.stories.tsx	Unskips popover playground in VRT and stabilizes it via play/waits + resize.
packages/eui/src/components/popover/popover_title.stories.tsx	Adds play wait to ensure popover is visible before capture.
packages/eui/src/components/popover/popover_footer.stories.tsx	Adds play wait to ensure popover is visible before capture.
packages/eui/src/components/panel/split_panel/split_panel_outer.stories.tsx	Replaces fragment root with wrapper element to avoid VRT clipping.
packages/eui/src/components/panel/panel.stories.tsx	Fixes overlapping panel positioning so the visual example actually overlaps (and is VRT-stable).
packages/eui/src/components/link/link.stories.tsx	Adds a VRT-only external link story.
packages/eui/src/components/header/header.stories.tsx	Adds a play wait to ensure portal popover content is present before snapshotting.
packages/eui/src/components/header/header_alert/header_alert.stories.tsx	Makes the popover example VRT-capturable via portal selector + play wait (and opens by default).
packages/eui/src/components/flyout/flyout.stories.tsx	Skips a behavior-only story in VRT to reduce flake risk.
packages/eui/src/components/expression/expression.stories.tsx	Replaces fragment root with wrapper element to avoid VRT clipping.
packages/eui/src/components/datagrid/data_grid_styles.stories.tsx	Unskips/adjusts datagrid VRT stories (e.g., `height="auto"`) and removes redundant play logic.
packages/eui/src/components/datagrid/controls/data_grid_toolbar.stories.tsx	Changes column selector to use portal selector instead of skipping.
packages/eui/src/components/context_menu/context_menu.stories.tsx	Adds play waits for popover-rendered stories to stabilize captures.
packages/eui/src/components/comment_list/comment_list.stories.tsx	Replaces remote avatar image with inline data URI for VRT determinism.
packages/eui/src/components/collapsible_nav/collapsible_nav.stories.tsx	Uses portal selector for correct VRT capture of portalled nav content.
packages/eui/src/components/code/code_block.stories.tsx	Unskips a previously skipped VRT story.
packages/eui/src/components/basic_table/basic_table.stories.tsx	Reduces table dataset size to avoid slow/oversized VRT screenshots (faker remains seeded).
packages/eui/src/components/badge/beta_badge/beta_badge.stories.tsx	Adjusts rendering to prevent VRT cropping without relying on alignment prop.
packages/eui/scripts/test-visual-regression.js	Adds static build/serve mode (default locally), Docker build-in-container logic, and CI-like serving to avoid `networkidle` stalls.
packages/eui/package.json	Adds `serve-storybook` script and `http-server` devDependency for static Storybook serving.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

elastic-vault-github-plugin-prod · 2026-07-15T20:12:33Z

41 visual difference(s) found - expand to review, then click Approve visual changes to update baselines

euibetabadge (2 differences)

Story	Before	After	Diff
playground `desktop`
playground `mobile`

euicomment (2 differences)

Story	Before	After	Diff
high contrast `desktop`
high contrast `mobile`

euiexpression (4 differences)

Story	Before	After	Diff
high contrast `desktop`
high contrast `mobile`
kitchen sink `desktop`
kitchen sink `mobile`

euiheader (3 differences)

Story	Before	After	Diff
popover example `desktop`
popover example `mobile`
playground `mobile`

euipanel (2 differences)

Story	Before	After	Diff
overlapping panels `desktop`
overlapping panels `mobile`

euispacer (2 differences)

Story	Before	After	Diff
playground `desktop`
playground `mobile`

euisplitpanel (2 differences)

Story	Before	After	Diff
high contrast `desktop`
high contrast `mobile`

euicollapsiblenav (2 differences)

Story	Before	After	Diff
playground `desktop`
playground `mobile`

euibasictable (18 differences)

Story	Before	After	Diff
dark mode `desktop`
dark mode `mobile`
expanded nested table without background `desktop`
expanded nested table without background `mobile`
expanded row `desktop`
expanded row `mobile`
high contrast `desktop`
high contrast mobile `mobile`
large expanded row `desktop`
large expanded row `mobile`
marked row `desktop`
marked row `mobile`
panelled `desktop`
panelled `mobile`
playground `desktop`
playground `mobile`
scrollable `desktop`
scrollable `mobile`

euitexttruncate (4 differences)

Story	Before	After	Diff
resize observer `desktop`
resize observer `mobile`
start end anchor for search `desktop`
start end anchor for search `mobile`

Copilot

Pull request overview

Copilot reviewed 25 out of 79 changed files in this pull request and generated 3 comments.

weronikaolejniczak · 2026-07-16T10:35:01Z

+      const { defaultView, fonts } = canvasElement.ownerDocument;
+      await fonts.ready;
+      defaultView?.dispatchEvent(new defaultView.Event('resize'));
+


document.fonts is supported in our controlled Storybook/Chromium env.

new defaultView.Event('resize') is guarded with an if block and doesn't fail either.

infra-vault-gh-plugin-prod · 2026-07-16T11:06:51Z

💚 Build Succeeded

Buildkite Build
Commit: d1655eb

History

💚 Build #7095 succeeded 5b53a83
💚 Build #7094 succeeded 5b53a83
💚 Build #7092 succeeded 5b53a83
💚 Build #7089 succeeded 5b53a83
💚 Build #7088 succeeded d6bdf0f
💚 Build #7086 succeeded a601c1a

cc @weronikaolejniczak

infra-vault-gh-plugin-prod · 2026-07-16T11:16:19Z

💚 Build Succeeded

Buildkite Build
Commit: d1655eb
Documentation website
Storybook
✅ Visual regression tests passed

History

💚 Build #4311 succeeded 5b53a83
💚 Build #4310 succeeded 5b53a83
💚 Build #4308 succeeded 5b53a83
💚 Build #4305 succeeded 5b53a83
💔 Build #4301 failed a601c1a
💚 Build #4298 succeeded 4b70d52

cc @weronikaolejniczak

weronikaolejniczak self-assigned this Jul 9, 2026

weronikaolejniczak added the infrastructure label Jul 9, 2026

weronikaolejniczak added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Jul 9, 2026

weronikaolejniczak force-pushed the chore/stabilize-vrt-flakes branch 5 times, most recently from 0dbdfd0 to e7f28cd Compare July 15, 2026 17:32

weronikaolejniczak requested a review from Copilot July 15, 2026 17:35

Copilot started reviewing on behalf of weronikaolejniczak July 15, 2026 17:35 View session

Copilot AI reviewed Jul 15, 2026

View reviewed changes

Comment thread packages/eui/scripts/test-visual-regression.js Outdated

elastic deleted a comment from elastic-vault-github-plugin-prod Bot Jul 15, 2026

weronikaolejniczak force-pushed the chore/stabilize-vrt-flakes branch from 4b70d52 to 2cf004b Compare July 15, 2026 19:25

weronikaolejniczak force-pushed the chore/stabilize-vrt-flakes branch from d6bdf0f to 5b53a83 Compare July 16, 2026 08:19

elastic deleted a comment from elastic-vault-github-plugin-prod Bot Jul 16, 2026

weronikaolejniczak requested a review from Copilot July 16, 2026 09:28

Copilot started reviewing on behalf of weronikaolejniczak July 16, 2026 09:28 View session

Copilot AI reviewed Jul 16, 2026

View reviewed changes

weronikaolejniczak added 3 commits July 16, 2026 12:54

chore(eui): use static build of Storybook for local VRT

81972d0

chore(eui): unskip flaky VRT stories

306887f

chore(eui): fix broken VRT snapshots

53cb38f

weronikaolejniczak and others added 12 commits July 16, 2026 12:54

chore(eui): stabilize popover

4f351a0

chore(eui): add a VRT-only External story to EuiLink

506d9f2

chore(eui): skip behavioral-only Flyout story

3106d1a

chore(wiki): add docs around authoring stable VRT stories

0022972

chore(eui): remove orphaned VRT snapshots

bee2324

chore(wiki): add a clear note about VRT in CI being preferred

aa52c6b

chore(eui): make EuiDataGrid Compact story deterministic cross-run

dd8056c

chore(eui): wait for code block to finish second load

0415751

chore(eui): wait for gridcells to render

9a27add

chore(eui): add VRT baseline screenshots

c23d500

chore(eui): update VRT baseline screenshots

4d0efdc

chore: address Copilot feedback

d1655eb

weronikaolejniczak force-pushed the chore/stabilize-vrt-flakes branch from eecb6fc to d1655eb Compare July 16, 2026 10:55

weronikaolejniczak marked this pull request as ready for review July 16, 2026 11:24

weronikaolejniczak requested a review from a team as a code owner July 16, 2026 11:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Chore] Stabilize VRT flakes, update snapshots and fix local mobile timeout#9795

[Chore] Stabilize VRT flakes, update snapshots and fix local mobile timeout#9795
weronikaolejniczak wants to merge 15 commits into
elastic:mainfrom
weronikaolejniczak:chore/stabilize-vrt-flakes

weronikaolejniczak commented Jul 9, 2026 •

edited

Loading

Uh oh!

snyk-io Bot commented Jul 9, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

elastic-vault-github-plugin-prod Bot commented Jul 15, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

weronikaolejniczak Jul 16, 2026

Uh oh!

Uh oh!

Uh oh!

infra-vault-gh-plugin-prod Bot commented Jul 16, 2026

Uh oh!

infra-vault-gh-plugin-prod Bot commented Jul 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

weronikaolejniczak commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

QA instructions for reviewer

Uh oh!

snyk-io Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

elastic-vault-github-plugin-prod Bot commented Jul 15, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

weronikaolejniczak Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

infra-vault-gh-plugin-prod Bot commented Jul 16, 2026

💚 Build Succeeded

History

Uh oh!

infra-vault-gh-plugin-prod Bot commented Jul 16, 2026

💚 Build Succeeded

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

weronikaolejniczak commented Jul 9, 2026 •

edited

Loading

snyk-io Bot commented Jul 9, 2026 •

edited

Loading