如何捕获页面所有HTML标题层级错误而非遇首个即终止测试

原代码在检测HTML标题层级时，碰到第一个不符合规则的标题就会停住，没法一次性看到所有问题。下面是修改后的代码，能收集页面上所有标题层级错误，最后统一做断言输出：

async assertHtmlHeadingOrders() {
    await this.page.waitForLoadState('domcontentloaded')
    const failMsg = (prev, curr) =>
      `h${curr} 比上一个标题 h${prev} 深超过一级`
    const headers = await this.page
      .locator('h1, h2, h3, h4, h5, h6')
      .evaluateAll(els => els.map(el => +el.tagName.slice(1)))
    
    // 用来收集所有错误消息的数组
    const errors = []
    // eslint-disable-next-line no-plusplus, id-length
    for (let i = 1; i < headers.length; i++) {
      const prevLevel = headers[i - 1]
      const currLevel = headers[i]
      if (currLevel - prevLevel >= 2) {
        errors.push(failMsg(prevLevel, currLevel))
      }
    }

    // 统一断言：如果有错误就全部抛出
    expect(errors, '存在以下标题层级错误：\n' + errors.join('\n')).toBeEmpty()
  }

修改说明 #

• 新增错误收集数组：用errors数组存储所有不符合规则的标题层级错误消息，不再遇到错误就立刻终止测试。
• 遍历逻辑调整：遍历每个标题时，先判断当前标题层级是否比上一个深超过一级，符合错误条件就把消息加入数组，不直接触发断言。
• 统一断言输出：遍历完成后，用expect(errors).toBeEmpty()判断是否有错误，若数组不为空，会把所有错误消息拼接后展示在测试报告里。

这样修改后，就能一次性拿到页面上所有的标题层级问题，不用每次只看第一个错误再重新跑测试了。

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