Puppeteer 等响应、拦请求

[felix-cao]

一、场景

有两个API请求，当拿到API1响应后的数据data，若该数据不是空数组时立刻去请求API2，否则不请求。
假设AP1为：api/tool/${id}, API2为：api/tool/${id}/tab

需要拿到第一次响应后的数据，拦截第二次请求并让第二次请求等待 n 秒后再去触发API请求

二、等待第一次请求响应的数据

const id = 100;
const urlStr = `api/tool/${id}`;
const Response = await newPage.waitForResponse(res => res.url().includes(urlStr));
if(!Response.ok()) {
  throw new Error(JSON.stringify({ErrorAPIURL: Response.url(), status: Response.status()}));
}

const data = JSON.parse(await Response.text());

waitForResponse 文档

三、拦截第二次请求

const id = 100;
const urlStr = `api/tool/${id}/tab`;
await newPage.setRequestInterception(true);
const interceptedRequest = async (request) => {
  if(request.url().includes(`${urlStr}/`)) {
    await newPage.waitForTimeout(500);
    request.continue();
    return;
  }
  request.continue();
}
if(!newPage.listenerCount('request')) {  
  newPage.on('request', interceptedRequest);
}

• on 方法 和 listenerCount 方法
• 我的场景是在一个循环中，newPage.listenerCount('request')是为了防止添加过多的page.on('request')监听器

Reference

• Puppeteer API;
• Puppeteer 使用技巧 #185
• 基于 Vue 的 E2E test 环境搭建 #204