Playwright测试中重复截图问题的分析与解决方案

问题背景

在使用Playwright测试框架进行自动化测试时，开发人员发现当测试失败时，系统会生成重复的截图文件。具体表现为：在测试用例中手动创建了一个新页面(Page)对象，当测试失败时，HTML报告中会出现三个截图文件，而预期应该只有两个截图(每个页面各一个)。

问题复现

通过以下测试代码可以复现该问题：

import { expect, Page, test } from '@playwright/test';

test.describe('Suite', () => {
  let secondPage: Page;
  
  test.beforeAll(async ({ browser }) => {
    secondPage = await browser.newPage();
  });

  test.afterAll(async () => {
    await secondPage.close();
  });

  test('Should fail', async ({ page }) => {
    await secondPage.goto('https://playwright.dev/');
    await page.goto('https://www.google.com/');
    await expect(page.locator('[data-test="lol"]')).toBeVisible({ timeout: 1000 });
    await expect(secondPage.locator('[data-test="lol"]')).toBeVisible({ timeout: 1000 });
  });
});

问题原因分析

经过深入分析，发现这个问题与Playwright的截图机制和测试生命周期管理有关：

1. 截图触发机制：当配置screenshot: 'only-on-failure'时，Playwright会在测试失败时自动捕获每个页面的截图。

2. 页面关闭行为：Playwright会在每个页面关闭前捕获截图，作为一种预防措施，以防测试最终失败。

3. 测试生命周期：beforeAll和afterAll钩子函数的行为类似于测试用例，它们的错误会被归因于测试序列中的第一个或最后一个测试。

4. 双重捕获：在测试失败的情况下，系统会：

   • 首先在页面关闭时捕获截图
   • 然后在测试结束时再次捕获截图
   • 对于afterAll钩子，系统会额外捕获一次截图

解决方案

针对这个问题，可以考虑以下几种解决方案：

1. 调整测试结构：避免在测试中手动创建页面对象，尽量使用测试参数提供的页面对象。

2. 自定义截图逻辑：关闭自动截图功能，在关键位置手动添加截图逻辑。

3. 等待框架修复：Playwright团队可能会在后续版本中优化这一行为。

最佳实践建议

1. 对于简单的测试场景，优先使用测试参数提供的页面对象。

2. 如果确实需要创建额外的页面对象，考虑在测试用例内部创建和管理，而不是在beforeAll中创建。

3. 对于关键测试步骤，可以手动添加截图点，而不是完全依赖自动截图功能。

4. 定期检查测试报告中的截图文件，确保没有不必要的重复截图消耗存储空间。

总结

Playwright的自动截图功能虽然方便，但在特定场景下可能会出现重复截图的问题。理解其背后的工作机制有助于我们更好地组织测试代码，避免不必要的资源浪费。通过调整测试结构或采用自定义截图策略，可以有效解决这一问题。