调试 Web 应用接口请求的方法

Playwright 是一个强大的自动化测试工具，结合 GitHub Copilot 可以更高效地捕获和分析网络请求异常。以下方法可以帮助开发者快速定位问题。

使用 Playwright 捕获网络请求

Playwright 提供 page.on('request') 和 page.on('response') 事件监听器，用于捕获请求和响应数据。通过记录请求和响应信息，可以分析接口行为。

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // 监听请求
  page.on('request', request => {
    console.log('Request:', request.method(), request.url());
  });

  // 监听响应
  page.on('response', response => {
    console.log('Response:', response.status(), response.url());
  });

  await page.goto('https://example.com');
  await browser.close();
})();

结合 GitHub Copilot 分析异常

GitHub Copilot 可以辅助编写代码逻辑，帮助快速生成断言或异常处理逻辑。例如，在捕获到异常响应时，Copilot 可以建议合适的错误处理代码。

page.on('response', async response => {
  if (response.status() >= 400) {
    const body = await response.json();
    console.error('Error response:', body);
    // Copilot 可能建议生成更详细的错误分析逻辑
  }
});

过滤和断言特定请求

通过 Playwright 的 page.waitForRequest 或 page.waitForResponse，可以针对特定接口进行调试。结合正则表达式或 URL 匹配，精准捕获目标请求。

await page.goto('https://example.com');
const response = await page.waitForResponse(response => 
  response.url().includes('/api/data') && response.status() === 200
);
console.log('Data API response:', await response.json());

生成测试报告

将捕获的请求和响应数据整合为测试报告，便于后续分析。Playwright 支持生成多种格式的测试报告，如 JSON 或 HTML。

const fs = require('fs');

page.on('response', async response => {
  const report = {
    url: response.url(),
    status: response.status(),
    headers: response.headers(),
    body: await response.json()
  };
  fs.writeFileSync('network-report.json', JSON.stringify(report, null, 2));
});

调试技巧

在开发过程中，启用 Playwright 的 headless: false 模式，可以直观地观察页面行为。结合浏览器开发者工具，进一步分析网络请求的细节。

const browser = await chromium.launch({ headless: false });

通过以上方法，可以高效地调试 Web 应用的接口请求，快速定位异常问题。