Playwright Trace 录制调试

在 Playwright 中，将 trace 设置为 'on' 会开启录制功能，它会在每个测试中都完整记录 trace 信息（包括截图、网络请求、DOM 结构和控制台日志等）。

你可以通过以下几种主要方式来配置它：

方式一：在配置文件中全局开启（最推荐）

如果你使用的是 Playwright Test 框架，直接在 playwright.config.js（或 .ts）中配置 use 对象即可：

// playwright.config.js
const { defineConfig } = require('@playwright/test');

module.exports = defineConfig({
  use: {
    // 'on'：每个测试都录制 trace
    // 'retain-on-failure'：只有测试失败时才保留 trace（推荐生产环境用这个，省空间）
    trace: 'on',

    // 如果你想配合截图和录像，也可以在这里一起开启
    screenshot: 'on',
    video: 'on-first-retry',
  },
});

方式二：通过命令行临时开启

如果你平时不想开启，只想在某次跑测试时临时查看 trace，不需要改代码，直接在终端运行命令时加上 --trace 参数：

# 运行所有测试并开启 trace
npx playwright test --trace on

# 只运行某一个测试文件并开启 trace
npx playwright test myscript.spec.js --trace on

方式三：在纯脚本（脚本模式）中手动开启

如果你没有使用 Playwright 的测试运行器（Test Runner），而是写了一个独立的 JavaScript 脚本，你需要在创建 Browser Context 时手动启动和停止 trace：

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();

  // 1. 在 context 上开启追踪
  await context.tracing.start({ screenshots: true, snapshots: true });

  const page = await context.newPage();
  await page.goto('https://example.com');
  await page.click('text=More information...');

  // 2. 结束追踪并保存到指定文件
  await context.tracing.stop({ path: 'trace.zip' });

  await browser.close();
})();

💡 如何查看录制好的 Trace 文件？

测试运行结束后，Playwright 会生成一个 trace.zip 文件。查看它最简单、最快的方式是使用命令行：

npx playwright show-trace path/to/trace.zip

这会自动弹出一个本地浏览器窗口，让你像看电影、查代码一样逐帧分析测试的执行过程。