[Chore] VRT fixes

[weronikaolejniczak]

Summary

Several issues after having merged #9594.

Still a couple of flakes

I think some of the flakes like EuiPopover Playground might be caused by font subpixel positioning and there's a Chromium flag to disable it: --disable-font-subpixel-positioning.

For now, I want to skip these flakes so that they are not blocking PRs:

• EuiPopover > Playground
• EuiDataGrid > Column selector (similar as ☝🏻)
• EuiDataGrid > Compact
• EuiCodeBlock > Virtualized code block scrolling

Lack of mobile snapshots

Turns out playwright.config.ts isn't picked up by the test-runner and is dead code but what's more curious is there's conditional logic for the viewport in the test runner. Not sure what I was thinking at the time.

Added an iteration through "variants". Called them generically because although it's only viewport for now, we may extend it (dark mode, high contrast mode etc.).

No add commit on failed VRT step

If the VRT step fails, we do not add chore(eui): add VRT baseline screenshots, we fold the new snapshots under chore(eui): update VRT baseline screenshots.

So PRs that mixed new stories with diffs on existing ones OR encountered flakes silently lost the new baselines (e.g. PaginationExample on #9726). Now we commit new baselines regardless of VRT outcome.

Cancel intermediate builds

You can read more about it here. The idea is to cancel the original build which keeps running in parallel and will e.g. comment stale visual diff.

QA instructions for reviewer

• VRT is ran both for desktop and mobile
• Wiki is clear and mentions: how it works in CI, running locally, skipping stories, adding variants
• VRT baselines for mobile are added
• Baselines are added regardless of success state
• Intermediate builds are cancelled
• After re-running the CI at least 5 times there are no flakes
• VRT can be ran locally and works as expected (e.g. there are no flakes)
• Skipping the whole story works: skip: true
• Skipping a variant works: skip: ['mobile']
• Scan all the snapshots and highlight anything that doesn't look correct, I'll fix it in a follow-up with the flakes

[Copilot]

Pull request overview

This PR updates EUI’s Storybook visual regression test runner to snapshot each story across multiple “variants” (currently desktop + mobile viewports), and documents how variant baselines are named and how to opt out per-story.

Changes:

• Run VRT screenshots in a loop over defined variants (desktop/mobile) and suffix baseline names with the variant (e.g. …-desktop.png, …-mobile.png).
• Remove packages/eui/playwright.config.ts, which is not used by the current test-storybook-based VRT runner.
• Expand the VRT wiki docs with variant behavior and parameters.vrt.skipVariants.

Reviewed changes

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

File	Description
wiki/contributing-to-eui/testing/visual-regression-testing.md	Documents variant baselines and how to skip variants per story
packages/eui/playwright.config.ts	Removes unused Playwright config file
packages/eui/.storybook/test-runner.ts	Implements per-variant viewport iteration and per-variant snapshot IDs

---

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

[elastic-vault-github-plugin-prod]

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

euicomment (1 difference)

Story	Before	After	Diff
high contrast desktop

euidatagrid (1 difference)

Story	Before	After	Diff
additional controls options desktop

[weronikaolejniczak]

buildkite test this 1 (after green)

[weronikaolejniczak]

buildkite test this 2 (after green)

[weronikaolejniczak]

buildkite test this 3 (after green)

[weronikaolejniczak]

buildkite test this 4 (after green)

[Copilot]

Copilot wasn't able to review this pull request because it exceeds the maximum number of files (300). Try reducing the number of changed files and requesting a review from Copilot again.

[mgadewoll]

Good thinking, this is much nicer 🎉

[mgadewoll]

❓ I understand that the purpose is to skip these stories for now and get back to them.
Do you think it's valid to add a comment stating this anyway according to our convention, or will this be done in the very near future and not meaningful anyway?

[weronikaolejniczak]

I don't think it's necessary because my plan is to immediately try to stabilize these after this PR is merged. So skips are temporary.

[elastic-vault-github-plugin-prod]

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

euisuperdatepicker (6 differences)

Story	Before	After	Diff
custom time zone display desktop
custom time zone display mobile
overflowing children desktop
overflowing children mobile
quick select only desktop
quick select only mobile

[elastic-vault-github-plugin-prod]

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

euisuperdatepicker (6 differences)

Story	Before	After	Diff
custom time zone display desktop
custom time zone display mobile
overflowing children desktop
overflowing children mobile
quick select only desktop
quick select only mobile

[infra-vault-gh-plugin-prod]

💚 Build Succeeded

• Buildkite Build
• Commit: 783af56

History

• 💚 Build #6928 succeeded 0a1b9d3
• 💚 Build #6927 succeeded 99e7186
• 💚 Build #6925 succeeded bbd9071
• 💚 Build #6912 succeeded abfa6b6
• 💚 Build #6911 succeeded abfa6b6
• 💚 Build #6910 succeeded abfa6b6

cc @weronikaolejniczak

[infra-vault-gh-plugin-prod]

💚 Build Succeeded

• Buildkite Build
• Commit: 783af56
• Documentation website
• Storybook
• ✅ Visual regression tests passed

History

• 💚 Build #4076 succeeded 0a1b9d3
• 💔 Build #4075 failed 99e7186
• 💔 Build #4073 failed bbd9071
• 💚 Build #4053 succeeded abfa6b6
• 💚 Build #4052 succeeded abfa6b6
• 💚 Build #4051 succeeded abfa6b6

cc @weronikaolejniczak