Provide the ability to add global masked elements to takeAccessibleScreenshot

[Javi-er]

When taking snapshots, it would be useful to have a way to define global elements that should be masked on every single snapshots, for instance if you have a copyright notice in the footer, you'll want to mask the year so you don't have to update every single snapshot every year.

Maybe the list of global selectors to mask can be stored in a JSON file that's loaded at the beginning of takeAccessibleScreenshot, so these can be defined per project.

[deviantintegral]

Great idea. Feel free to work on it!

I would probably extend one of the types at https://github.com/Lullabot/playwright-drupal/blob/main/src/testcase/visualdiff.ts#L141. VisualDiffUrlConfig would be one set for all tests, but perhaps it would be OK or better to do it in VisualDiffGroup? Or all the layers, so you could specify masking at whatever level makes sense?

In your specific example, it may even be better to fix the time by mocking the date so you can still catch any visual regressions in rendering the date itself.

[m4olivei]

@deviantintegral when you suggest mocking the date, what do you have in mind? I've tried the following without success:

test.beforeEach(async ({ page }) => {
  await page.route('**/*', async route => {
    const response = await route.fetch();
    let body = await response.text();

    // Inject the mocked text into the span
    body = body.replace(
      /<span class="footer__copyright-year">.*?<\/span>/s,
      `<span class="footer__copyright-year">YEAR</span>`
    );

    await route.fulfill({
      response,
      body,
    });
  })
});

[deviantintegral]

I was thinking of doing it from the Drupal side. The date / time service could be swapped, or one of the formatter classes or functions could be replaced? In fact, I think the project you're on already has a module that does that?

However, your example should work too: https://playwright.dev/docs/api/class-page#page-route

It may be worth confirming that outside of a visual diff test. It wouldn't surprise me if something in https://github.com/Lullabot/playwright-drupal/blob/main/src/testcase/visualdiff.ts#L63-L108 makes your example above not work as expected.

[m4olivei]

I'm not sure what caused it to not work, but I ended up doing something Drupal side. There was already precedent for checking a cookie / header for if we were running in a Playwright test to use a mock. Using that approach.

Thanks!