2026/9/17 11:13:53
FEATURED · 精选文章 
E2E 测试报告从没人打开到直接开修Playwright 报告重做 2 个专项测试实战【免费下载链接】notepad--一个支持windows/linux/mac的文本编辑器目标是做中国人自己的编辑器来自中国。项目地址: https://gitcode.com/GitHub_Trending/no/notepad--CI 一晚上跑完 200 条 Playwright 测试早上打开 E2E 测试报告你大概率和我一样扫一眼红绿数字然后关掉页面。报告没被看通常不是同事懒而是它压根没回答我接下来该干什么。这篇文章只讲三件事怎么把报告从陈列柜改成能直接分配的工单怎么把 Flaky 从失败堆里剥出来单独治理以及 Web3 钱包连接和链上交易这两个最容易翻车的场景怎么测才稳。CI 测试报告设计的第一刀把一行统计改成四态表格多数报告的头部长这样总数、通过数、失败数完事。问题出在失败这一个桶里至少混着两种完全不同的东西——一种是确定性失败页面真坏了另一种是时过时不过多半是网络抖动或等待不足。同事看到失败 12 条第一反应是有 12 个 bug 要修结果修到第三条发现一半是环境问题下次对这份报告的信任也就没了。所以头部统计必须把四种状态分开摆别偷懒状态含义看到它之后该干什么Total本轮总条数和上一版对比明显缩水说明用例被误删或批量跳过Passed稳定通过附占比扫一眼即可Failed确定性失败指向真实缺陷进缺陷队列当天认领Flaky时过时不过单列出来走隔离流程Skipped被条件跳过核对是不是覆盖率在悄悄缩水表格本身不新鲜新鲜的是 Flaky 单独占了一行。为什么这件事权重最高下面专门说。Flaky 单列是 flaky test 隔离能跑起来的前提说实话我最初也把 Flaky 混在失败里理由很朴素失败不就是失败吗。结果每次复盘失败列表一半时间在确认这条是真是假真正的新缺陷被噪音淹没没人愿意认领一个可能是 flaky的失败。单列之后变化发生在两个地方。第一Flaky 变成了一个独立的治理数字它在涨说明你的隔离手段——把反复失败的用例挪进隔离区、不阻塞主管线、定期复查——已经追不上新引入的不稳定用例了它在降说明隔离区的清理在起作用。第二Failed 桶变纯了剩下的每一条都值得当天处理。换句话说报告里的这个分桶本质上是给隔离治理开的接口你不先把它单列出来后面谈隔离区定期复查全是空中楼阁。失败用例四要素让每一条失败都能直接开工单 报告列失败用例时最没用的写法是用例名 一句断言报错。我现在的硬性规定是每个失败条目必须带四样东西位置文件和行号例如 tests/e2e/ 下的wallet.spec.ts:45。只给文件不给行号等于让人先重跑一遍定位错误信息保留断言原文能直接粘进工单标题截图路径相对路径指向 artifacts/ 里的失败现场例如artifacts/wallet-connect-123.png不用跑用例就能看到当时页面长什么样Recommended Fix一句话写最可能的原因比如选择器变了DOM 结构更新过。四样凑齐报告里的每个条目就是一张可以直接分配的工单接手的工程师不需要先复现一遍。两个常见坑别把整段堆栈塞进报告保留断言附近三五行加失败时的页面 URL 就够截图路径一定要写成相对路径CI 清完工作区之后图还能找得回来。产物归档定死目录截图、视频、Trace 各归各位报告会被关闭产物不能跟着被忘掉。我的目录约定很简单四类产物对应四个固定位置HTML 报告playwright-report/index.html给人看的入口截图artifacts/*.png每张和一条失败用例一一对应视频artifacts/videos/*.webm回放整个操作序列专治我本地明明没问题Traceartifacts/*.zip丢进 trace viewer 可以逐帧回放连网络请求和 DOM 变化都看得到。为什么写死因为工单里会说截图在 artifacts/xx.png目录要是随心情变这条信息第二天就废了。目录按用例名 时间戳生成两轮构建互不覆盖。另外 trace 平时别默认全开体积太吓人留给失败用例和专项场景就行。给钱包打桩Web3 钱包 mock 的 addInitScript 写法先说清这事为什么麻烦MetaMask 这类插件CI 环境里装不了你没法让一个无头浏览器真的弹出插件再点连接。解法是把钱包整个换掉——在页面里任何 JS 跑起来之前往window.ethereum上挂一个假实现应用检测到的就一直是这个假对象。Playwright 里干这事靠 addInitScript 注入context.addInitScript给浏览器上下文注册一段脚本之后该上下文里每加载一个新文档这段脚本都会先于页面代码执行。时序上这意味着应用还没读window.ethereum你的假 Provider 已经坐在那了。test(连接钱包, async ({ page, context }) { // 先于页面脚本执行假 Provider 提前挂上 window.ethereum await context.addInitScript(() { window.ethereum { isMetaMask: true, request: async ({ method }) { // 只响应测试路径会用到的 method if (method eth_requestAccounts) return [0x1234567890123456789012345678901234567890] if (method eth_chainId) return 0x1 } } }) await page.goto(/) await page.locator([data-testidconnect-wallet]).click() // 只断言地址前缀不和完整地址绑死 await expect(page.locator([data-testidwallet-address])).toContainText(0x1234) })两个决策值得说透。第一mock 只实现了eth_requestAccounts和eth_chainId两个方法。多出来的方法就是多出来的维护成本测试路径用不到的接口一概不写写了就是伪造的契约哪天它和真插件行为不一致这种用例是最难排查的。第二断言只匹配0x1234这个前缀。返回的地址是写死的若断言把 42 位全写进去以后改 mock 地址就得满文件搜断言前缀弱匹配正好拆掉这层耦合。链上交易测试的三条保命规则 ⏳别笑我见过有人把真下单的 E2E 用例挂在生产环境上靠的是祈祷。链上交易测试的风险不在断言写没写对在于它真的会花钱。规则就三条第一生产环境直接跳过。一行test.skip把真金白银从测试变量里剔除省得哪天有人手滑改了环境变量就出事。第二先验证预览再点确认。金额填1.0本身不可怕可怕的是预览区算出来是 100预览断言过了再谈成交。第三给链上结果留足等待时间。交易确认要走链上流程节奏不由你的代码定默认超时大概率不够。用waitForResponse盯/api/trade返回 200显式给到 30 秒比无脑 sleep 强——后者只是让每条用例多花 30 秒前者等的是真实事件。test(下单成交, async ({ page }) { // 涉及真实资金的环境一律跳过 test.skip(process.env.NODE_ENV production, 生产环境跳过) await page.goto(/markets/test-market) await page.locator([data-testidposition-yes]).click() await page.locator([data-testidtrade-amount]).fill(1.0) // 先确认预览数量对得上再往下走 const preview page.locator([data-testidtrade-preview]) await expect(preview).toContainText(1.0) // 点确认后等接口真实返回链上确认慢超时给足 30 秒 await page.locator([data-testidconfirm-trade]).click() await page.waitForResponse( resp resp.url().includes(/api/trade) resp.status() 200, { timeout: 30000 } ) await expect(page.locator([data-testidtrade-success])).toBeVisible() })如果只能做一件事先把现有报告改成四态统计加四要素一个下午就够当天就能看到有人开始认领失败。然后把 Flaky 清单挪进隔离区定个每周清理的节奏钱包和链上这两个场景按上面的 mock 与跳过策略落下去再给 Playwright 测试加上失败必产截图和 trace的约定——到那一步这份报告才配当发布前的门禁而不是一堆没人看的红点。【免费下载链接】notepad--一个支持windows/linux/mac的文本编辑器目标是做中国人自己的编辑器来自中国。项目地址: https://gitcode.com/GitHub_Trending/no/notepad--创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
E2E 测试报告从“没人打开“到“直接开修“：Playwright 报告重做 + 2 个专项测试实战
E2E 测试报告从没人打开到直接开修Playwright 报告重做 2 个专项测试实战【免费下载链接】notepad--一个支持windows/linux/mac的文本编辑器目标是做中国人自己的编辑器来自中国。项目地址: https://gitcode.com/GitHub_Trending/no/notepad--CI 一晚上跑完 200 条 Playwright 测试早上打开 E2E 测试报告你大概率和我一样扫一眼红绿数字然后关掉页面。报告没被看通常不是同事懒而是它压根没回答我接下来该干什么。这篇文章只讲三件事怎么把报告从陈列柜改成能直接分配的工单怎么把 Flaky 从失败堆里剥出来单独治理以及 Web3 钱包连接和链上交易这两个最容易翻车的场景怎么测才稳。CI 测试报告设计的第一刀把一行统计改成四态表格多数报告的头部长这样总数、通过数、失败数完事。问题出在失败这一个桶里至少混着两种完全不同的东西——一种是确定性失败页面真坏了另一种是时过时不过多半是网络抖动或等待不足。同事看到失败 12 条第一反应是有 12 个 bug 要修结果修到第三条发现一半是环境问题下次对这份报告的信任也就没了。所以头部统计必须把四种状态分开摆别偷懒状态含义看到它之后该干什么Total本轮总条数和上一版对比明显缩水说明用例被误删或批量跳过Passed稳定通过附占比扫一眼即可Failed确定性失败指向真实缺陷进缺陷队列当天认领Flaky时过时不过单列出来走隔离流程Skipped被条件跳过核对是不是覆盖率在悄悄缩水表格本身不新鲜新鲜的是 Flaky 单独占了一行。为什么这件事权重最高下面专门说。Flaky 单列是 flaky test 隔离能跑起来的前提说实话我最初也把 Flaky 混在失败里理由很朴素失败不就是失败吗。结果每次复盘失败列表一半时间在确认这条是真是假真正的新缺陷被噪音淹没没人愿意认领一个可能是 flaky的失败。单列之后变化发生在两个地方。第一Flaky 变成了一个独立的治理数字它在涨说明你的隔离手段——把反复失败的用例挪进隔离区、不阻塞主管线、定期复查——已经追不上新引入的不稳定用例了它在降说明隔离区的清理在起作用。第二Failed 桶变纯了剩下的每一条都值得当天处理。换句话说报告里的这个分桶本质上是给隔离治理开的接口你不先把它单列出来后面谈隔离区定期复查全是空中楼阁。失败用例四要素让每一条失败都能直接开工单 报告列失败用例时最没用的写法是用例名 一句断言报错。我现在的硬性规定是每个失败条目必须带四样东西位置文件和行号例如 tests/e2e/ 下的wallet.spec.ts:45。只给文件不给行号等于让人先重跑一遍定位错误信息保留断言原文能直接粘进工单标题截图路径相对路径指向 artifacts/ 里的失败现场例如artifacts/wallet-connect-123.png不用跑用例就能看到当时页面长什么样Recommended Fix一句话写最可能的原因比如选择器变了DOM 结构更新过。四样凑齐报告里的每个条目就是一张可以直接分配的工单接手的工程师不需要先复现一遍。两个常见坑别把整段堆栈塞进报告保留断言附近三五行加失败时的页面 URL 就够截图路径一定要写成相对路径CI 清完工作区之后图还能找得回来。产物归档定死目录截图、视频、Trace 各归各位报告会被关闭产物不能跟着被忘掉。我的目录约定很简单四类产物对应四个固定位置HTML 报告playwright-report/index.html给人看的入口截图artifacts/*.png每张和一条失败用例一一对应视频artifacts/videos/*.webm回放整个操作序列专治我本地明明没问题Traceartifacts/*.zip丢进 trace viewer 可以逐帧回放连网络请求和 DOM 变化都看得到。为什么写死因为工单里会说截图在 artifacts/xx.png目录要是随心情变这条信息第二天就废了。目录按用例名 时间戳生成两轮构建互不覆盖。另外 trace 平时别默认全开体积太吓人留给失败用例和专项场景就行。给钱包打桩Web3 钱包 mock 的 addInitScript 写法先说清这事为什么麻烦MetaMask 这类插件CI 环境里装不了你没法让一个无头浏览器真的弹出插件再点连接。解法是把钱包整个换掉——在页面里任何 JS 跑起来之前往window.ethereum上挂一个假实现应用检测到的就一直是这个假对象。Playwright 里干这事靠 addInitScript 注入context.addInitScript给浏览器上下文注册一段脚本之后该上下文里每加载一个新文档这段脚本都会先于页面代码执行。时序上这意味着应用还没读window.ethereum你的假 Provider 已经坐在那了。test(连接钱包, async ({ page, context }) { // 先于页面脚本执行假 Provider 提前挂上 window.ethereum await context.addInitScript(() { window.ethereum { isMetaMask: true, request: async ({ method }) { // 只响应测试路径会用到的 method if (method eth_requestAccounts) return [0x1234567890123456789012345678901234567890] if (method eth_chainId) return 0x1 } } }) await page.goto(/) await page.locator([data-testidconnect-wallet]).click() // 只断言地址前缀不和完整地址绑死 await expect(page.locator([data-testidwallet-address])).toContainText(0x1234) })两个决策值得说透。第一mock 只实现了eth_requestAccounts和eth_chainId两个方法。多出来的方法就是多出来的维护成本测试路径用不到的接口一概不写写了就是伪造的契约哪天它和真插件行为不一致这种用例是最难排查的。第二断言只匹配0x1234这个前缀。返回的地址是写死的若断言把 42 位全写进去以后改 mock 地址就得满文件搜断言前缀弱匹配正好拆掉这层耦合。链上交易测试的三条保命规则 ⏳别笑我见过有人把真下单的 E2E 用例挂在生产环境上靠的是祈祷。链上交易测试的风险不在断言写没写对在于它真的会花钱。规则就三条第一生产环境直接跳过。一行test.skip把真金白银从测试变量里剔除省得哪天有人手滑改了环境变量就出事。第二先验证预览再点确认。金额填1.0本身不可怕可怕的是预览区算出来是 100预览断言过了再谈成交。第三给链上结果留足等待时间。交易确认要走链上流程节奏不由你的代码定默认超时大概率不够。用waitForResponse盯/api/trade返回 200显式给到 30 秒比无脑 sleep 强——后者只是让每条用例多花 30 秒前者等的是真实事件。test(下单成交, async ({ page }) { // 涉及真实资金的环境一律跳过 test.skip(process.env.NODE_ENV production, 生产环境跳过) await page.goto(/markets/test-market) await page.locator([data-testidposition-yes]).click() await page.locator([data-testidtrade-amount]).fill(1.0) // 先确认预览数量对得上再往下走 const preview page.locator([data-testidtrade-preview]) await expect(preview).toContainText(1.0) // 点确认后等接口真实返回链上确认慢超时给足 30 秒 await page.locator([data-testidconfirm-trade]).click() await page.waitForResponse( resp resp.url().includes(/api/trade) resp.status() 200, { timeout: 30000 } ) await expect(page.locator([data-testidtrade-success])).toBeVisible() })如果只能做一件事先把现有报告改成四态统计加四要素一个下午就够当天就能看到有人开始认领失败。然后把 Flaky 清单挪进隔离区定个每周清理的节奏钱包和链上这两个场景按上面的 mock 与跳过策略落下去再给 Playwright 测试加上失败必产截图和 trace的约定——到那一步这份报告才配当发布前的门禁而不是一堆没人看的红点。【免费下载链接】notepad--一个支持windows/linux/mac的文本编辑器目标是做中国人自己的编辑器来自中国。项目地址: https://gitcode.com/GitHub_Trending/no/notepad--创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
