Playwright Trace Viewer时间线中Timed Out事件是什么及成因？

事件说明 #

在Trace Viewer的action timeline时间线中，主要包含两类事件：

• Action操作事件：对应测试中主动执行的步骤：
  • browsercontext_newpage：创建新浏览器页面，耗时118ms
  • frame_goto：导航至目标页面，耗时634ms（当前选中的时间线条目）
  • frame_click：点击页面元素，耗时72ms
• 状态事件：页面加载过程中的状态通知，此处显示为Timed Out的有：
  • frame_loadstate：页面加载状态检查（多条超时记录）
  • frame_navigated：页面导航完成事件

超时标记的原因 #

这些"Timed Out"标记并非测试执行时的真实超时错误，而是Trace Viewer前端渲染时的计算逻辑问题。当事件的结束时间被计算得早于开始时间时，可视化层会错误地将其标记为超时，属于显示层面的bug，不影响测试本身的执行结果。

复现步骤 #

在Playwright测试配置中开启trace: "on"选项，运行以下简单测试即可生成带有此类标记的Trace报告：

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('https://www.google.com');
  await page.getByRole('img', { name: 'Google' }).click();
});

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