Skip to content

toMatchScreenshot produces two screenshots, one without browser information #9236

@ericbiewener

Description

@ericbiewener

Describe the bug

I'm using playwright as the provider, running in headless mode. I find that I'm getting two screenshots produced:

visual-regression/tests/__screenshots__/banner.visual.test.ts/Banner-Visual-Regression-should-match-baseline-screenshot-1-chromium-darwin.png
visual-regression/tests/__screenshots__/banner.visual.test.ts/Banner-Visual-Regression-should-match-baseline-screenshot-1.png

I don't want the additional screenshot (the one without the browser suffix) committed to github, so I'm using a negation in my gitignore:

visual-regression/**/*.png
!visual-regression/**/*chromium-darwin.png

Why does the other screenshot even exist? Can Vitest delete it, or generate it in a /tmp directory, or in the .vitest-attachements directory? It doesn't appear to exist when using the --update flag.

Image Image

Reproduction

Reproduction repo, the README has the instructions

System Info

System:
    OS: macOS 15.5
    CPU: (12) arm64 Apple M2 Max
    Memory: 250.09 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.12.0 - /Users/ebiewener/.nvm/versions/node/v22.12.0/bin/node
    Yarn: 1.22.22 - /Users/ebiewener/.nvm/versions/node/v22.12.0/bin/yarn
    npm: 10.9.0 - /Users/ebiewener/.nvm/versions/node/v22.12.0/bin/npm
    pnpm: 9.0.5 - /Users/ebiewener/.nvm/versions/node/v22.12.0/bin/pnpm
  Browsers:
    Chrome: 142.0.7444.226
    Chrome Canary: 145.0.7575.0
    Firefox: 143.0.4
    Safari: 26.1

Used Package Manager

npm

Validations

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions