原创教程官方文档整理

Playwright Trace 排错：定位自动化为什么点错或没点到

本地 trace 与最小复现说明，能回到失败动作的页面状态。

适用场景录制本地演示页面的动作和 DOM 快照，用 trace.zip 检查定位器与等待条件，再写最小复现；附不访问真实网站的练习包。

来源 · JevLog 编辑部Intermediate15 分钟

开始阅读

录制本地演示页面的动作和 DOM 快照，用 trace.zip 检查定位器与等待条件，再写最小复现；附不访问真实网站的练习包。

来源 · JevLog 编辑部 · 本站原创

原文封面 · Microsoft Playwright

原文封面 · Microsoft Playwright

2026-10-02 新增：依据当前官方文档整理，附本站编写练习。未做真实服务调用；来源首次发布日期未确认。

背景 / 问题

最后一张截图说明不了前面发生了什么。Trace 将动作与页面状态放在时间线上，适合排错。它不是业务正确证明，也不是绕过权限的凭证。

准备与来源

Node.js、Playwright 和 Chromium。下载 trace-local-workshop.zip，包含本地 HTML 与脚本。
npm install playwright；npx playwright install chromium。命令会下载依赖，录制不访问真实网站。
官方文档
官方文档

JevLog 原创流程图，非产品截图或实测结果。

JevLog 原创流程图，非产品截图或实测结果。

操作步骤

1. 用最小页面固定复现

demo.html 只有 Prepare draft 按钮和结果区域，不发送数据。保持页面与脚本不变，先不混入登录状态、线上改版和复杂导航。

2. 给动作包一层 tracing

record.cjs 与 demo.html 同目录，运行 node record.cjs。finally 保存 trace，即使动作失败也尝试保留现场。本站提供练习代码，没有自动访问真实业务网站。

const { chromium } = require('playwright');
const path = require('node:path');
const { pathToFileURL } = require('node:url');
(async () => {
 const browser = await chromium.launch();
 const context = await browser.newContext();
 await context.tracing.start({screenshots:true, snapshots:true, sources:true});
 try {
  const page = await context.newPage();
  await page.goto(pathToFileURL(path.join(__dirname,'demo.html')).href);
  await page.getByRole('button',{name:'Prepare draft',exact:true}).click();
  await page.locator('#result').filter({hasText:'Draft ready'}).waitFor();
 } finally {
  await context.tracing.stop({path:'trace.zip'});
  await browser.close();
 }
})().catch(error => {console.error(error.message); process.exitCode=1;});

3. 沿失败动作查看 DOM

npx playwright show-trace trace.zip 本地打开。选动作，看前后快照、匹配的元素、遮挡和 iframe。不要先加固定 sleep 掩盖定位器不匹配；等待应针对具体结果元素或响应条件。

4. 授权页面再看网络

换自己有权操作的页面时，看请求状态、响应与前端错误。若 Jev 参与挑动作，只给有限允许列表，程序再校验定位器、对象和权限；trace 是证据，不能替代执行前检查。

5. 分享最小复现前检查内容

报告写版本、步骤、失败动作、预期与实际、最小 trace。录制可能含 DOM、网络、源码与个人资料，先用虚构或脱敏内容，保存在受控目录。context.tracing 不记录所有测试断言，需要断言的项目另用 Playwright Test 配置。

练习样例：下载 trace-local-workshop.zip，可在本地练习；非本站实测结果。

结果与注意