[Question]: Screenshot without any platform. in screenshot name.

[StfBauer]

Your question

Whenever I compare screenshots it automatically adds the platform as well as browser.

Let's say I like to test the following:

• Chrome is the primary browser make a spec screenshot
  ? Does the Chrome Screenshot matches Chrome on Windows
  ? Does the Chrome Screenshot matches Firefox on Windows
  ? Does the Chrome Screenshot matches Webkit on Windows
  ? Does the Chrome Screenshot matches Chrome on Linux
  ? Does the Chrome Screenshot matches Firefox on Linux
  ? Does the Chrome Screenshot matches Webkit on Linux
  ? Does the Chrome Screenshot matches Chrome on MacOS
  ? Does the Chrome Screenshot matches Firefox on MacOS
  ? Does the Chrome Screenshot matches Webkit on MacOS

Right now when someone added the spec screenshot (--update-snapshots) on Windows a tester on MacOS gets a new set of Screenshots.

So the idea is to have one master screenshot per Test and compare all browsers against it.

Is this possible?

[yury-s]

It is not currently supported, the name of the snapshot is computed using a predefined algorithm. One possible workaround would be to copy the same snapshot to the corresponding files for other browsers/create symlinks.

[sievins]

@yury-s would you be up for adding support for this? Or considering a PR with this feature?

Including the process.platform in the test name means that none of our snapshots match when run in CI. Our CI platform is Linux whereas we all develop on Macs.

I guess this should be an optional feature, because snapshots might look different in different OS?

Without this feature Playwright is a non starter for our integration tests 😢.

[mxschmitt]

@sievins we have an open issue to enhance the experience for making cross-platform screenshots: #7439.

Using something like docker run -it -v $(pwd):/work/ mcr.microsoft.com/playwright:v1.12.3-focal --network host /bin/bash to run / update your screenshots might be the best workaround for now.

[sievins]

Thanks @mxschmitt, that's great news. The workaround works perfectly for now.

For those wanting to run their tests like this from a single command, without an interactive shell:

docker run -v $(pwd):/work/ mcr.microsoft.com/playwright:v1.12.3-focal bash -c 'cd work && npm run test'

[jeffersoneagley]

This appears to still be a problem, and every single machine on my team will register as a different environment. Frustrating.

[lukasholzer]

My workaround currently is to patch the package:

1. npm i -D patch-package
2. add post-install script in your package.json -> "postinstall": "patch-package",
3. remove the prefix in the node_modules node_modules/@playwright/test/lib/index.js should be around line 335.

-  _snapshotSuffix: [process.platform, {
+  _snapshotSuffix: ['',{
    scope: 'worker'
  }],

4. run npx patch-package @playwright/test

Checkin the created patch file and you are good to go!

NOTE: This is just a workaround until playwright is implementing the feature to unblock workflows.

[sfc-gh-rsavenok]

Instead of patching, you can set global beforeEach:

test.beforeEach(async ({}, testInfo) => {
  testInfo.snapshotSuffix = '';
});

But I think there's a bigger problem in the way toMatchSnapshot() API is designed. For image snapshots, you want to have platform suffix in the file name as there's a high chance that screenshot from linux will be different than screenshot on mac.

But what about text snapshots? We use text snapshots to serialize tables into custom .json format and to validate .csv files

I think .toMatchSnapshot() api should have more options to control file extension and name generation

[alexgolod]

Thanks to @sfc-gh-rsavenok dig a bit and came up with this:

test.beforeEach(async ({}, testInfo) => {
  testInfo.snapshotPath = (name: string) =>
    `${testInfo.file}-snapshots/${name}`;
});

So platform name also will be cut from filename