如何在Cypress自动化中用for循环对比JSON响应与UI元素

完整实现代码 #

describe('产品列表接口与UI一致性校验', () => {
  it('校验所有接口返回的productName都在UI正确展示', () => {
    // 1. 拦截产品列表接口，替换为实际的请求方法和接口路径
    cy.intercept('GET', '/api/retail/products').as('getProductList')

    // 2. 访问产品列表页面，替换为实际的页面路径
    cy.visit('/product/list')

    // 3. 等待接口响应完成，获取响应数据
    cy.wait('@getProductList').then((interception) => {
      // 提取接口返回的retail数组
      const retailProductList = interception.response.body.retail
      
      // 4. for循环遍历所有产品项
      for (let i = 0; i < retailProductList.length; i++) {
        const currentProduct = retailProductList[i]
        // 提取productName，trim处理避免前后空格导致匹配失败
        const targetProductName = currentProduct.productName.trim()

        // 5. 查找UI上的产品名称元素，替换为你实际的UI元素选择器
        cy.get('.product-card .product-name').contains(targetProductName).should('exist').then(() => {
          // 匹配成功打印日志到Cypress运行日志
          Cypress.log({
            name: '产品匹配成功',
            message: `产品ID：${currentProduct.productId}，产品名称：${targetProductName} 已在UI找到`
          })
        })
      }
    })
  })
})

代码说明 #

• 你需要根据实际业务替换三处自定义内容：接口的请求方法与路径、产品列表页面路径、UI产品名称的元素选择器
• 代码默认对productName做了去首尾空格处理，适配示例中Dealer Product 2 - Perma 末尾带空格的场景，你可以根据实际需求去掉trim逻辑
• 匹配成功的日志会直接展示在Cypress测试运行器的日志面板中，也可以根据需求新增匹配失败的异常捕获逻辑

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