Cypress测试末尾网页崩溃原因及修复方案咨询

问题原因 #

• 自定义命令注册位置错误：typeTab命令在测试用例内部定义，每次运行测试都会重复注册该命令，引发Cypress内部冲突，导致后续操作异常。
• 缺乏页面异步操作等待：Yahoo的登录、登出、页面跳转都是异步过程，代码中没有等待元素加载或页面跳转完成就执行下一个操作，导致元素查找失败或操作时机错误，页面进入空白状态。
• 异常捕获时机滞后：uncaught:exception监听放在登录流程之后，登录过程中若出现未捕获异常，无法被拦截，会直接破坏测试环境。
• 动态选择器不稳定：._yb_1golm这类动态生成的类名，Yahoo页面更新后会失效，导致元素查找失败，触发错误使页面空白。
• 登录输入逻辑错误：cy.get('.phone-no').type('//password here{enter}')中，手机号/邮箱输入框被错误填入密码，导致登录失败，后续流程全部异常。

修复步骤 #

1. 迁移自定义命令到全局位置
   将typeTab命令移到cypress/support/commands.js文件中，避免在测试用例内重复注册：

   Cypress.Commands.add('typeTab', (shiftKey, ctrlKey) => {
     cy.focused().trigger('keydown', {
       keyCode: 9,
       which: 9,
       shiftKey: shiftKey,
       ctrlKey: ctrlKey
     })
   })
   

2. 添加页面加载等待与断言
   对所有异步操作添加等待，确保元素加载完成后再执行操作：

   • 登录后等待收件箱核心元素出现
   • 发送邮件后等待成功提示
   • 登出后等待登录页面元素加载

3. 提前设置异常拦截
   将uncaught:exception监听移到测试用例开头，确保整个流程的异常都被拦截：

   it('Send email', function () {
     Cypress.on('uncaught:exception', (err, runnable) => {
       return false
     })
     // 后续测试代码
   })
   

4. 替换动态选择器为稳定选择器
   优先使用data-test-id、title等固定属性选择器，比如将用户头像选择器替换为[data-test-id="header-profile"]，避免页面更新后选择器失效。

5. 修正登录输入逻辑
   确保手机号/邮箱输入框填入正确账号，密码输入框填入密码：

   cy.get('.phone-no').type('你的Yahoo账号{enter}');
   cy.get('.password').type('你的Yahoo密码{enter}');
   

修改后的完整代码 #

it('Send email', function () {
  // 全局拦截未捕获异常
  Cypress.on('uncaught:exception', (err, runnable) => {
    return false
  })

  cy.visit('https://login.yahoo.com/?.src=ym&pspid=159600001&activity=mail-direct&.lang=en-GB&.intl=uk&.done=https%3A%2F%2Fuk.mail.yahoo.com%2Fd');
  
  // 登录流程：输入账号、密码
  cy.get('.phone-no').type('你的Yahoo账号{enter}');
  cy.get('.password').type('你的Yahoo密码{enter}');

  // 等待收件箱页面加载，再点击写邮件按钮
  cy.get('.e_dRA').should('be.visible').eq(0).click();

  // 输入收件人、邮件内容
  cy.get('.select-input').eq(1).type('目标邮箱地址');
  cy.get('[role="textbox"]').type('Hi Second Email, the weather will be 10oc plus in the following destinations - Regards, First Email');
  
  // 点击发送，等待发送成功提示
  cy.get('[title="Send this email"]').click();
  cy.contains('Your message has been sent').should('be.visible');

  // 关闭发送成功弹窗
  cy.get('[data-test-id="primary-btn"]').click();

  // 点击用户头像，等待登出选项出现
  cy.get('[data-test-id="header-profile"]').should('be.visible').click();
  cy.get('[data-soa="Sign out of all"]').should('be.visible').click();

  // 等待登录页面加载，点击切换账号按钮
  cy.get('[data-redirect-params="pspid=[[pspid]]&activity=ybar-signin"]').should('be.visible').click();
  cy.get('.pure-button').eq(1).should('be.visible').click();
});

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