Playwright网络流量监控与修改操作全解析

一、为什么需要网络流量控制？

在现代Web应用开发中，网络请求拦截与修改已成为自动化测试的核心需求。Playwright作为新一代浏览器自动化工具，其网络控制能力可精准模拟各种网络场景，验证API请求响应，实现请求参数篡改、响应内容替换等关键操作。

二、环境搭建与基础配置

2.1 安装必要组件

npm install -g @executeautomation/playwright-mcp-server
npm install playwright

安装完成后，建议配置浏览器调试端口：

const browser = await playwright.chromium.launch({
  args: ['--remote-debugging-port=9222']
});

2.2 初始化网络监控

通过page.route()方法注册请求拦截器：

await page.route('/', route => {
  console.log('拦截请求:', route.request().url());
  route.continue();
});

三、核心操作流程详解

3.1 请求拦截与监控

实时捕获网络请求：

page.on('request', request => {
  console.log('>>', request.method(), request.url());
});

page.on('response', response => {
  console.log('<<', response.status(), response.url());
});

3.2 请求参数修改

实现Header篡改：

await page.route('/api/v1/', async route => {
  const headers = route.request().headers();
  headers['Authorization'] = 'Bearer fake_token';
  await route.continue({ headers });
});

3.3 响应内容替换

Mock API响应示例：

await page.route('/user/profile', async route => {
  await route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({name: "测试用户"})
  });
});

3.4 网络延迟模拟

配置网络节流参数：

const context = await browser.newContext({
  offline: false,
  serviceWorkers: 'allow',
  proxy: null,
  httpCredentials: null,
  locale: 'en-US',
  timezoneId: 'America/New_York',
  geolocation: { longitude: 12.492, latitude: 41.889 },
  permissions: [],
  extraHTTPHeaders: {},
  offline: false,
  recordHar: { path: 'network.har' }
});

四、高级应用场景

4.1 HAR文件分析

通过recordHar配置录制网络日志：

const context = await browser.newContext({
  recordHar: { path: 'network.har' }
});

4.2 安全测试实践

XSS漏洞检测示例：

await page.route('/', route => {
  const url = route.request().url();
  if (url.includes('search?q=')) {
    const injectedQuery = url + '';
    route.continue({ url: injectedQuery });
  } else {
    route.continue();
  }
});

4.3 性能优化验证

使用资源过滤提升加载速度：

await page.route('/.{png,jpg,jpeg}', route => route.abort());

五、调试技巧与常见问题

5.1 调试工具组合

推荐使用Playwright Inspector+Chrome DevTools双工具联调：

PWDEBUG=1 npm run test

5.2 典型问题排查

• HTTPS证书错误：在browser.newContext()中配置ignoreHTTPSErrors: true
• 拦截器不生效：检查路由匹配模式是否准确，建议使用/通配符测试
• 内存泄漏：及时清理路由监听器，避免重复注册

六、最佳实践建议

1. 为不同测试场景创建独立的BrowserContext
2. 使用await Promise.all()处理并行请求
3. 定期清理网络监听器和路由配置
4. 结合Jest或Mocha测试框架组织用例
5. 录制HAR文件用于回归测试

通过本文的详细解读，开发者可以快速掌握Playwright的网络流量控制能力。建议结合官方文档和实际项目需求，灵活运用各种网络拦截技巧，构建更健壮的自动化测试体系。在实际操作中注意异常处理机制，确保脚本的稳定性和可维护性。