如何在Cypress测试中设置断点？

Cypress 调试方法 #

• Test Runner 可视化断点：启动Cypress（npx cypress open），在左侧选中要调试的测试用例，右侧代码区域直接点击行号就能添加断点。点击顶部运行按钮后，测试会在断点处暂停，此时可以查看页面实时状态、控制台输出，还能在开发者工具里检查变量值和调用栈。
• 插入debugger语句：在代码中需要暂停的位置直接写debugger;，比如：

  cy.get('.login-btn').click();
  debugger; // 执行到这里会暂停
  cy.get('.user-info').should('be.visible');
  

  启动Cypress后，浏览器会自动打开开发者工具，执行到debugger行时就会进入调试模式，和前端页面调试逻辑完全一致。
• 命令行带调试启动：如果用命令行运行，加上--headed --devtools参数，比如npx cypress run --headed --devtools，会以有头模式启动并自动打开开发者工具，方便断点调试。

Playwright 调试方法 #

• Playwright Inspector 工具：这是官方专门的调试工具，启动测试时设置环境变量PWDEBUG=1，比如PWDEBUG=1 npx playwright test，会弹出Inspector窗口。你可以在这里查看测试步骤、手动单步执行，还能在代码中插入await page.pause();，执行到这行时会自动暂停在Inspector里，方便你检查页面元素、调整代码后重新执行。
• 插入debugger语句：同样在需要暂停的位置加debugger;，然后用--headed --devtools参数启动测试，比如npx playwright test --headed --devtools，浏览器会自动打开开发者工具，执行到断点时暂停，能查看变量、调用栈等信息。
• VS Code 直接调试：在VS Code里配置launch.json文件，内容如下：

  {
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Playwright Debug",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/node_modules/@playwright/test/cli.js",
        "args": ["test", "--headed"],
        "console": "integratedTerminal",
        "skipFiles": ["<node_internals>/**"]
      }
    ]
  }
  

  配置完成后，直接在代码行号处点击添加断点，点击VS Code左侧的调试按钮就能启动测试并逐步执行，和普通Node.js项目调试完全一样。

新手调试建议 #

刚开始转换代码时，优先用可视化调试工具（Cypress Test Runner、Playwright Inspector），这类工具不需要改代码就能快速加断点，能帮你快速理解原有Cypress代码的执行逻辑，再对应转换成Playwright代码后，用同样的方法验证逻辑是否正确。

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