Playwright中能否修改toHaveScreenshot()的截图存储路径？

问题描述 #

使用toHaveScreenshot方法时，快照文件默认存放在测试文件同级目录下，能否修改其存储目录？

当前调用方式：

await expect( page ).toHaveScreenshot( 'image.png' );

实际生成的路径结构：

/dashboard
  /test.spec.ts-snapshots
    image.png
  test.spec.ts

期望的路径结构：

/dashboard
  /snapshots
    /test.spec.ts-snapshots
      image.png
  test.spec.ts

解决方案 #

当然可以修改，有两种常用方式：

1. 全局配置（推荐） #

通过Playwright的测试配置文件（如playwright.config.ts）中的snapshotDir参数，统一指定所有快照的根目录，自动保留原测试文件命名的子目录结构，无需修改测试用例代码。

配置示例：

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  // 其他配置项...
  snapshotDir: './snapshots', // 指定根目录为项目下的snapshots文件夹
  use: {
    // 其他使用配置...
  },
});

配置后重新运行测试，快照就会自动生成到你期望的路径下。

2. 单个快照自定义路径 #

如果需要针对特定快照单独设置路径，可以在调用toHaveScreenshot时传入path参数指定完整路径：

await expect(page).toHaveScreenshot({
  path: './snapshots/test.spec.ts-snapshots/image.png'
});

这种方式需要逐个修改测试用例，适合特殊场景，一般优先使用全局配置保持一致性。

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