Playwright MCP 调试断点技巧

调试 Web 应用时，Playwright 的 MCP（Multi-Context Playwright）模式支持灵活的断点设置。通过 page.pause() 方法可以在代码中插入断点，运行时会自动打开 Playwright Inspector 工具，允许逐步执行脚本、查看 DOM 和网络请求。

在测试脚本中插入以下代码触发断点：

await page.pause(); // 启动交互式调试

利用 GitHub Copilot 简化脚本编写

GitHub Copilot 可以基于自然语言描述生成 Playwright 脚本片段。例如输入注释：

// 登录并跳转到用户主页

Copilot 可能自动补全为：

await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');

常用调试命令组合

结合 page.pause() 与 Playwright API 实现高效调试：

await page.goto('https://example.com');
console.log(await page.title()); // 打印当前标题
await page.screenshot({ path: 'debug.png' }); // 保存截图
await page.pause(); // 进入交互模式

条件断点设置

通过 page.evaluate() 在特定条件下触发断点：

const elementExists = await page.$('#error-message');
if (elementExists) {
  await page.pause(); // 仅在出现错误时暂停
}

网络请求监控

在断点状态下使用 page.on('request') 监听网络活动：

page.on('request', request => {
  console.log('Request:', request.url());
});
await page.pause(); // 查看实时请求日志