5.1 网络拦截与修改

javascript复制代码// 拦截和修改请求
await page.route('**/api/data', route => {
  const json = { customData: 'mocked response' };
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify(json)
  });
});

// 阻止特定资源加载，提高测试速度
await page.route('**/*.{png,jpg,jpeg}', route => route.abort());

// 修改请求头
await page.route('**/api/endpoint', async route => {
  const request = route.request();
  // 获取并修改头信息
  const headers = { ...request.headers(), 'Custom-Header': 'value' };
  // 继续请求，但使用修改后的头信息
  await route.continue({ headers });
});

// 记录所有API请求
const requests = [];
page.on('request', request => {
  if (request.resourceType() === 'fetch' || request.resourceType() === 'xhr') {
    requests.push(request.url());
  }
});

5.2 Service Worker 处理

javascript复制代码// 启用Service Worker支持
const context = await browser.newContext({
  serviceWorkers: 'allow' // 或 'block'
});

// 监听Service Worker
context.on('serviceworker', worker => {
  console.log('Service worker started:', worker.url());
  
  worker.on('console', msg => {
    console.log(`Service worker console [${msg.type()}]: ${msg.text()}`);
  });
});

5.3 性能监控与分析

javascript复制代码// 收集性能指标
const performanceMetrics = await page.evaluate(() => JSON.stringify({
  // 首次内容绘制
  FCP: performance.getEntriesByName('first-contentful-paint')[0]?.startTime,
  // 加载时间
  loadTime: performance.timing.loadEventEnd - performance.timing.navigationStart,
  // DOM完成时间
  domComplete: performance.timing.domComplete - performance.timing.navigationStart
}));

// 使用Chrome开发者工具协议收集更多指标
await page.coverage.startJSCoverage();
await page.goto('https://example.com');
const jsCoverage = await page.coverage.stopJSCoverage();
// 分析JavaScript覆盖率

5.4 多浏览器测试策略

javascript复制代码// 在不同浏览器上运行相同测试
for (const browserType of ['chromium', 'firefox', 'webkit']) {
  const browser = await playwright[browserType].launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  
  console.log(`测试在 ${browserType} 浏览器上运行`);
  // 执行测试...
  
  await browser.close();
}

5.5 视觉比较测试

javascript复制代码// 截取屏幕截图并比较
await page.goto('https://example.com');
// 截取整个页面
const screenshot = await page.screenshot();
// 对比参考图片（需要额外库支持，如pixelmatch）
// ...

// 截取特定元素
await page.locator('.specific-component').screenshot({ path: 'component.png' });

// 配置截图选项
await page.screenshot({
  path: 'screenshot.png',
  fullPage: true,
  omitBackground: true // 透明背景
});