Playwright中修改接口返回的5种方法

前言：

在使用Playwright做自动化测试过程中，拦截接口并修改返回数据是一个非常常见的场景，今天我们就来总结下，都有哪些方法可以让我们实现这个功能。

方法1：使用 page.route() 方法

page.route() 是 Playwright 中常用的拦截和修改网络请求的方法。你可以拦截请求并返回自定义的响应。

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

  // 拦截请求并修改响应
  await page.route('**/api/some-endpoint', async (route) => {
    // 获取原始响应
    const response = await route.fetch();
    const originalBody = await response.json();

    // 修改响应内容
    originalBody.someField = 'modified value';

    // 返回修改后的响应
    await route.fulfill({
      status: response.status(),
      headers: response.headers(),
      body: JSON.stringify(originalBody),
    });
  });

  // 导航到页面
  await page.goto('https://example.com');

  // 等待页面加载完成
  await page.waitForTimeout(5000); // 仅用于演示，实际使用时建议使用更可靠的等待方式

  await browser.close();
})();
```

方法2：使用 page.setRequestInterception(true) 拦截并直接返回自定义内容

通过 page.setRequestInterception(true) 启用请求拦截，然后使用 request.respond() 直接返回自定义内容。

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

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

  // 启用请求拦截
  await page.setRequestInterception(true);

  // 监听请求事件
  page.on('request', async (request) => {
    if (request.url().includes('api/some-endpoint')) {
      // 直接返回自定义响应
      await request.respond({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ someField: 'modified value' }),
      });
    } else {
      // 继续其他请求
      request.continue();
    }
  });

  // 导航到页面
  await page.goto('https://example.com');

  // 等待页面加载完成
  await page.waitForTimeout(5000); // 仅用于演示，实际使用时建议使用更可靠的等待方式

  await browser.close();
})();

方法3：使用 browserContext.route() 拦截并修改返回内容

browserContext.route() 与 page.route() 类似，但作用范围是整个浏览器上下文（即所有页面）。

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

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();

  // 拦截请求并修改响应
  await context.route('**/api/some-endpoint', async (route) => {
    // 获取原始响应
    const response = await route.fetch();
    const originalBody = await response.json();

    // 修改响应内容
    originalBody.someField = 'modified value';

    // 返回修改后的响应
    await route.fulfill({
      status: response.status(),
      headers: response.headers(),
      body: JSON.stringify(originalBody),
    });
  });

  const page = await context.newPage();
  await page.goto('https://example.com');

  // 等待页面加载完成
  await page.waitForTimeout(5000); // 仅用于演示，实际使用时建议使用更可靠的等待方式

  await browser.close();
})();

方法 4：使用 page.evaluate() 在页面上下文中修改返回内容

如果需要在页面上下文中动态修改返回内容，可以使用 page.evaluate()。

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

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

  // 导航到页面
  await page.goto('https://example.com');

  // 在页面上下文中修改返回内容
  await page.evaluate(async () => {
    const originalResponse = await fetch('/api/some-endpoint');
    const originalData = await originalResponse.json();

    // 修改返回内容
    originalData.someField = 'modified value';

    // 覆盖 fetch 方法以返回修改后的内容
    window.fetch = new Proxy(window.fetch, {
      apply: async (target, thisArg, args) => {
        if (args[0].includes('/api/some-endpoint')) {
          return Promise.resolve({
            ok: true,
            status: 200,
            json: () => Promise.resolve(originalData),
          });
        }
        return target.apply(thisArg, args);
      },
    });
  });

  // 等待页面加载完成
  await page.waitForTimeout(5000); // 仅用于演示，实际使用时建议使用更可靠的等待方式

  await browser.close();
})();

方法 5：使用 route.fulfill() 直接返回静态内容

如果不需要依赖原始响应，可以直接使用 route.fulfill() 返回静态内容。

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

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

  // 拦截请求并返回静态内容
  await page.route('**/api/some-endpoint', async (route) => {
    await route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({ someField: 'modified value' }),
    });
  });

  // 导航到页面
  await page.goto('https://example.com');

  // 等待页面加载完成
  await page.waitForTimeout(5000); // 仅用于演示，实际使用时建议使用更可靠的等待方式

  await browser.close();
})();

以上，就是所有的方法了，大家可以在项目中实践看看效果。