Cypress测试中将商品加入购物车后商品消失问题如何排查

核心诱因 #

• Cypress 不同describe块、不同it用例之间默认会自动清理页面状态、Cookie、本地存储，同时重置页面上下文。你将访问彩票页的逻辑放在独立的describe块中，执行第二个describe的用例时，环境已经回到空白初始页，前面的页面访问结果完全失效，后续的按钮点击操作没有对应功能触发，加购自然不会成功。
• 点击提交到购物车按钮后，你没有等待加购异步请求完成，也没有等待购物车页面加载完成就直接查询购物车元素，此时要么加购请求还没返回结果，要么页面还没渲染出购物车内容，Cypress 会直接判定元素不存在、购物车为空。
• 按钮点击可能是无效操作：你指定了IPHONE_X的移动端视口，有可能按钮被其他元素遮挡、或者还没渲染完成就执行了点击，加购逻辑根本没有运行。

修复方案 #

调整用例结构 #

把关联的测试流程放在同一个describe块中，将前置页面访问操作放在beforeEach钩子内，保证每个用例执行前都处于正确的页面状态。

补充等待逻辑 #

对加购接口做拦截等待，确认加购成功后再执行后续校验，同时跳转后先校验页面路径，再查询购物车元素。

优化点击操作 #

增加按钮可见性校验，避免触发无效点击。

修复后的参考代码如下：

describe('Lotto add to basket test', IPHONE_X, () => {
    // 每个用例执行前的统一前置操作
    beforeEach(() => {
        cy.visit('/lotto')
        // 拦截加购接口，替换为你项目实际的加购接口路径
        cy.intercept('POST', '/api/**/add-to-basket').as('addBasket')
    })

    it('should add quicktip ticket to basket successfully', () => {
        // 校验选号按钮可见后再点击
        cy.get('ticketbutton').should('be.visible').click()
        // 校验加购按钮可见后再点击
        cy.get('submit-to-basket-button').should('be.visible').click()
        // 等待加购接口请求成功，确保加购操作已完成
        cy.wait('@addBasket').its('response.statusCode').should('eq', 200)
        // 等待跳转到购物车页面，确认页面路径正确
        cy.location('pathname').should('include', '/basket')
        // 校验购物车内商品存在
        cy.get('basket-item').contains("Ticket Lottery Example").should('exist')
    })
})

注意：需将cy.intercept中的接口路径替换为你实际项目的加购接口路径

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