Cypress如何stub window.prompt实现用户名密码输入及弹窗交互

架构老林

2026-10-6

报错原因

你提供的代码报错核心原因是 cy.stub().returns() 单次调用仅支持传入一个返回值，无法适配连续多次 window.prompt 的返回需求；另外在 cy.visit() 执行完成后才给window对象打桩，可能会错过页面加载阶段就触发的prompt事件，导致stub不生效。

场景实现方案

场景1：连续两次prompt分别输入用户名、密码后点击确认提交

Cypress的stub支持按调用次数分别配置返回值，有返回值的stub默认模拟用户点击prompt的「确认」按钮，返回的内容即为用户输入的内容：

// 在页面加载前就给prompt打桩，避免漏监听
cy.on('window:before:load', (win) => {
  cy.stub(win, 'prompt')
    .onFirstCall().returns('your_username') // 第一次弹prompt返回用户名
    .onSecondCall().returns('your_password') // 第二次弹prompt返回密码
})

cy.visit('http://localhost:3000')
// 这里补充触发prompt弹出的业务操作，比如点击对应按钮
// cy.get('.trigger-prompt-btn').click()

// 可选断言：验证prompt按预期触发了两次
// cy.window().its('prompt').should('have.callCount', 2)

如果你的业务是单次prompt要求输入拼接的账号密码（比如用/分隔），直接简化为cy.stub(win, 'prompt').returns('username/password')即可。

场景2：不输入任何内容直接关闭弹窗

window.prompt 点击取消/关闭按钮的原生返回值为null，直接给stub配置返回null即可模拟该场景：

cy.on('window:before:load', (win) => {
  // 返回null等价于用户点击弹窗取消按钮，未输入任何内容
  cy.stub(win, 'prompt').returns(null)
})

cy.visit('http://localhost:3000')
// 补充触发prompt弹出的业务操作