diff --git a/packages/html-reporter/src/testCaseView.spec.tsx b/packages/html-reporter/src/testCaseView.spec.tsx
index 38951c1730..6b44514900 100644
--- a/packages/html-reporter/src/testCaseView.spec.tsx
+++ b/packages/html-reporter/src/testCaseView.spec.tsx
@@ -27,6 +27,7 @@ const result: TestResult = {
errors: [],
steps: [{
title: 'Outer step',
+ category: 'test.step',
startTime: new Date(100).toUTCString(),
duration: 10,
location: { file: 'test.spec.ts', line: 62, column: 0 },
@@ -34,6 +35,7 @@ const result: TestResult = {
steps: [{
title: 'Inner step',
startTime: new Date(200).toUTCString(),
+ category: 'test.step',
duration: 10,
location: { file: 'test.spec.ts', line: 82, column: 0 },
steps: [],
@@ -136,6 +138,7 @@ const resultWithAttachment: TestResult = {
errors: [],
steps: [{
title: 'Outer step',
+ category: 'test.step',
startTime: new Date(100).toUTCString(),
duration: 10,
location: { file: 'test.spec.ts', line: 62, column: 0 },
diff --git a/packages/html-reporter/src/types.ts b/packages/html-reporter/src/types.ts
index 7a99184739..7322106753 100644
--- a/packages/html-reporter/src/types.ts
+++ b/packages/html-reporter/src/types.ts
@@ -102,6 +102,7 @@ export type TestResult = {
export type TestStep = {
title: string;
+ category: 'hook' | 'fixture' | 'test.step' | 'expect' | 'attach' | string;
startTime: string;
duration: number;
location?: Location;
diff --git a/packages/playwright/src/reporters/html.ts b/packages/playwright/src/reporters/html.ts
index b48f3af256..7403985bcb 100644
--- a/packages/playwright/src/reporters/html.ts
+++ b/packages/playwright/src/reporters/html.ts
@@ -498,6 +498,7 @@ class HtmlBuilder {
const { step, duration, count } = dedupedStep;
const testStep: TestStep = {
title: step.title,
+ category: step.category,
startTime: step.startTime.toISOString(),
duration,
steps: dedupeSteps(step.steps).map(s => this._createTestStep(s, result)),