Playwright route 伪造路由数据

route方法

• abort() 取消匹配的路由请求
• fulfill(response) 伪造服务器返回数据，如body、headers等
• continue(request) 伪造路由请求数据
• fallback(request) 伪造路由请求数据，允许多次使用

接口调用关系

• page.route(url, callback)回调里只能有一个route方法，否则会报错Route is already handled
• 相同路由情况下，page.route回调按注册时顺序，反序执行
• 相同路由上使用abort / continue / fulfill方法只能有一个生效，但在其后面可以搭配多个fallback方法
• fallback可以单独使用，类似continue

接口实战

1. 使用route.fulfill为response添加 CORS headers，实现接口跨域

await page.route('**/test', async (route) => {
  const response = await page.request.fetch(route.request());
  
  route.fulfill({
    response,
    headers: {
      ...response.headers(),
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'POST',
      'Access-Control-Allow-Headers': 'Content-Type',
    },
  });
})

2. 使用route.fallback，伪造请求的referer

await page.route('**/test',async (route) => {
  route.fallback({
    headers: {
      referer: 'https://xxx.com/',
    },
  });
})

3. 使用fallback错误案例

// Error: Route is already handled!
await page.route('**/test',async (route) => {
  route.fulfill();
  route.fallback();
})

4. 使用fallback正确顺序

await page.route('**/test',async (route) => {
  route.fulfill();
});

await page.route('**/test',async (route) => {
  route.fallback();
});

小结

Playwright是一个优秀的E2E框架，route方法功能强大。在CI环境中，定能绽放光彩