如何在Cypress中获取表头标题数组并校验匹配性

我们的应用中有一个页面包含多个表头标题（选择器为.tasktable__header.tasktable__header--title），需要校验这些标题的正确性。现有代码无法完成需求，因为它要求所有表头都匹配同一个字符串，逻辑上无法实现多标题的数组对比，原代码如下：

verifySubIncidentTitleMatch(incident: string): void {
    cy.get(this.#subDossierTitle).each(ele => {
        expect(ele.text()).to.equal(incident);
    })
}

需求是将所有表头标题提取并存储到数组中，再和预期的标题数组进行对比。页面HTML结构为：表格所在的div类名为top20，目标表头元素位于该div内的thead标签下。

解决方案 #

方法一：通过jQuery集合转数组提取文本

verifySubIncidentTitlesMatch(expectedTitles: string[]): void {
    // 精准定位目标表头元素，缩小范围避免干扰
    cy.get('div.top20 thead .tasktable__header.tasktable__header--title')
      .then(($elements) => {
          // 将jQuery元素集合转为原生数组，提取每个元素的文本并去除前后空格
          const actualTitles = Array.from($elements).map(el => el.textContent?.trim() || '')
          // 深度对比实际数组与预期数组的内容和顺序
          expect(actualTitles).to.deep.equal(expectedTitles)
      })
}

方法二：使用.each遍历收集文本到数组

verifySubIncidentTitlesMatch(expectedTitles: string[]): void {
    const actualTitles: string[] = []
    cy.get('div.top20 thead .tasktable__header.tasktable__header--title')
      .each(($el) => {
          // 遍历每个表头元素，将文本去空格后存入数组
          actualTitles.push($el.text().trim())
      })
      .then(() => {
          // 遍历完成后对比数组
          expect(actualTitles).to.deep.equal(expectedTitles)
      })
}

关键说明 #

1. 定位优化：通过div.top20 thead限定元素范围，避免页面中其他同名元素影响校验结果
2. 文本处理：添加trim()去除文本前后空格，避免因排版空格导致的匹配失败
3. 数组对比：使用deep.equal进行数组的深度对比，确保标题的内容和顺序都与预期一致
4. 原代码问题：原代码要求每个表头都等于同一个字符串，不符合多表头的校验逻辑，改为数组对比后可实现批量校验

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