如何使用Cypress对JavaScript生成的数据进行校验

你提供的功能截图参考：

前置准备 #

确保你已经完成Cypress的基础安装配置，推荐使用10.0及以上版本，避免API兼容问题。

两种常见校验场景的实现代码 #

场景1：校验渲染到DOM的列表内容 #

如果JS生成的列表已经渲染为页面DOM元素，直接通过选择器定位后和预期数据对比即可：

// 提前定义好预期的列表内容，也可以从单独的测试配置文件导入
const expectedList = ['第一项内容', '第二项内容', '第三项内容', '第四项内容']

it('校验渲染后的列表内容与预期一致', () => {
  // 替换为你的列表页访问路径
  cy.visit('/list-page')
  // 替换为你实际的列表项选择器，timeout可以根据页面加载速度调整
  cy.get('.list-container li', { timeout: 5000 })
    // 先校验列表项总数量匹配
    .should('have.length', expectedList.length)
    // 遍历校验每一项的文本内容
    .each(($item, index) => {
      cy.wrap($item).should('have.text', expectedList[index])
    })
})

场景2：校验内存中的原始JS列表数据 #

如果需要直接校验生成列表的原始数据源（比如校验字段完整性、未渲染的隐藏字段等），可以通过访问页面window对象获取挂载的全局数据：

提前确认前端侧已经将生成列表的JS数组挂载到window全局对象上，比如window.generatedList = 你的列表数据源

// 预期的完整数据结构
const expectedData = [
  { id: 1, name: '第一项', status: '启用', createTime: '2024-01-01' },
  { id: 2, name: '第二项', status: '启用', createTime: '2024-01-02' },
  { id: 3, name: '第三项', status: '禁用', createTime: '2024-01-03' }
]

it('校验原始JS列表数据的结构和内容', () => {
  cy.visit('/list-page')
  // 获取页面全局window对象
  cy.window().then(win => {
    const actualList = win.generatedList
    // 校验数据长度
    expect(actualList.length).to.eq(expectedData.length)
    // 遍历校验每个字段值
    actualList.forEach((item, index) => {
      expect(item.id).to.eq(expectedData[index].id)
      expect(item.name).to.eq(expectedData[index].name)
      expect(item.status).to.eq(expectedData[index].status)
      expect(item.createTime).to.eq(expectedData[index].createTime)
    })
  })
})

优化建议 #

• 如果列表是接口异步返回后生成的，可以搭配cy.intercept监听对应列表接口，等接口响应完成后再执行校验，避免时序问题导致的用例失败
• 如果需要校验列表排序、筛选等交互功能，修改对应预期数组后复用上述校验逻辑即可

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