Skip to content

Conversation

dancormier
Copy link
Contributor

@dancormier dancormier commented Oct 3, 2025

I'm trying to validate (or invalidate) some theories on what tends to cause seemingly random visual regression test failures. If I narrow it down, expect this PR to become ready for review. For now, no need to review or merge.

Visual regression test runs

I tried running the tests locally to gauge flaky-ness. Out of 4 runs each, this branch had no failures while develop had 2. Small sample size but it's promising 🤞

Note

The runs for this branch do take ~10% longer. I think that's a fine trade-off if we gain stability. That said, I'd like to pick through these changes and see if I can narrow down what helps and what doesn't.

develop

~/Code/Stacks develop 05:43:53 PM
❯ time npm run test:visual -w packages/stacks-classic; tput bel

@stackoverflow/[email protected] test:visual
npm run test:visual:ci -- --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.mjs

@stackoverflow/[email protected] test:visual:ci
pwsh run-test-visual.ps1 npx web-test-runner --group=visual --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.mjs

Building docker image...
Running docker container...

lib/components/activity-indicator/activity-indicator.visual.test.ts:

❌ The browser was unable to create and start a test page after 60000ms. You can increase this timeout with the browserStartTimeout option. (failed on Firefox)

lib/components/anchor/anchor.visual.test.ts:

❌ The browser was unable to create and start a test page after 60000ms. You can increase this timeout with the browserStartTimeout option. (failed on Firefox)

lib/components/avatar/avatar.visual.test.ts:

❌ The browser was unable to create and start a test page after 60000ms. You can increase this timeout with the browserStartTimeout option. (failed on Firefox)

lib/components/award-bling/award-bling.visual.test.ts:

❌ The browser was unable to create and start a test page after 60000ms. You can increase this timeout with the browserStartTimeout option. (failed on Firefox)

lib/components/badge/badge.visual.test.ts:

❌ The browser was unable to create and start a test page after 60000ms. You can increase this timeout with the browserStartTimeout option. (failed on Firefox)

lib/components/banner/banner.visual.test.ts:

❌ The browser was unable to create and start a test page after 60000ms. You can increase this timeout with the browserStartTimeout option. (failed on Firefox)

lib/components/block-link/block-link.visual.test.ts:

❌ The browser was unable to create and start a test page after 60000ms. You can increase this timeout with the browserStartTimeout option. (failed on Firefox)

Chromium: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed
Firefox: |██████████████████████████████| 42/42 test files | 2636 passed, 0 failed
Webkit: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed

Error while running tests.

Exited with status code 1
npm error Lifecycle script test:visual:ci failed with error:
npm error code 1
npm error path /Users/dcormier/Code/Stacks/packages/stacks-classic
npm error workspace @stackoverflow/[email protected]
npm error location /Users/dcormier/Code/Stacks/packages/stacks-classic
npm error command failed
npm error command sh -c pwsh run-test-visual.ps1 npx web-test-runner --group=visual --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.mjs
npm error Lifecycle script test:visual failed with error:
npm error code 1
npm error path /Users/dcormier/Code/Stacks/packages/stacks-classic
npm error workspace @stackoverflow/[email protected]
npm error location /Users/dcormier/Code/Stacks/packages/stacks-classic
npm error command failed
npm error command sh -c npm run test:visual:ci -- --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.mjs
npm run test:visual -w packages/stacks-classic 1.41s user 1.88s system 1% cpu 2:50.45 total


~/Code/Stacks develop 2m 50s 05:46:47 PM
❯ time npm run test:visual -w packages/stacks-classic; tput bel

@stackoverflow/[email protected] test:visual
npm run test:visual:ci -- --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.mjs

@stackoverflow/[email protected] test:visual:ci
pwsh run-test-visual.ps1 npx web-test-runner --group=visual --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.mjs

Building docker image...
Running docker container...

Chromium: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed
Firefox: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed
Webkit: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed

Finished running tests in 146.4s, all tests passed! 🎉

Exited with status code 0
npm run test:visual -w packages/stacks-classic 1.07s user 1.80s system 1% cpu 2:31.52 total


~/Code/Stacks develop 06:09:11 PM
❯ time npm run test:visual -w packages/stacks-classic; tput bel

@stackoverflow/[email protected] test:visual
npm run test:visual:ci -- --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.mjs

@stackoverflow/[email protected] test:visual:ci
pwsh run-test-visual.ps1 npx web-test-runner --group=visual --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.mjs

Building docker image...
Running docker container...

lib/components/activity-indicator/activity-indicator.visual.test.ts:

❌ The browser was unable to create and start a test page after 60000ms. You can increase this timeout with the browserStartTimeout option. (failed on Firefox)

lib/components/anchor/anchor.visual.test.ts:

❌ The browser was unable to create and start a test page after 60000ms. You can increase this timeout with the browserStartTimeout option. (failed on Firefox)

lib/components/avatar/avatar.visual.test.ts:

❌ The browser was unable to create and start a test page after 60000ms. You can increase this timeout with the browserStartTimeout option. (failed on Firefox)

lib/components/award-bling/award-bling.visual.test.ts:

❌ The browser was unable to create and start a test page after 60000ms. You can increase this timeout with the browserStartTimeout option. (failed on Firefox)

lib/components/badge/badge.visual.test.ts:

❌ The browser was unable to create and start a test page after 60000ms. You can increase this timeout with the browserStartTimeout option. (failed on Firefox)

lib/components/banner/banner.visual.test.ts:

❌ The browser was unable to create and start a test page after 60000ms. You can increase this timeout with the browserStartTimeout option. (failed on Firefox)

lib/components/breadcrumbs/breadcrumbs.visual.test.ts:

❌ The browser was unable to create and start a test page after 60000ms. You can increase this timeout with the browserStartTimeout option. (failed on Firefox)

Chromium: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed
Firefox: |██████████████████████████████| 42/42 test files | 2660 passed, 0 failed
Webkit: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed

Error while running tests.

Exited with status code 1
npm error Lifecycle script test:visual:ci failed with error:
npm error code 1
npm error path /Users/dcormier/Code/Stacks/packages/stacks-classic
npm error workspace @stackoverflow/[email protected]
npm error location /Users/dcormier/Code/Stacks/packages/stacks-classic
npm error command failed
npm error command sh -c pwsh run-test-visual.ps1 npx web-test-runner --group=visual --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.mjs
npm error Lifecycle script test:visual failed with error:
npm error code 1
npm error path /Users/dcormier/Code/Stacks/packages/stacks-classic
npm error workspace @stackoverflow/[email protected]
npm error location /Users/dcormier/Code/Stacks/packages/stacks-classic
npm error command failed
npm error command sh -c npm run test:visual:ci -- --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.mjs
npm run test:visual -w packages/stacks-classic 1.46s user 1.84s system 1% cpu 2:52.82 total

This branch

~/Code/Stacks SPARK-52/improve-visual-regression-test-stability 05:39:11 PM
❯ time npm run test:visual -w packages/stacks-classic; tput bel

@stackoverflow/[email protected] test:visual
npm run test:visual:ci -- --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.mjs

@stackoverflow/[email protected] test:visual:ci
pwsh run-test-visual.ps1 npx web-test-runner --group=visual --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.mjs

Building docker image...
Running docker container...

Chromium: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed
Firefox: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed
Webkit: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed

Finished running tests in 181.4s, all tests passed! 🎉

Exited with status code 0
npm run test:visual -w packages/stacks-classic 1.40s user 2.20s system 1% cpu 3:14.30 total


~/Code/Stacks SPARK-52/improve-visual-regression-test-stability 05:55:08 PM
❯ time npm run test:visual -w packages/stacks-classic; tput bel

@stackoverflow/[email protected] test:visual
npm run test:visual:ci -- --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.mjs

@stackoverflow/[email protected] test:visual:ci
pwsh run-test-visual.ps1 npx web-test-runner --group=visual --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.mjs

Building docker image...
Running docker container...

Chromium: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed
Firefox: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed
Webkit: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed

Finished running tests in 179.4s, all tests passed! 🎉

Exited with status code 0
npm run test:visual -w packages/stacks-classic 1.06s user 1.82s system 1% cpu 3:04.52 total


~/Code/Stacks SPARK-52/improve-visual-regression-test-stability 3m 5s 05:58:23 PM
❯ time npm run test:visual -w packages/stacks-classic; tput bel

@stackoverflow/[email protected] test:visual
npm run test:visual:ci -- --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.mjs

@stackoverflow/[email protected] test:visual:ci
pwsh run-test-visual.ps1 npx web-test-runner --group=visual --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.mjs

Building docker image...
Running docker container...

Chromium: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed
Firefox: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed
Webkit: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed

Finished running tests in 180.1s, all tests passed! 🎉

Exited with status code 0
npm run test:visual -w packages/stacks-classic 1.09s user 1.88s system 1% cpu 3:05.48 total


~/Code/Stacks SPARK-52/improve-visual-regression-test-stability 06:13:59 PM
❯ time npm run test:visual -w packages/stacks-classic; tput bel

@stackoverflow/[email protected] test:visual
npm run test:visual:ci -- --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.mjs

@stackoverflow/[email protected] test:visual:ci
pwsh run-test-visual.ps1 npx web-test-runner --group=visual --config ./visual-runner/stacks-classic-runner-config/web-test-runner.config.mjs

Building docker image...
Running docker container...

Chromium: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed
Firefox: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed
Webkit: |██████████████████████████████| 42/42 test files | 3028 passed, 0 failed

Finished running tests in 181.7s, all tests passed! 🎉

Exited with status code 0
npm run test:visual -w packages/stacks-classic 1.03s user 1.89s system 1% cpu 3:07.30 total


Update Fri Oct 3, 2025 12:42pm ET: Two visual regression test workflow runs for this PR and still passing 😎

Update Fri Oct 3, 2025 2:11pm ET: Make that three.

Copy link

changeset-bot bot commented Oct 3, 2025

⚠️ No Changeset found

Latest commit: dfdde17

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

netlify bot commented Oct 3, 2025

Deploy Preview for stacks ready!

Name Link
🔨 Latest commit dfdde17
🔍 Latest deploy log https://app.netlify.com/projects/stacks/deploys/68dfd62d20d3e70008efb581
😎 Deploy Preview https://deploy-preview-1995--stacks.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant