chore: stabilize vrt in pipeline#2115
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces changes to stabilize visual regression tests in Playwright by forcing deterministic software rendering, limiting workers on CI to prevent CPU saturation, and managing animations during screenshot capture. The review feedback points out a critical issue where the newly added 5000ms timeout in waitForAllAnimationsToComplete will consistently trigger and fail tests if the page contains infinite animations (like loading spinners). It is recommended to filter out infinite animations from the check to ensure robust test execution.
| await this.page.waitForFunction( | ||
| count => window.document.getAnimations().length <= count, | ||
| threshold | ||
| threshold, | ||
| { timeout: 5000 } | ||
| ); |
There was a problem hiding this comment.
If the page contains any infinite animations (such as loading spinners, infinite progress bars, or animated icons), window.document.getAnimations() will always return a non-empty array. This will cause waitForAllAnimationsToComplete to consistently time out after 5000ms and fail the test.
To prevent this, we should filter out infinite animations (where iterations is Infinity) so that we only wait for finite transitions and animations to complete.
await this.page.waitForFunction(
count => window.document.getAnimations().filter(anim => {
const iterations = anim.effect?.getTiming().iterations;
return iterations !== Infinity;
}).length <= count,
threshold,
{ timeout: 5000 }
);…n examples The waitForAllAnimationsToComplete settle-wait polls until document.getAnimations() drains to zero, which never happens for examples with infinite CSS animations (loading spinner, shimmer/typing indicators), causing a 5s timeout and test failure in the VRT update job. Add an opt-in disableAnimations option to StaticTestOptions that disables CSS transitions/animations before the settle-wait so getAnimations() drains and the wait passes. Enable it on the affected examples.
Add a shared valueInputSize computed in SiFilteredSearchValueBase and bind it to the typeahead and free-text criterion inputs, so the editing input width tracks its value (min 20) instead of the browser default.
Add a 20ch min-inline-size to the search input so flex cannot collapse it to a sliver when criteria fill the row; overflow scrolling and freeTextFocus keep it visible.
- Remove --disable-gpu / --in-process-gpu from chromeLaunchOptions: these flags
switched rasterization from GPU to software rendering, invalidating every
baseline snapshot that predates the change (typography, markdown-renderer,
loading-button height diffs). The existing --disable-oop-rasterization and
workers:isCI?2:4 are sufficient to keep rendering deterministic.
- Guard filtered-search keystroke race: after typing 'annover' assert that the
Location combobox actually holds 'Hannover' before pressing Enter. Under CI
CPU contention keystrokes can be dropped, causing the snapshot to capture
a partial value ('Ha') and a layout shift of 2425px.
- Add disableAnimations:true to si-dashboard/si-value-widget static test: the
value widget has an infinite CSS animation that prevents
waitForAllAnimationsToComplete from settling, causing a 5 s TimeoutError.
… update workflow npx playwright test --update-snapshots=changed exits 1 whenever it detects and updates snapshot differences (the expected outcome of the VRT update job). With bash -e the subsequent archive/upload steps were silently skipped, so updated snapshots were never committed back. Add '|| true' to ignore the expected non-zero exit; only fail if no snapshots exist at all.
1 participant
Documentation.
Examples.
Dashboards Demo.
Playwright report.
Coverage Reports: