如何为Playwright的test.afterEach动态传入mask参数？

当你用test.afterEach统一做截图断言时，要给特定测试单独设置mask，可通过以下几种方式实现：

方法1：用测试注解传递Mask配置 #

在需要mask的测试里添加注解，然后在afterEach钩子中读取注解动态配置参数：

// 全局统一的afterEach截图钩子
test.afterEach(async ({ page }, testInfo) => {
  // 从当前测试的注解中筛选mask配置
  const maskAnnotation = testInfo.annotations.find(a => a.type === 'mask');
  const screenshotOptions = maskAnnotation 
    ? { mask: maskAnnotation.description.split(',') } 
    : {};

  await expect(page).toHaveScreenshot(screenshotOptions);
});

// 需要隐藏动态元素的测试用例
test('带动态时间戳的页面测试', async ({ page }) => {
  // 你的测试逻辑...
  
  // 添加mask注解，用逗号分隔需要隐藏的元素选择器
  test.info().annotations.push({
    type: 'mask',
    description: '[data-testid="timestamp"],[data-testid="user-online-count"]'
  });
});

// 普通测试用例无需额外配置
test('常规页面测试', async ({ page }) => {
  // 你的测试逻辑...
});

方法2：扩展测试套件，支持自定义Mask选项 #

通过test.extend扩展测试上下文，让测试用例可直接传入mask参数：

// 扩展测试套件，新增mask可选参数
const testWithMask = test.extend<{ mask?: ElementHandle[] | string[] }>({
  mask: [undefined, { option: true }] // 默认不设置mask
});

// 给扩展后的测试套件绑定全局afterEach钩子
testWithMask.afterEach(async ({ page, mask }) => {
  const screenshotOptions = mask ? { mask } : {};
  await expect(page).toHaveScreenshot(screenshotOptions);
});

// 需要mask的测试用例
testWithMask('带动态内容的页面测试', async ({ page, mask }, testInfo) => {
  // 获取需要隐藏的元素集合
  const dynamicElements = await page.locator('[data-testid="dynamic-item"]').all();
  // 给当前测试设置mask参数
  testInfo.project.use.mask = dynamicElements;

  // 你的测试逻辑...
});

// 普通测试用例直接使用扩展后的测试套件
testWithMask('常规页面测试', async ({ page }) => {
  // 你的测试逻辑...
});

方法3：给测试上下文添加自定义属性 #

直接在测试用例中给page对象添加自定义属性，afterEach钩子读取该属性作为mask参数：

// 全局afterEach截图钩子
test.afterEach(async ({ page }) => {
  // 读取自定义的mask属性（用类型断言绕过TypeScript类型检查）
  const mask = (page as any)._screenshotMask;
  const screenshotOptions = mask ? { mask } : {};

  await expect(page).toHaveScreenshot(screenshotOptions);
});

// 需要mask的测试用例
test('带动态计数器的页面测试', async ({ page }) => {
  // 获取需要隐藏的元素
  const counterElement = await page.locator('[data-testid="live-counter"]');
  // 设置自定义属性存储mask元素
  (page as any)._screenshotMask = [counterElement];

  // 你的测试逻辑...
});

内容的提问来源于stack exchange，提问作者Chrystian C