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

前言:

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

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

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

dart 复制代码
```
(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() 直接返回自定义内容。

dart 复制代码
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() 类似,但作用范围是整个浏览器上下文(即所有页面)。

javascript 复制代码
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()

javascript 复制代码
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() 返回静态内容。

javascript 复制代码
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();
})();

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

相关推荐
晴殇i3 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟7 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
凌览10 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
万少12 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z24 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
满分观察网友z26 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
西西木科技丨Shopify开发机构32 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙39 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1140 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆44 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js