Cypress Chrome浏览器未在debugger语句处暂停问题问询

一、debugger语句未触发暂停的解决方案 #

你遇到的这个情况，核心原因是Cypressshould命令的重试机制在搞鬼。should作为断言命令，为了保证断言稳定通过，会反复执行回调函数直到断言成功或超时，这种重复执行的逻辑会干扰debugger的触发——浏览器不会在每次回调执行时都响应debugger语句，而手动断点是你主动标记的，不受这个机制影响。

给你两个靠谱的解决办法：

1. 改用cy.then()代替should #

then命令只会执行一次回调，没有重试逻辑，debugger就能正常触发暂停：

it('shows correct language', () => { 
  cy.visit('/product/my product'); 
  cy.changeLanguage('English'); 
  cy.get('[data-test=attribute-name]').then( (elements) => { 
    console.log('this shows in console', elements); 
    alert('But it wont break!!!!!!!!!!');
    debugger; // 现在会正常触发暂停了
  }); 
});

2. 使用Cypress原生的cy.debug()命令 #

如果你想保留断言逻辑，同时触发调试，可以在should之后添加cy.debug()，它是Cypress专门适配测试流程的调试命令：

it('shows correct language', () => { 
  cy.visit('/product/my product'); 
  cy.changeLanguage('English'); 
  cy.get('[data-test=attribute-name]')
    .should('have.length.greaterThan', 0) // 保留你的断言逻辑
    .debug(); // 触发调试器暂停，此时可直接在Sources面板查看当前元素
});

cy.debug()会自动暂停测试，还能让你在DevTools中直接访问当前命令返回的元素，比手动写debugger更适配Cypress的执行逻辑。

二、启动Chrome时自动打开开发者工具 #

要让Cypress启动Chrome时自动弹出DevTools，只需在Cypress配置文件中添加Chrome的启动参数即可：

对于Cypress v10+（使用cypress.config.js） #

在配置文件中添加浏览器启动参数：

module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      // 你的其他Node事件配置
    },
    browsers: [
      {
        name: 'chrome',
        channel: 'stable',
        args: ['--auto-open-devtools-for-tabs']
      }
    ]
  }
};

对于Cypress v9及以下（使用cypress.json） #

直接在配置文件中添加chromeArgs：

{
  "chromeArgs": ["--auto-open-devtools-for-tabs"]
}

配置完成后，再用./node_modules/.bin/cypress open启动Cypress，打开Chrome时就会自动弹出开发者工具了。

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