如何使用Cypress结合POM验证表格列数据是否按名称排序

完全可以在Cypress框架中结合POM设计模式完成表格列点击排序的校验，POM模式本身就适合封装这类可复用的页面交互、元素定位与通用校验逻辑，能大幅降低后续用例的维护成本。

POM层单独封装表格相关的通用能力，测试用例层只需要传入待校验的列名、匹配业务的排序规则即可完成校验，不用重复编写元素定位、取值的冗余代码。

POM层封装（表格页面对象类） #

把列头定位、列值获取、点击排序的逻辑全部收敛到Page类中：

// cypress/support/pages/DataTablePage.js
class DataTablePage {
  // 定位传入名称对应的表格列头
  getColumnHeader(columnName) {
    return cy.get('table th').contains(columnName)
  }

  // 按页面实际展示顺序，获取指定列的所有单元格文本值
  getColumnValues(columnName) {
    // 动态获取列索引，避免列顺序变动导致定位失效
    return this.getColumnHeader(columnName).invoke('index').then(colIndex => {
      const cellValues = []
      cy.get('table tbody tr').each($row => {
        cy.wrap($row)
          .find('td')
          .eq(colIndex)
          .invoke('text')
          .then(text => cellValues.push(text.trim()))
      }).then(() => cellValues)
    })
  }

  // 点击指定列头触发排序，可按需补充加载态等待逻辑
  clickColumnToSort(columnName) {
    this.getColumnHeader(columnName).click()
    // 若页面有排序加载动画，可在此处加等待逻辑，比如 cy.get('.loading-spinner').should('not.exist')
  }
}

export default new DataTablePage()

测试用例层编写 #

直接调用Page类封装好的方法，聚焦排序规则的校验逻辑：

// cypress/e2e/table-sort.cy.js
import DataTablePage from '../support/pages/DataTablePage'

describe('表格列排序功能校验', () => {
  it('点击名称列后，数据应按业务规则排序展示', () => {
    cy.visit('/替换为实际表格页面路径')
    const targetColumnName = '名称'

    // 首次点击触发升序排序（若业务默认首次点击为降序，调整后续预期值顺序即可）
    DataTablePage.clickColumnToSort(targetColumnName)
    DataTablePage.getColumnValues(targetColumnName).then(actualAscValues => {
      // 按业务排序规则生成预期值：示例为中文按拼音排序，可根据实际规则调整比对逻辑
      const expectedAscValues = [...actualAscValues].sort((a, b) => a.localeCompare(b, 'zh-CN'))
      expect(actualAscValues).to.deep.equal(expectedAscValues)

      // 再次点击触发降序排序，校验降序逻辑
      DataTablePage.clickColumnToSort(targetColumnName)
      DataTablePage.getColumnValues(targetColumnName).then(actualDescValues => {
        const expectedDescValues = [...expectedAscValues].reverse()
        expect(actualDescValues).to.deep.equal(expectedDescValues)
      })
    })
  })
})

• 排序比对逻辑必须和业务规则完全对齐：如果是带数字的名称需要按自然数值排序、特殊字符有自定义排序优先级，直接调整sort方法内的比对逻辑即可，无需修改POM层封装。
• 如果表格带分页、虚拟滚动，需要在POM层补充拉取全量列数据的逻辑，避免仅校验当前可视区域数据导致校验结果不准确。

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