Skip to content

[Bug]: snapshotPath yields different path than toMatchSnapshot/toHaveScreenshot #35669

@echocrow

Description

@echocrow

Version

1.51.1

Steps to reproduce

we'd like to implementing a workaround for #23502, something akin to this suggestion: check if a snapshot or screenshot exists; if so, expect it to match; if not, save it (optionally annotate, skip, log the test etc.).
however, the path returned by snapshotPath() seems to differ from the path used by toMatchSnapshot/toHaveScreenshot.

contrived example:

import path from 'node:path'

test('repro', async ({page}, testInfo) => {
  const name = 'my_name.png' // Underscore (`_`) is significant for repo.
  const options = {/*...*/}
  
  const snapPath = testInfo.snapshotPath(name)
  
  console.log(`Debug: Creating at ${snapPath}`)
  await page.screenshot({...options, path: snapPath})
  
  // This should always pass
  await expect(page).toHaveScreenshot(name, options)
})

Expected behavior

test passes

Actual behavior

test fails with Error: A snaoshot doesn't exist ...

Additional context

console log reviews different pats:

Debug: Creating at /path/to/snapDir/example.test.ts-snapshots/my_name-chrome-darwin.png

vs

Error: A snapshot doesn't exist at /path/to/snapDir/example.test.ts-snapshots/my-name-chrome-darwin.png.

specifically my_name-... vs my-name-...

diving into the source code, seems that SnapshotHelper (used by toMatchSnapshot() and toHaveScreenshot() pipes the name through sanitizeForFilePath from playwright-core/lib/utils, but snapshotPath() does not, resulting in this discrepancy.

Environment

System:
  OS: macOS 15.3.2
  CPU: (14) arm64 Apple M4 Pro
  Memory: 20.40 GB / 64.00 GB
Binaries:
  Node: 22.14.0 - ~/Library/pnpm/node
  npm: 10.9.2 - ~/Library/pnpm/npm
  pnpm: 10.7.1 - ~/Library/pnpm/pnpm
IDEs:
  VSCode: 1.99.3 - /opt/homebrew/bin/code
Languages:
  Bash: 3.2.57 - /bin/bash
npmPackages:
  @playwright/test: ^1.51.1 => 1.51.1
  playwright: ^1.51.1 => 1.51.1
  playwright-core: ^1.51.1 => 1.51.1

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions