企业官网建设流程全解析

最近写了一篇playwright debug，感觉trace很好用。所以故意制造了三种失败：元素定位超时、接口返回 404、URL 断言错误。来看看 Trace Viewer 怎么帮我们定位问题。

1. 开启 Trace Viewer

设计的test cases

import{test,expect}from'@playwright/test';// 1. 正常搜索：查看 Actions 和 Snapshotstest('01 - Bing Search',async({page})=>{awaitpage.goto('https://www.bing.com/');awaitpage.locator('#sb_form_q').fill('Playwright');awaitpage.locator('#search_icon').click();awaitexpect(page).toHaveURL(/bing\.com\/search/);});// 2. 元素定位失败：查看 Call Logtest('02 - Locator Error',async({page})=>{awaitpage.goto('https://www.bing.com/');awaitpage.locator('#wrong-button').click({timeout:3000});});// 3. API 请求失败：查看 Networktest('03 - API Error',async({page})=>{awaitpage.goto('https://www.bing.com/');conststatus=awaitpage.evaluate(async()=>{constresponse=awaitfetch('/api/not-found-demo');returnresponse.status;});expect(status).toBe(200);});// 4. 断言失败：查看 Errors 和 Sourcetest('04 - Assertion Error',async({page})=>{awaitpage.goto('https://www.bing.com/');awaitpage.locator('#sb_form_q').fill('Playwright');awaitpage.locator('#search_icon').click();awaitexpect(page).toHaveURL('https://www.google.com/');});

以我的测试文件tests/demo/bing_trace.spec.ts为例：

npx playwrighttesttests/demo/bing_trace.spec.ts--project=chromium--traceon--workers=1npx playwright show-report

在 HTML 报告中打开对应测试的 Trace。这里用--trace on是为了演示，实际 CI 中通常不必每次都保留所有 Trace，可以按需配置。

2. Locator 找不到元素：先看 Log

先故意点击一个不存在的按钮：

test('02 - Locator Error',async({page})=>{awaitpage.goto('https://www.bing.com/');awaitpage.locator('#wrong-button').click({timeout:3000});});

测试失败后，在左侧Actions选中红色的Click，再看底部Log还有Errors：

waiting for locator('#wrong-button')

)

这说明 Playwright 一直在等待匹配该选择器的元素，并在 3 秒后超时。此时优先检查选择器和页面实际 DOM，而不是先把超时时间从 3 秒改成 30 秒。找错了元素，等再久也没用。

3. API 返回 404：直接看 Network

第二个测试通过浏览器页面发起一个请求：

test('03 - API Error',async({page})=>{awaitpage.goto('https://www.bing.com/');conststatus=awaitpage.evaluate(async()=>{constresponse=awaitfetch('/api/not-found-demo');returnresponse.status;});expect(status).toBe(200);});

这里的/api/not-found-demo是人为构造的不存在路径，不是 Bing 提供的真实 API。实际运行时，它返回了404，所以断言200失败。

打开 Trace Viewer 底部Network，可以直接看到：

• Bing 首页请求：GET，状态码200
• not-found-demo请求：GET，状态码404

这比只看Expected: 200 / Received: 404更直观：首页加载成功，不代表后续每个请求都成功。遇到接口相关问题，我会先看请求地址和状态码，再按需检查请求与响应详情。

4. URL 断言失败：对照 Actions 和 Errors

最后一个场景是正常搜索 Bing，却故意期待跳转到 Google：

test('04 - Assertion Error',async({page})=>{awaitpage.goto('https://www.bing.com/');awaitpage.locator('#sb_form_q').fill('Playwright');awaitpage.locator('#search_icon').click();awaitexpect(page).toHaveURL('https://www.google.com/');});

在Actions中能看到Fill → Click → Expect "toHaveURL"的执行顺序。底部Errors则显示：

Expected: https://www.google.com/ Received: https://www.bing.com/search?search=&q=Playwright&form=QBLH Timeout: 5000ms

这次搜索按钮确实触发了 Bing 搜索跳转，问题是断言预期本身写错了。遇到类似失败，可以切换Before / After查看页面快照，确认点击前后页面发生了什么；再对照 Errors 和 Source 定位代码。

5. 我的排查顺序

Trace Viewer 最实用的地方，不是功能有多全，而是能把操作过程、当时的页面、网络请求和报错放在一起看。测试失败时先找到证据，再决定改 Locator、改断言，还是检查服务端。

少一点靠猜的 Debug 的时间。好使。