Skip to content

Screenshot filenames do not take instance names into account #10039

@craig-jennings

Description

@craig-jennings

Describe the bug

I'm using the visual regression testing feature, and I noticed that if I define two instances to test on, the screenshot names conflict and only one test succeeds. My use case is wanting to visually test a component at different breakpoints to verify the correct behavior.

Reproduction

Have a test setup that has two instances of the same browser but with different names/viewports:

instances: [
  {
    browser: 'chromium',
    name: 'chromium_mobile',
    viewport: { width: 480, height: 720 },
  },
  {
    browser: 'chromium',
    name: 'chromium_desktop',
    viewport: { width: 1920, height: 1080 },
  },
],

Run a test that contains the toMatchScreenshot() assertion. Notice that the first instance will succeed but the second will fail due to an unmatched screenshot. Only one screenshot file is created, named <test_name>-chromium-linux.png. I would have expected two screenshots to be created based on the name of the instance (e.g. <test_name>-chromium_mobile-linux.png).

System Info

System:
    OS: Linux 6.6 Ubuntu 24.04.4 LTS 24.04.4 LTS (Noble Numbat)
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
    Memory: 26.50 GB / 31.31 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 24.14.0 - /home/~/code/atlas-web/node_modules/.bin/node
    npm: 11.9.0 - /home/~/.local/share/pnpm/npm
    pnpm: 10.30.3 - /home/~/.local/share/pnpm/pnpm
    Deno: 2.7.10 - /home/~/.deno/bin/deno

Used Package Manager

pnpm

Validations

Metadata

Metadata

Assignees

Labels

feat: browserIssues and PRs related to the browser runnerp3-minor-bugAn edge case that only affects very specific usage (priority)

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions