[On Week] Replace Loki with Playwright-based approach and run in CI

[weronikaolejniczak]

Summary

• What: Replaced Loki with Playwright and run VRT in CI
• Why:
  • Closes https://github.com/elastic/eui-private/issues/601
  • Closes [EuiIconTip] The story for VRT test doesn't work as expected #9047
• How:
  • Replaced Loki with Playwright Test Runner and Jest Image Snapshot (uses the same diffing engine pixelmatch)
  • Reorganized the "deploy new docs" workflow to include Visual Regression Tests (I know they might seem to be better suited separately but to avoid significant changes, the current placement is acceptable)

Dynamic jobs

Now I know we might not typically want a dynamic job injection but because "building and deploying a website" is something completely independent from "building and deploying a Storybook", we might want to run both in parallel, have separate bash scripts for them AND it means we save some CI time:

API Changes

N/A

Screenshots

N/A

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

• 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
• 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
• 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
• 🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.

Impact level: 🟢 None

Release Readiness

• Documentation: {link to docs page(s)}
• Figma: {link to Figma or issue}
• Migration guide: {steps or link, for breaking/visual changes or deprecations}
• Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}

QA instructions for reviewer

• If there are new snapshots, a commit is added chore(eui): add VRT baseline screenshots
• If VRT is not failing, the whole pipeline passes and there are no GitHub comments made
• If VRT fails, the whole pipeline fails and there is a GitHub comment with a diff table
• When the blocked step to update VRT snapshots is approved, a commit is added chore(eui): update VRT baseline screenshots

Checklist before marking Ready for Review

• Filled out all sections above
• QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
• QA: Tested in CodeSandbox and Kibana
• QA: Tested docs changes
• Tests: Added/updated Jest, Cypress, and VRT
• Changelog: Added changelog entry
• Breaking changes: Added breaking change label (if applicable)

Reviewer checklist

• Approved Impact Assessment — Acceptable to merge given the consumer impact.
• Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 53ea1c0

History

• 💚 Build #6325 succeeded f0a2629
• 💚 Build #6321 succeeded c61a935
• 💚 Build #6267 succeeded d078451
• 💔 Build #6254 failed 1267344
• 💚 Build #6251 succeeded 0140de5

cc @weronikaolejniczak

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: f63a25f

History

• 💚 Build #6351 succeeded 53ea1c0
• 💚 Build #6325 succeeded f0a2629
• 💚 Build #6321 succeeded c61a935
• 💚 Build #6267 succeeded d078451
• 💔 Build #6254 failed 1267344

cc @weronikaolejniczak

[elasticmachine]

💔 Build Failed

• Buildkite Build
• Commit: f63a25f
• Documentation website
• Storybook
• ❌ Visual regression tests failed

Failed CI Steps

• 📷 Test visual regression
• 📢 Notify

History

• 💔 Build #3368 failed f63a25f
• 💔 Build #3367 failed ac0df3c
• 💔 Build #3364 failed 53ea1c0
• 💔 Build #3363 failed 52387c4
• 💔 Build #3329 failed f0a2629

cc @weronikaolejniczak