Search code examples
playwrightplaywright-trace-viewer

What is Timed Out event in timeline in Playwright Trace Viewer?

In report in Trace Viewer I can see in Timeline Bar some events under action timeline:

![enter image description here

What are those events and why it timed out?

In report HTML there a lot timeline events (only one is visible, or is overlapped by other)

<div class="timeline-lane timeline-bars">
   <div class="timeline-bar action browsercontext_newpage" title="118ms" style="left: 0px; width: 150.876px; top: 11px;"></div>
   <div class="timeline-bar action frame_goto selected" title="634ms" style="left: 160.165px; width: 813.25px; top: 11px;"></div>
   <div class="timeline-bar action frame_click" title="72ms" style="left: 1005.11px; width: 91.8509px; top: 11px;"></div>
   <div class="timeline-bar event frame_loadstate" title="Timed Out" style="left: 536.556px; width: 10px; top: 22px;"></div>
   <div class="timeline-bar event frame_loadstate" title="Timed Out" style="left: 536.67px; width: 1px; top: 22px;"></div>
   <div class="timeline-bar event frame_loadstate" title="Timed Out" style="left: 536.724px; width: 1px; top: 22px;"></div>
   <div class="timeline-bar event frame_loadstate" title="Timed Out" style="left: 537.191px; width: 1px; top: 22px;"></div>
   <div class="timeline-bar event frame_navigated" title="Timed Out" style="left: 537.523px; width: 1px; top: 22px;"></div>
   <div class="timeline-bar event frame_loadstate" title="Timed Out" style="left: 682.003px; width: 1px; top: 22px;"></div>
   <div class="timeline-bar event frame_loadstate" title="Timed Out" style="left: 972.887px; width: 1px; top: 22px;"></div>
</div>

I understand that this is due to some computation problem, when looking at the source code: https://github.com/microsoft/playwright/blob/93b791d3228a6b1a101dbf7a13af06e1f9298f6d/packages/trace-viewer/src/ui/timeline.tsx#L75

To obtain similar report just run simple test, with trace: "on" option:

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

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

  • Just bug: see here https://github.com/microsoft/playwright/issues/21255

    When you spot something like this fill issue on GitHub.