如何在Playwright HTML报告中添加预期URL与标题值

要让Playwright HTML报告展示验证时的预期URL和标题，核心是确保断言逻辑能把预期值传递给报告系统，以下是具体实现方案：

1. 基础断言写法（直接生效） #

如果直接在测试用例中使用toHaveURL和toHaveTitle断言，只要明确传入预期值，HTML报告会自动捕获并展示预期内容：

// 测试用例中的写法
await expect(page).toHaveURL('https://your-target-url.com');
await expect(page).toHaveTitle('目标页面标题');

2. Page Object模式下的适配（针对你的pageObject.ts） #

如果验证逻辑封装在Page Object中（对应你提到的../src/objects/pages/pageObject.ts文件），需要让封装方法接收预期值参数，并传递给断言，确保报告能捕获到预期内容：

// ../src/objects/pages/pageObject.ts
class PageObject {
  constructor(public page: Page) {}

  // 第18行的toHaveURL验证改造
  async checkPageUrl(expectedUrl: string) {
    await expect(this.page).toHaveURL(expectedUrl);
  }

  // 第26行的toHaveTitle验证改造
  async checkPageTitle(expectedTitle: string) {
    await expect(this.page).toHaveTitle(expectedTitle);
  }
}

之后在测试用例中调用时传入具体预期值：

const pageObj = new PageObject(page);
await pageObj.checkPageUrl('https://your-expected-url.com');
await pageObj.checkPageTitle('预期页面标题');

这样HTML报告会在断言结果中展示对应的预期URL和标题。

3. 自定义增强报告（可选） #

如果需要在报告中额外标注预期信息，可以通过test.info().annotations添加自定义注释：

async checkPageUrl(expectedUrl: string) {
  // 添加自定义标注到报告
  test.info().annotations.push({
    type: '预期URL',
    description: expectedUrl
  });
  await expect(this.page).toHaveURL(expectedUrl);
}

这种方式会在报告的测试条目下增加独立的标注项，让预期值更显眼。

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