vitest/test/browser/specs/trace.test.ts

import type { BrowserTraceData, BrowserTraceEntry } from '../../../packages/browser/src/client/tester/trace'
import { stripVTControlCharacters } from 'node:util'
import { relative } from 'pathe'
import { expect, test } from 'vitest'
import { buildTestProjectTree } from '../../test-utils'
import { instances, provider, runBrowserTests } from './utils'

// update snapshots by
//   TEST_BROWSER=chromium pnpm -C test/browser/ test:playwright specs/trace.test.ts -u --run
// run fixture directly by
//   TEST_BROWSER=chromium pnpm -C test/browser/ test-fixtures --root fixtures/trace

test('trace view artifacts', async () => {
  const result = await runBrowserTests({
    root: './fixtures/trace',
  })
  const root = result.ctx!.config.root

  function formatLocation(location: BrowserTraceEntry['location']) {
    // columns can differ between browsers
    // return `${relative(root, location.file)}:${location.line}:${location.column}`
    return `${relative(root, location!.file)}:${location!.line}`
  }

  function formatEntry(raw: BrowserTraceEntry) {
    // snapshot only stable data.
    // other integration features need to be tested separately
    const result = {
      ...raw,
      range: raw.range ? { phase: raw.range.phase } : undefined,
      location: raw.location ? formatLocation(raw.location) : undefined,
      stack: undefined,
      startTime: undefined,
      duration: undefined,
      snapshot: {
        selectorResolution: raw.snapshot.selectorResolution,
        selectorError: raw.snapshot.selectorError,
      },
    }
    // remove noisy undefined properties
    for (const _key in result) {
      const key = _key as keyof typeof result
      if (result[key] === undefined) {
        delete result[key]
      }
      if (result[key] && typeof result[key] === 'object') {
        for (const subKey in result[key]) {
          if ((result as any)[key][subKey] === undefined) {
            delete (result as any)[key][subKey]
          }
        }
      }
    }
    return result
  }

  const projectErrorTree = buildTestProjectTree(result.results, (testCase) => {
    const result = testCase.result()
    return result.state === 'failed'
      ? result.errors.map(e => stripVTControlCharacters(e.message))
      : result.state
  })

  const projectArtifactTree = buildTestProjectTree(result.results, (testCase) => {
    const artifacts = testCase.artifacts()
    const traces = artifacts.map((artifact) => {
      if (artifact.type === 'internal:browserTrace') {
        const data = artifact.data as BrowserTraceData
        return {
          entries: data.entries.map(e => formatEntry(e)),
          ...(data.retry ? { retry: data.retry } : {}),
          ...(data.repeats ? { repeats: data.repeats } : {}),
        }
      }
      return artifact.type
    })
    return traces
  })

  for (const { browser } of instances) {
    expect.soft(projectErrorTree[browser], browser).toMatchInlineSnapshot(`
      {
        "exotic.test.ts": {
          "adopted stylesheets are not captured by snapshot alone": "passed",
          "canvas pixels are captured for replay": "passed",
          "custom element dom shape is rebuilt without runtime behavior": "passed",
          "shadow dom is rebuilt and highlightable by mirror id": "passed",
        },
        "expect.test.ts": {
          "click": "passed",
          "click fail": [
            "Click failed (normalized)",
          ],
          "expect.element fail": [
            "expect(element).toHaveTextContent()

      Expected element to have text content:
        World
      Received:
        Hello",
          ],
          "expect.element pass": "passed",
          "failure": [
            "Test failure",
          ],
        },
        "mark.test.ts": {
          "custom command": "passed",
          "helper": "passed",
          "kind": "passed",
          "locator.mark": "passed",
          "mark function": "passed",
          "mark function fail": [
            "Mark failure",
          ],
          "page.mark": "passed",
          "stack": "passed",
        },
        "resources.test.ts": {
          "external image remains url dependent": "passed",
          "same-origin image is inlined for offline replay": "passed",
        },
        "retry.test.ts": {
          "repeated retried tests": "passed",
          "repeated test": "passed",
          "repeated test retried on later repeat": "passed",
          "retried test": "passed",
        },
        "styles.test.ts": {
          "css url resources stay as urls": "passed",
          "external stylesheet remains url dependent": "passed",
          "font files remain url dependent": "passed",
          "inline styles": "passed",
          "same-origin link css is inlined": "passed",
          "snapshot-time pseudo-state styles": "passed",
          "style tag css is inlined": "passed",
        },
        "viewport.test.ts": {
          "document scroll is restored from trace metadata": "passed",
          "overflow element scroll is stored in snapshot payload": "passed",
          "viewport media query depends on replay viewport": "passed",
        },
      }
    `)
    if (provider.name === 'playwright') {
      expect.soft(projectArtifactTree[browser], browser).toMatchInlineSnapshot(`
        {
          "exotic.test.ts": {
            "adopted stylesheets are not captured by snapshot alone": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button')",
                      "selector": "internal:role=button",
                    },
                    "kind": "mark",
                    "location": "exotic.test.ts:54",
                    "name": "button rendered with adopted stylesheet",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "exotic.test.ts:47",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "canvas pixels are captured for replay": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByTestId('trace-canvas')",
                      "selector": "internal:testid=[data-testid="trace-canvas"s]",
                    },
                    "kind": "mark",
                    "location": "exotic.test.ts:17",
                    "name": "canvas drawn before mark",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "exotic.test.ts:11",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "custom element dom shape is rebuilt without runtime behavior": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button', { name: 'Custom element button' })",
                      "selector": "internal:role=button[name="Custom element button"s]",
                    },
                    "kind": "mark",
                    "location": "exotic.test.ts:43",
                    "name": "custom element rendered",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "exotic.test.ts:30",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "shadow dom is rebuilt and highlightable by mirror id": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button', { name: 'Shadow button' })",
                      "selector": "internal:role=button[name="Shadow button"s]",
                    },
                    "kind": "mark",
                    "location": "exotic.test.ts:26",
                    "name": "shadow button rendered",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "exotic.test.ts:20",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
          },
          "expect.test.ts": {
            "click": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button')",
                      "selector": "internal:role=button",
                    },
                    "kind": "action",
                    "location": "expect.test.ts:25",
                    "name": "vitest:click",
                    "range": {
                      "phase": "start",
                    },
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button')",
                      "selector": "internal:role=button",
                    },
                    "kind": "action",
                    "location": "expect.test.ts:25",
                    "name": "vitest:click",
                    "range": {
                      "phase": "end",
                    },
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                    "status": "pass",
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "expect.test.ts:23",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "click fail": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button', { name: 'Missing' })",
                      "selector": "internal:role=button[name="Missing"s]",
                    },
                    "kind": "action",
                    "location": "expect.test.ts:31",
                    "name": "vitest:click",
                    "range": {
                      "phase": "start",
                    },
                    "snapshot": {
                      "selectorResolution": "missing",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button', { name: 'Missing' })",
                      "selector": "internal:role=button[name="Missing"s]",
                    },
                    "kind": "action",
                    "location": "expect.test.ts:31",
                    "name": "vitest:click",
                    "range": {
                      "phase": "end",
                    },
                    "snapshot": {
                      "selectorResolution": "missing",
                    },
                    "status": "fail",
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "expect.test.ts:31",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "fail",
                  },
                ],
              },
            ],
            "expect.element fail": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button')",
                      "selector": "internal:role=button",
                    },
                    "kind": "expect",
                    "location": "expect.test.ts:15",
                    "name": "toHaveTextContent",
                    "range": {
                      "phase": "start",
                    },
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button')",
                      "selector": "internal:role=button",
                    },
                    "kind": "expect",
                    "location": "expect.test.ts:15",
                    "name": "toHaveTextContent [ERROR]",
                    "range": {
                      "phase": "end",
                    },
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                    "status": "fail",
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "expect.test.ts:15",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "fail",
                  },
                ],
              },
            ],
            "expect.element pass": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button')",
                      "selector": "internal:role=button",
                    },
                    "kind": "expect",
                    "location": "expect.test.ts:10",
                    "name": "toHaveTextContent",
                    "range": {
                      "phase": "start",
                    },
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button')",
                      "selector": "internal:role=button",
                    },
                    "kind": "expect",
                    "location": "expect.test.ts:10",
                    "name": "toHaveTextContent",
                    "range": {
                      "phase": "end",
                    },
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                    "status": "pass",
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "expect.test.ts:8",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "failure": [
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "expect.test.ts:20",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "fail",
                  },
                ],
              },
            ],
          },
          "mark.test.ts": {
            "custom command": [
              {
                "entries": [
                  {
                    "kind": "action",
                    "name": "from server command",
                    "snapshot": {},
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "mark.test.ts:48",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "helper": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button', { name: 'Hello', exact: false })",
                      "selector": "internal:role=button[name="Hello"i]",
                    },
                    "kind": "mark",
                    "location": "mark.test.ts:24",
                    "name": "render helper",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "mark.test.ts:23",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "kind": [
              {
                "entries": [
                  {
                    "kind": "action",
                    "location": "mark.test.ts:42",
                    "name": "action marker",
                    "snapshot": {},
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "expect",
                    "location": "mark.test.ts:43",
                    "name": "expect marker",
                    "snapshot": {},
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "mark.test.ts:44",
                    "name": "lifecycle group",
                    "snapshot": {},
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "mark",
                    "location": "mark.test.ts:45",
                    "name": "lifecycle group",
                    "snapshot": {},
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "mark.test.ts:39",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "locator.mark": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button')",
                      "selector": "internal:role=button",
                    },
                    "kind": "mark",
                    "location": "mark.test.ts:10",
                    "name": "button rendered - locator",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "mark.test.ts:8",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "mark function": [
              {
                "entries": [
                  {
                    "kind": "mark",
                    "location": "mark.test.ts:34",
                    "name": "render group",
                    "range": {
                      "phase": "start",
                    },
                    "snapshot": {},
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "mark",
                    "location": "mark.test.ts:34",
                    "name": "render group",
                    "range": {
                      "phase": "end",
                    },
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "mark.test.ts:33",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "mark function fail": [
              {
                "entries": [
                  {
                    "kind": "mark",
                    "location": "mark.test.ts:57",
                    "name": "failed render group",
                    "range": {
                      "phase": "start",
                    },
                    "snapshot": {},
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "mark",
                    "location": "mark.test.ts:57",
                    "name": "failed render group",
                    "range": {
                      "phase": "end",
                    },
                    "snapshot": {},
                    "status": "fail",
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "mark.test.ts:59",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "fail",
                  },
                ],
              },
            ],
            "page.mark": [
              {
                "entries": [
                  {
                    "kind": "mark",
                    "location": "mark.test.ts:15",
                    "name": "button rendered - page",
                    "snapshot": {},
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "mark.test.ts:13",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "stack": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button')",
                      "selector": "internal:role=button",
                    },
                    "kind": "mark",
                    "location": "mark.test.ts:29",
                    "name": "button rendered - stack",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "mark.test.ts:27",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
          },
          "resources.test.ts": {
            "external image remains url dependent": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByAltText('external trace asset')",
                      "selector": "internal:attr=[alt="external trace asset"s]",
                    },
                    "kind": "mark",
                    "location": "resources.test.ts:20",
                    "name": "image rendered from external url",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "resources.test.ts:17",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "same-origin image is inlined for offline replay": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByAltText('local trace asset')",
                      "selector": "internal:attr=[alt="local trace asset"s]",
                    },
                    "kind": "mark",
                    "location": "resources.test.ts:12",
                    "name": "image rendered from same-origin url",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "resources.test.ts:9",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
          },
          "retry.test.ts": {
            "repeated retried tests": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('list')",
                      "selector": "internal:role=list",
                    },
                    "kind": "mark",
                    "location": "retry.test.ts:29",
                    "name": "renderHelper",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "retry.test.ts:31",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "fail",
                  },
                ],
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('list')",
                      "selector": "internal:role=list",
                    },
                    "kind": "mark",
                    "location": "retry.test.ts:29",
                    "name": "renderHelper",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
                "retry": 1,
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "retry.test.ts:31",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "fail",
                  },
                ],
                "retry": 1,
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('list')",
                      "selector": "internal:role=list",
                    },
                    "kind": "mark",
                    "location": "retry.test.ts:29",
                    "name": "renderHelper",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
                "retry": 2,
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "retry.test.ts:28",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
                "retry": 2,
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('list')",
                      "selector": "internal:role=list",
                    },
                    "kind": "mark",
                    "location": "retry.test.ts:29",
                    "name": "renderHelper",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
                "repeats": 1,
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "retry.test.ts:28",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
                "repeats": 1,
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('list')",
                      "selector": "internal:role=list",
                    },
                    "kind": "mark",
                    "location": "retry.test.ts:29",
                    "name": "renderHelper",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
                "repeats": 2,
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "retry.test.ts:28",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
                "repeats": 2,
              },
            ],
            "repeated test": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('list')",
                      "selector": "internal:role=list",
                    },
                    "kind": "mark",
                    "location": "retry.test.ts:18",
                    "name": "renderHelper",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "retry.test.ts:17",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('list')",
                      "selector": "internal:role=list",
                    },
                    "kind": "mark",
                    "location": "retry.test.ts:18",
                    "name": "renderHelper",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
                "repeats": 1,
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "retry.test.ts:17",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
                "repeats": 1,
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('list')",
                      "selector": "internal:role=list",
                    },
                    "kind": "mark",
                    "location": "retry.test.ts:18",
                    "name": "renderHelper",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
                "repeats": 2,
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "retry.test.ts:17",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
                "repeats": 2,
              },
            ],
            "repeated test retried on later repeat": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('list')",
                      "selector": "internal:role=list",
                    },
                    "kind": "mark",
                    "location": "retry.test.ts:36",
                    "name": "renderHelper",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "retry.test.ts:35",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('list')",
                      "selector": "internal:role=list",
                    },
                    "kind": "mark",
                    "location": "retry.test.ts:36",
                    "name": "renderHelper",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
                "repeats": 1,
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "retry.test.ts:38",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "fail",
                  },
                ],
                "repeats": 1,
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('list')",
                      "selector": "internal:role=list",
                    },
                    "kind": "mark",
                    "location": "retry.test.ts:36",
                    "name": "renderHelper",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
                "repeats": 1,
                "retry": 1,
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "retry.test.ts:35",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
                "repeats": 1,
                "retry": 1,
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('list')",
                      "selector": "internal:role=list",
                    },
                    "kind": "mark",
                    "location": "retry.test.ts:36",
                    "name": "renderHelper",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
                "repeats": 2,
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "retry.test.ts:35",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
                "repeats": 2,
              },
            ],
            "retried test": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('list')",
                      "selector": "internal:role=list",
                    },
                    "kind": "mark",
                    "location": "retry.test.ts:22",
                    "name": "renderHelper",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "retry.test.ts:24",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "fail",
                  },
                ],
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('list')",
                      "selector": "internal:role=list",
                    },
                    "kind": "mark",
                    "location": "retry.test.ts:22",
                    "name": "renderHelper",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
                "retry": 1,
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "retry.test.ts:24",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "fail",
                  },
                ],
                "retry": 1,
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('list')",
                      "selector": "internal:role=list",
                    },
                    "kind": "mark",
                    "location": "retry.test.ts:22",
                    "name": "renderHelper",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
                "retry": 2,
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "retry.test.ts:21",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
                "retry": 2,
              },
            ],
          },
          "styles.test.ts": {
            "css url resources stay as urls": [
              {
                "entries": [
                  {
                    "kind": "mark",
                    "location": "styles.test.ts:51",
                    "name": "element rendered with css url resource",
                    "snapshot": {},
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "styles.test.ts:45",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "external stylesheet remains url dependent": [
              {
                "entries": [
                  {
                    "kind": "mark",
                    "location": "styles.test.ts:62",
                    "name": "button rendered with external stylesheet",
                    "snapshot": {},
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "styles.test.ts:55",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "font files remain url dependent": [
              {
                "entries": [
                  {
                    "kind": "mark",
                    "location": "styles.test.ts:80",
                    "name": "button rendered with font-face url",
                    "snapshot": {},
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "styles.test.ts:66",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "inline styles": [
              {
                "entries": [
                  {
                    "kind": "mark",
                    "location": "styles.test.ts:11",
                    "name": "button rendered with css",
                    "snapshot": {},
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "styles.test.ts:9",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "same-origin link css is inlined": [
              {
                "entries": [
                  {
                    "kind": "mark",
                    "location": "styles.test.ts:41",
                    "name": "button rendered with same-origin linked css",
                    "snapshot": {},
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "styles.test.ts:32",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "snapshot-time pseudo-state styles": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button', { name: 'First pseudo state' })",
                      "selector": "internal:role=button[name="First pseudo state"s]",
                    },
                    "kind": "expect",
                    "location": "styles.test.ts:101",
                    "name": "toHaveStyle",
                    "range": {
                      "phase": "start",
                    },
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button', { name: 'First pseudo state' })",
                      "selector": "internal:role=button[name="First pseudo state"s]",
                    },
                    "kind": "expect",
                    "location": "styles.test.ts:101",
                    "name": "toHaveStyle",
                    "range": {
                      "phase": "end",
                    },
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                    "status": "pass",
                  },
                ],
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button', { name: 'First pseudo state' })",
                      "selector": "internal:role=button[name="First pseudo state"s]",
                    },
                    "kind": "action",
                    "location": "styles.test.ts:104",
                    "name": "vitest:hover",
                    "range": {
                      "phase": "start",
                    },
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button', { name: 'First pseudo state' })",
                      "selector": "internal:role=button[name="First pseudo state"s]",
                    },
                    "kind": "action",
                    "location": "styles.test.ts:104",
                    "name": "vitest:hover",
                    "range": {
                      "phase": "end",
                    },
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                    "status": "pass",
                  },
                ],
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button', { name: 'Second pseudo state' })",
                      "selector": "internal:role=button[name="Second pseudo state"s]",
                    },
                    "kind": "action",
                    "location": "styles.test.ts:105",
                    "name": "vitest:click",
                    "range": {
                      "phase": "start",
                    },
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button', { name: 'Second pseudo state' })",
                      "selector": "internal:role=button[name="Second pseudo state"s]",
                    },
                    "kind": "action",
                    "location": "styles.test.ts:105",
                    "name": "vitest:click",
                    "range": {
                      "phase": "end",
                    },
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                    "status": "pass",
                  },
                ],
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('textbox', { name: 'Focused pseudo state' })",
                      "selector": "internal:role=textbox[name="Focused pseudo state"s]",
                    },
                    "kind": "action",
                    "location": "styles.test.ts:106",
                    "name": "vitest:fill",
                    "range": {
                      "phase": "start",
                    },
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('textbox', { name: 'Focused pseudo state' })",
                      "selector": "internal:role=textbox[name="Focused pseudo state"s]",
                    },
                    "kind": "action",
                    "location": "styles.test.ts:106",
                    "name": "vitest:fill",
                    "range": {
                      "phase": "end",
                    },
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                    "status": "pass",
                  },
                ],
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('textbox', { name: 'Focus within pseudo state' })",
                      "selector": "internal:role=textbox[name="Focus within pseudo state"s]",
                    },
                    "kind": "action",
                    "location": "styles.test.ts:107",
                    "name": "vitest:fill",
                    "range": {
                      "phase": "start",
                    },
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('textbox', { name: 'Focus within pseudo state' })",
                      "selector": "internal:role=textbox[name="Focus within pseudo state"s]",
                    },
                    "kind": "action",
                    "location": "styles.test.ts:107",
                    "name": "vitest:fill",
                    "range": {
                      "phase": "end",
                    },
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                    "status": "pass",
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "styles.test.ts:83",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "style tag css is inlined": [
              {
                "entries": [
                  {
                    "kind": "mark",
                    "location": "styles.test.ts:29",
                    "name": "button rendered with style tag css",
                    "snapshot": {},
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "styles.test.ts:14",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
          },
          "viewport.test.ts": {
            "document scroll is restored from trace metadata": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByRole('button')",
                      "selector": "internal:role=button",
                    },
                    "kind": "mark",
                    "location": "viewport.test.ts:31",
                    "name": "document scrolled before mark",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "viewport.test.ts:24",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "overflow element scroll is stored in snapshot payload": [
              {
                "entries": [
                  {
                    "element": {
                      "locator": "getByTestId('scroll-box')",
                      "selector": "internal:testid=[data-testid="scroll-box"s]",
                    },
                    "kind": "mark",
                    "location": "viewport.test.ts:47",
                    "name": "overflow container scrolled before mark",
                    "snapshot": {
                      "selectorResolution": "matched",
                    },
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "viewport.test.ts:34",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
            "viewport media query depends on replay viewport": [
              {
                "entries": [
                  {
                    "kind": "mark",
                    "location": "viewport.test.ts:21",
                    "name": "viewport sensitive layout rendered",
                    "snapshot": {},
                  },
                ],
              },
              {
                "entries": [
                  {
                    "kind": "lifecycle",
                    "location": "viewport.test.ts:10",
                    "name": "vitest:onAfterRetryTask",
                    "snapshot": {},
                    "status": "pass",
                  },
                ],
              },
            ],
          },
        }
      `)
    }
  }
})