[Feature]: Improve the usage of snapshotPathTemplate to screenshot() method.

[samixchoumi]

🚀 Feature Request

Actually snapshotPathTemplate config value seem not to work for .screenshot() method while it works fine for .toHaveScreenshot()

Example

For example, in my project I've this config :
snapshotPathTemplate: './fixtures/__screenshots__/${ environment }/{testFilePath}/{arg}{ext}',
On my test I just do

await expect(page, `Expected '${ pageWanted }' page to be compliant with '${ screenshotName }' screenshot`).toHaveScreenshot(screenshotName, { mask: locatorToExclude });

And I just need to put a screenshot name to make it works.
But if I want to generate a new screenshot for my test, do some action, and then assert screenshot, then I need to do like this :

const screenshotPath = './fixtures/__screenshots__/${environment}/tests/TestScenario.feature.spec.js/';
const screenshotName = 'temp-${ pageName.toLowerCase().replaceAll(' ', '-') }-screenshot.png';
await page.screenshot({
    path: screenshotPath + screenshotName,
    mask: locatorToExclude
  });

Instead of this current behavior, it could become something like that :

const screenshotName = 'temp-${ pageName }-screenshot.png';
await page.screenshot({ path: screenshotName, mask: locatorToExclude });

Motivation

It could be better to just use the snapshotPathTemplate for the .screenshot() method too so It will just need to set the screenshot name has we did for .toHaveScreenshot() method.

[mxschmitt]

page.screenshot is the low level version which toHaveScreenshot uses the under hood, hence it is not wired up to any of the test-runner options.

Have you tried toHaveScreenshot? Why does it not work for you?

Could you elaborate on your use-case? So you take a screenshot and place it into some directory which you'd like to follow the snapshotPathTemplate. How do you compare them / assert them?

[samixchoumi]

My use case is like this :

• I create a screenshot of the page (using screenshot() method)
• I do some action
• I assert the page don’t look as the screenshot (using not.toHaveScreenshot method)
• I do some other action
• I assert the page to look as the screenshot (using toHaveScreenshot method)

So using what I showed on my first post works but as I said, it could be better to have a way to use the same path.

To respond to your second question, it doesn’t work because when screenshot doesn’t exist, the test is marked as failing. With screenshot() method, it’s not the case.

[mxschmitt]

I don't think this is a use-case we support yet: Asserting against a screenshot which was just created.

In your case you workaround it by writing the expectation image to the file system first and then using toHaveScreenshot.

Do I understand it correctly that if we make it possible to allow asserting against a Buffer (return value of page.screenshot) toHaveScreenshot would simplify your scenario? This could allow something like this:

const beforeImage = await page.screenshot();
// actions
await expect(page).not.toHaveScreenshot(beforeImage);
// actions
await expect(page).toHaveScreenshot(beforeImage);

In the meantime Aria snapshots might work for your use-case: https://playwright.dev/docs/aria-snapshots

[samixchoumi]

Yes it seem that it could be another solution (if we don't want to use the snapshotPathTemplate) if it still allow us to mask some component, or better, to still use the current option.

I already looked at the aria-snapshot solution, it seem to be lot of works (as our page can change a lot after a deployment has been done) while the screenshot assertion is a lot easier and works with every executed pipeline without any conflict between other test/deployment done.