puppeteer：在 DevTools 的网络选项卡中访问特定请求的 JSON 响应

Question

我想直接获取屏幕截图中显示的最后一个 HTTP 请求的响应。

当前的 puppeteer 代码如下所示。有人可以告诉我如何修改它，以便它可以直接从浏览器获得 JSON 响应吗？谢谢。

const puppeteer = require('puppeteer');

(async () => {
    //  const browser = await puppeteer.launch();
    const browser = await puppeteer.launch({
        headless: false
        , args: ['--user-agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3312.0 Safari/537.36"']
    });
    const page = await browser.newPage();
    await page.goto('https://www.genecards.org/cgi-bin/carddisp.pl?gene=BSCL2');
    await page.goto('https://www.genecards.org/cgi-bin/carddisp.pl?gene=BSCL2');

    const linkHandlers = await page.$x("//div[@id='enhancers']//a[@data-track-event='Table See-All']");
    if (linkHandlers.length > 0) {
        await linkHandlers[0].click();
    } else {
        throw new Error("Link not found");
    }

    const html = await page.content()
    //await browser.close();
    console.log(html)
})();

Answer 1

您可以使用page.waitForResponse等待响应并将response.json响应解析为 JSON。

代码

用await linkHandlers[0].click();这个替换零件：

const [response] = await Promise.all([
    page.waitForResponse(response => response.url().includes('/gene/api/data/Enhancers')),
    linkHandlers[0].click()
]);
const dataObj = await response.json();
console.log(dataObj);

这将首先等待响应（同时进行点击）。检测到响应后，响应被解析为 JSON。要将响应结果作为纯文本（而不是解析它），您可以使用response.text()