如何使用Cypress测试页面弹出的Alert弹窗？

你的代码问题出在事件监听器注册时机太晚——你先执行了触发alert的blur()操作，再注册window:alert监听器，这时候alert已经弹出并被Cypress处理，监听器根本没机会捕获事件。

下面是两种可行的修复方案：

方案1：提前注册alert监听器 #

把cy.on('window:alert')放在触发alert的动作之前，确保监听器先就位：

describe('Alert is displayed with warning text', () => {
  it('Assert that the alert is displayed after entering data', () => {
    cy.visit('/')

    // 先注册alert事件监听器
    cy.on('window:alert', (text) => {
      expect(text).to.equal('alert text') // 直接用Chai断言，避免嵌套Cypress命令的时序问题
    })

    // 再执行触发alert的操作
    cy.get('input').type('some data').blur()
  })
})

方案2：用cy.stub()拦截alert（更推荐） #

这种方法通过存根（stub）拦截alert方法，能更精准地控制和断言，还能避免弹窗自动关闭的干扰：

describe('Alert is displayed with warning text', () => {
  it('Assert that the alert is displayed after entering data', () => {
    cy.visit('/')

    // 创建alert的stub并绑定到window对象
    cy.window().then((win) => {
      cy.stub(win, 'alert').as('alertStub')
    })

    // 触发alert操作
    cy.get('input').type('some data').blur()

    // 断言stub被调用，且传入的文本正确
    cy.get('@alertStub').should('have.been.calledWith', 'alert text')
  })
})

这个方案的优势是可以验证alert是否被调用过，以及调用时的参数，比单纯监听事件更全面。

额外注意点：

• 确认alert text与弹窗实际文本完全一致，无拼写错误
• 手动测试输入框的blur事件确实会触发目标alert

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