Skip to content

feat!: add screenshotDirectory config to browser.expect.toMatchScreenshot#10592

Merged
sheremet-va merged 4 commits into
vitest-dev:mainfrom
macarie:fix/screenshotdirectory-tomatchscreenshot-value
Jun 24, 2026
Merged

feat!: add screenshotDirectory config to browser.expect.toMatchScreenshot#10592
sheremet-va merged 4 commits into
vitest-dev:mainfrom
macarie:fix/screenshotdirectory-tomatchscreenshot-value

Conversation

@macarie

@macarie macarie commented Jun 13, 2026

Copy link
Copy Markdown
Member

Description

Resolves #9636

This could be a potentially breaking change (fix).

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

  • It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
  • Ideally, include a test that fails without this PR but passes with it.
  • Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.
  • Please check Allow edits by maintainers to make review process faster. Note that this option is not available for repositories that are owned by Github organizations.

Tests

  • Run the tests with pnpm test:ci.

Documentation

  • If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

  • Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

@macarie

macarie commented Jun 13, 2026

Copy link
Copy Markdown
Member Author

There are 2 issues here:

  1. screenshotDirectory is overloaded for 2 uses, the 1st being normal screenshots while the 2nd being visual regression test references.
  2. there's a broken "relativization" of the screenshotDirectory path

For screenshots, this option is described as:

/**
 * Directory where screenshots will be saved when page.screenshot() is called
 * If not set, all screenshots are saved to __screenshots__ directory in the same folder as the test file.
 * If this is set, it will be resolved relative to the project root.
 * @default __screenshots__
 */

While for the assertion it is described as as:

/**
 * The value provided to `browser.screenshotDirectory`,
 * if none is provided, its default value.
 */

They promise 2 different things to the user, while sharing the same value under the hood.

This, in combination with resolveScreenshotPath's default value (see below), made the reference path generation act like page.screenshot()'s even if not intended (and broken because of the relativization).

/**
 * Overrides default reference screenshot path.
 *
 * @default `${root}/${testFileDirectory}/${screenshotDirectory}/${testFileName}/${arg}-${browserName}-${platform}${ext}`
 */

On top of that, the broken relativization made it impossible for users to use absolute paths.

I'm still not sure if this is the best possible solution, but seems like a good middle ground without breaking too much existing behavior.

@macarie
macarie force-pushed the fix/screenshotdirectory-tomatchscreenshot-value branch from 236f231 to f97b5cd Compare June 23, 2026 08:00
@macarie macarie changed the title fix: pass screenshotDirectory value as-is to toMatchScreenshot path resolution feat!: add screenshotDirectory config to browser.expect.toMatchScreenshot Jun 23, 2026
@netlify

netlify Bot commented Jun 23, 2026

Copy link
Copy Markdown

Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 05e00c4
🔍 Latest deploy log https://app.netlify.com/projects/vitest-dev/deploys/6a3bc1684aa0b30008f0773d
😎 Deploy Preview https://deploy-preview-10592--vitest-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@macarie
macarie force-pushed the fix/screenshotdirectory-tomatchscreenshot-value branch from f97b5cd to 27c9f96 Compare June 23, 2026 08:21
@macarie
macarie marked this pull request as ready for review June 23, 2026 10:25
@macarie

macarie commented Jun 23, 2026

Copy link
Copy Markdown
Member Author

Added a new config value as suggested by @sheremet-va, which should solve this overlap.

*
* @default `__screenshots__`.
*/
screenshotDirectory?: string

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we use a different name?

sheremet-va
sheremet-va previously approved these changes Jun 23, 2026
@sheremet-va

Copy link
Copy Markdown
Member

This makes sense to me, but I think this should also be mentioned in the migration guide

@macarie
macarie force-pushed the fix/screenshotdirectory-tomatchscreenshot-value branch from 27c9f96 to 05e00c4 Compare June 24, 2026 11:37
@sheremet-va
sheremet-va merged commit a60ded0 into vitest-dev:main Jun 24, 2026
17 of 18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Setting browser.screenshotDirectory leads to two folders being created

2 participants