如何在Playwright默认HTML报告的测试步骤区域写入自定义文本？

嗨，我之前也踩过这个坑！console.log确实只会跑到Attachments里的stdout，因为它只是普通的控制台输出，不属于Playwright测试报告的步骤体系。要把自定义文本放到Test Steps区域，得用Playwright专门提供的步骤API，分两种场景给你说清楚：

1. 在测试用例中直接添加自定义步骤 #

用test.step()方法就能轻松实现，它会把你定义的文本作为步骤标题直接显示在Test Steps区域，还支持嵌套步骤，让报告结构更清晰。举个实际例子：

test('完整下单流程测试', async ({ page }) => {
  // 自定义步骤：启动下单流程
  await test.step('Begin Order Workflow', async () => {
    await page.goto('/order-page');
    await page.fill('#user-email', 'test@example.com');
  });

  // 嵌套步骤：确认并提交订单
  await test.step('确认订单信息', async () => {
    await page.check('#accept-terms');
    await test.step('提交订单请求', async () => {
      await page.click('#submit-order-btn');
    });
  });
});

生成的HTML报告里，Test Steps区域会清晰展示你定义的所有标题，每个步骤下面还会自动关联对应的页面操作日志，一目了然。

2. 在页面对象（Page Object）中添加自定义步骤 #

如果是在页面对象的方法里想要添加步骤标记，你可以用绑定在Page实例上的page.step()方法，或者把test对象传入页面对象来调用test.step()。比如：

// 页面对象文件：OrderPage.ts
import { Page } from '@playwright/test';

export class OrderPage {
  constructor(private page: Page) {}

  async startOrderWorkflow() {
    // 在页面对象方法中添加自定义步骤
    await this.page.step('Begin Order Workflow', async () => {
      await this.page.goto('/order');
      await this.page.fill('#customer-name', 'Jane Smith');
    });
  }
}

之后在测试用例里调用这个页面对象方法，生成的报告同样会把"Begin Order Workflow"作为步骤显示在Test Steps区域。

额外提示 #

这些步骤API不仅能美化HTML报告，在命令行执行测试时也会输出层级化的步骤结构，调试起来更方便。以后就别用console.log做步骤标记啦，用专门的step API才是符合Playwright最佳实践的方式~

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