Playwright test afterEach but with a variable for certain tests

Question

Each test uses await expect(page).toHaveScreenshot();. I wouldn't want to do repetitions in every test.

test.afterEach(async ({ page }) => {
  await expect(page).toHaveScreenshot({mask: [] as Locator[] || null});
});

There is a problem. Some tests have dynamic elements that I need to hide. How do I provide an argument/value for { mask } to handle the first case in some tests?

I tried to give the { mask } a value but to no avail:

test('should open sender`s grid view', async ({ page }) => {
  // some code 
  {mask: value }
});

Answer 1

One possible approach is to use describe blocks that group the different maskings:

import {test} from "@playwright/test"; // ^1.30.0

test.describe("with empty mask", () => {
  test.afterEach(async ({page}) => {
    await expect(page).toHaveScreenshot({mask: []});
  });

  test("foo 1", async ({page}) => {
    // ...
  });

  test("foo 2", async ({page}) => {
    // ...
  });
});

test.describe("with p masked", () => {
  test.afterEach(async ({page}) => {
    await expect(page).toHaveScreenshot({
      mask: [page.locator("p")]
    });
  });

  test("bar 1", async ({page}) => {
    // ...
  });

  test("bar 2", async ({page}) => {
    // ...
  });
});

If you don't want the describe blocks, there's the more naive pattern of setting a shared variable among tests:

import {test} from "@playwright/test";

let mask = [];

test.afterEach(async ({page}) => {
  await expect(page).toHaveScreenshot({mask});
  mask = [];
});

test("foo 1", async ({page}) => {
  // ...
  mask = [page.locator("p"), page.locator("h1")];
});

test("foo 2", async ({page}) => {
  // ...
});

test("foo 3", async ({page}) => {
  // ...
  mask = [page.locator("p")];
});

test("foo 3", async ({page}) => {
  // ...
});

The mask = []; line ensures that the empty mask is the default value if a test hasn't overridden it.

Note that [] || null will never evaluate to null, even if the array is empty. If you want to provide null as the default value, replace all occurrences of let mask = [] and mask = [] with mask = null.