Cypress 页面完全加载前如何连续填充多个prompt输入值

错误根因 #

Cypress的cy.stub()基于Sinon实现，不允许重复包装同一个对象上的未还原方法，你多次调用cy.stub(win, 'prompt')相当于反复给同一个window.prompt加存根，所以直接抛出包装冲突的错误，且只有第一次创建的stub会生效，才会出现stub1被调用3次的情况。

解决方案 #

只需要创建1次prompt存根，通过Sinon存根本身的顺序返回能力适配多调用场景即可：

场景1：固定3个返回值 #

before(function() {
    cy.visit(base_url, {
        onBeforeLoad(win) {
            cy.stub(win, 'prompt')
                .returns('someString') // 第1次调用prompt返回值
                .returns('someOtherString') // 第2次调用prompt返回值
                .returns('anotherString') // 第3次调用prompt返回值
                .as('promptStub')
        }
    })
})

多次调用returns()时，Sinon会按调用顺序依次返回对应值，超过次数后默认返回最后一次设置的返回值。

场景2：动态从数组取值返回 #

如果需要从demo_site_info数组动态按顺序取返回值，用计数器控制即可，不要循环创建stub：

before(function() {
    cy.visit(base_url, {
        onBeforeLoad(win) {
            let callIndex = 0
            cy.stub(win, 'prompt').callsFake(() => {
                const currentVal = demo_site_info[callIndex]
                callIndex++
                return currentVal
            }).as('promptStub')
        }
    })
})

后续验证 #

页面加载完成后可以加断言验证stub调用符合预期：

cy.get('@promptStub').should('have.callCount', 3)

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