如何验证购物车中多个商品？Cypress断言问题求助

断言选择：优先用隐式断言 #

Cypress的隐式断言（通过.should()/.and()实现）专为其异步执行模型设计，会自动重试断言直到条件满足或超时，比显式断言（如expect()/assert()）更适配UI测试场景，尤其是处理动态加载元素时。所以推荐你使用隐式断言完成购物车验证。

错误原因 #

你遇到的断言错误，是因为have.text断言仅接受单个期望值，但你传入了两个字符串参数，Cypress会将它们拼接成'Cauliflower - 1 Kg Cashews - 1 Kg'，而购物车中每个商品的文本是独立的，自然匹配失败。同时遍历验证的逻辑也有问题，不能要求单个元素同时等于两个不同文本。

修正后的代码 #

方案1：收集所有商品文本后批量验证 #

这种方式更简洁，一次性验证购物车包含所有预期商品：

/// <reference types="Cypress" />
describe('Example_Test_Suite_1',()=>{
    it("Products are added to cart",()=>{
        cy.visit("https://rahulshettyacademy.com/seleniumPractise/#/")
        cy.get('.products').as('productlocator')
        
        // 找到目标商品并加入购物车
        cy.get('@productlocator').find('.product').each(($el) => {
            const textVeg = $el.find('h4.product-name').text()
            if (textVeg.includes('Cashews')||textVeg.includes('Cauliflower')) {
                cy.wrap($el).find('button').click()
            }
        })
        
        cy.get('.cart-icon').click()
        
        // 收集所有可见的购物车商品文本，断言包含预期的两个商品
        cy.get('li[class*="cart-item"]').find('p.product-name:visible')
          .should('have.length', 2) // 先验证商品数量正确
          .then(($items) => {
              // 将元素文本转为数组
              const cartItemTexts = Array.from($items).map(item => item.textContent.trim())
              // 断言数组包含两个预期商品
              expect(cartItemTexts).to.deep.include.members(['Cauliflower - 1 Kg', 'Cashews - 1 Kg'])
          })
    })
})

方案2：遍历每个商品验证文本匹配预期值之一 #

如果需要逐个验证每个商品，可以修改遍历逻辑，判断当前元素文本是两个预期值中的一个：

/// <reference types="Cypress" />
describe('Example_Test_Suite_1',()=>{
    it("Products are added to cart",()=>{
        cy.visit("https://rahulshettyacademy.com/seleniumPractise/#/")
        cy.get('.products').as('productlocator')
        
        cy.get('@productlocator').find('.product').each(($el) => {
            const textVeg = $el.find('h4.product-name').text()
            if (textVeg.includes('Cashews')||textVeg.includes('Cauliflower')) {
                cy.wrap($el).find('button').click()
            }
        })
        
        cy.get('.cart-icon').click()
        
        cy.get('li[class*="cart-item"]').find('p.product-name:visible')
          .should('have.length', 2)
          .each(($el) => {
              const itemText = $el.text().trim()
              // 断言当前商品文本是两个预期值之一
              expect(['Cauliflower - 1 Kg', 'Cashews - 1 Kg']).to.include(itemText)
          })
    })
})

额外优化点 #

• 去掉不必要的cy.wait(2000)，Cypress会自动等待元素加载，硬编码等待会降低测试稳定性。
• 选择器中的转义符\[可以去掉，直接写li[class*="cart-item"]即可，Cypress支持标准CSS选择器。

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