Cypress问题：如何从商品页批量加购，解决点击加购跳转购物车问题

问题根因 #

加购按钮点击后触发了页面重定向逻辑，此前cy.back()不生效是因为跳转操作未完成就执行了返回命令，历史栈还未记录商品页状态导致返回失效。 #

方案1：阻止跳转逻辑（优先推荐） #

从根源避免页面跳转，用例稳定性最高，适配按钮绑定跳转事件、a标签跳转等多种场景：

Cypress.Commands.add("selectproduct", (productname) => { 
    cy.get('.productCard').each(($el, index, $list) => {
        if ($el.text().includes(productname)) {
            const addCartBtn = cy.get('.btn.btn-secondary.ghost.btn-primary').eq(index)
            // 如果是a标签跳转，直接移除href属性
            addCartBtn.invoke('removeAttr', 'href')
            // 拦截JS主动触发的location跳转
            cy.window().then(win => {
                const originalAssign = win.location.assign
                cy.stub(win.location, 'assign').callsFake((url) => {
                    // 仅拦截跳转到购物车的请求，其他跳转正常执行
                    if (!url.includes('cart')) originalAssign(url)
                })
            })
            addCartBtn.click()
        }
    })
})

方案2：跳转完成后返回商品页（兼容原有逻辑） #

不需要修改点击逻辑，仅调整执行顺序，等待页面加载完成后再返回：

Cypress.Commands.add("selectproduct", (productname) => { 
    cy.get('.productCard').each(($el, index, $list) => {
        if ($el.text().includes(productname)) {
            cy.get('.btn.btn-secondary.ghost.btn-primary').eq(index).click()
            // 替换为购物车页面独有的元素选择器，确认跳转完成
            cy.get('.cart-page-title').should('be.visible')
            // 返回商品页，确认商品列表加载完成再执行后续循环
            cy.go('back')
            cy.get('.productCard').should('have.length.greaterThan', 0)
        }
    })
})

方案3：直接调用加购接口（执行效率最高） #

如果不需要验证加购按钮的UI交互逻辑，直接发送加购请求完全不会触发页面跳转：

Cypress.Commands.add("selectproduct", (productId) => { 
    // 替换为实际业务的加购接口地址、请求参数
    cy.request({
        method: 'POST',
        url: '/api/shopping-cart/add',
        body: {
            productId: productId,
            count: 1
        }
    }).its('status').should('eq', 200)
})

注意事项 #

• 优先选择方案1，既符合模拟用户真实操作的测试要求，也不会出现页面来回跳转的不稳定问题
• 使用方案2时，必须等待对应页面的唯一元素加载完成再执行后续操作，否则会出现命令执行时序错误
• 使用方案3时需要提前获取对应商品的ID参数，适合不需要验证前端按钮交互的场景

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