如何在Cypress中编写测试断言alert弹窗不会出现

核心逻辑 #

Cypress 默认会自动响应alert弹窗，不会将其渲染为页面DOM元素，因此需要通过监听window:alert事件判断弹窗是否被触发，避免直接使用DOM不存在的否定断言导致误判。

基础实现代码 #

describe('Alert弹窗bug修复验证', () => {
  // 每次用例执行前重置状态，避免用例间污染
  beforeEach(() => {
    // 访问对应测试页面
    cy.visit('/your-test-page')
  })

  it('触发原bug操作后不应弹出携带错误信息的alert', () => {
    let isErrorAlertTriggered = false
    let alertText = ''

    // 注册alert事件监听
    cy.on('window:alert', (text) => {
      // 可以加判断，只匹配你要拦截的错误信息alert，避免其他正常alert干扰
      if (text.includes('你原bug对应的错误提示关键词')) {
        isErrorAlertTriggered = true
        alertText = text
      }
    })

    // 替换为复现原bug的操作，比如点击提交按钮、输入特定内容后提交等
    cy.get('#bug-trigger-button').click()

    // 等待时长设置为原bug下alert弹出的最大延迟+冗余，比如原bug2s内必出，就设3s
    cy.wait(3000)

    // 断言错误alert未触发，触发时输出具体内容方便排查
    cy.wrap(isErrorAlertTriggered).should('eq', false, `意外触发错误alert，内容：${alertText}`)
  })
})

测试健壮性优化方案 #

• 增加正向操作校验：在等待之后先加正向断言确认操作已经执行完成，比如操作成功后页面应该出现的成功提示、跳转后的页面元素等，确保不会因为操作未执行就提前断言导致误判，示例：

  // 确认操作执行成功的正向断言，比如表单提交成功提示
  cy.contains('操作成功').should('be.visible')
  

• 增加监听逻辑校验用例：单独编写一条对照用例，故意触发会弹出目标错误alert的操作，确认监听逻辑可以正常捕获到alert事件，避免监听逻辑失效导致所有用例误判通过。
• 精确匹配alert内容：在事件监听里只标记匹配你要拦截的错误信息的alert，避免页面其他正常alert干扰测试结果。
• 控制等待时长：不要设置过长的等待时间，仅设置比原bug弹出alert的最大延迟多1s左右的冗余即可，兼顾准确性和测试执行效率。

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