[Bug]: Assertion toHaveScreenshot naming convetion

[joszo]

Version

1.41.1

Steps to reproduce

Sample test with problem example:

test('@screen Screenshot names can be misleading', async function ({ page }) {
  await page.goto('https://playwright.dev/');

  // When
  const logo = page.getByAltText('Playwright logo');

  await expect(logo).toBeVisible();

  // Each screenshot is generated as Kebab Case
  await expect.soft(logo).toHaveScreenshot('underscore_name.png');
  await expect.soft(logo).toHaveScreenshot('dash-name.png');

  // Expected to have 4 screenshots
  await expect.soft(logo).toHaveScreenshot('underscore-name.png');
  await expect.soft(logo).toHaveScreenshot('dash_name.png');
});

Expected behavior

Add in documentation information about conversion name to Kebab Case and best practices recommendation for naming convention. https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-screenshot-1

Actual behavior

In our case new college tried to update screenshot in repository with name from the code, so in pipelines we had failing runs.

local:

test.spec.ts-snapshots dash_name-darwin.png

pipelines dash_name-darwin.png dash-name-darwin.png -> generated

Error: A snapshot doesn't exist at .../test.spec.ts-snapshots/dash-name-Admin-darwin.png, writing actual.

It was hard to catch what happened. Because name of file was theoretically the same as in code, but not correct for snapshot assertion.

Additional context

No response

Environment

Sonoma Version 14.2.1 (23C71)

[abtuhin]

I am having this similar issue in jenkins pipeline, and indeed it was hard to debug as it was running in headless, following is my test code

test("should render server files successfully", async ({ page }) => { for (let i = 0; i < fileNames.length; i++) { const fileName = fileNames[i]; await page.goto(http://localhost:${APP_PORT}/test-cases?file=${fileName}); await page.waitForTimeout(500); await expect(page).toHaveScreenshot(${fileName}.png); // od2_tex.ext some-file } });