加载 html 到 chrome 然后是 jsdom 实例

Question

收到来自 api 的 html 后，我正在做一些 scraping。我想执行以下操作：

在 chrome 中打开 html 页面，以便我可以在控制台中找到选择器。
立即将相同的 html 页面加载到 jsdom 实例中
进入 repl - 然后我可以在控制台中找到正确的选择器并在实时 jsdom 环境中测试它们是否有效。

对于 1，我有：

async function openHtml(htmlString) {

const browser = await puppeteer.launch({headless: false});
 const page = await browser.newPage();
await page.setContent(htmlString);
return;
// await browser.close();
}

api 提供的代码是：

var req = http.request(options, function (res) {
  var chunks = [];
  res.on("data", function (chunk) {
    chunks.push(chunk);
  });

  res.on("end", function () {
    var body = Buffer.concat(chunks);

    response = JSON.parse(body); //response.content = html, response.cookies = cookies

    const dom = new JSDOM(response.content);
    console.log(dom.window.document.querySelector("p").textContent); // "Hello world"

    openHtml(response.content);
    console.log('hi');
  });

});

req.end();

如果我运行命令行中的代码，浏览器将按预期打开。但是，如果我在以下位置设置断点：

    console.log('hi');

没有。我怎样才能让它工作？

Answer 1

openHtml 是一个异步函数。因此，您必须将 await (promise) 中的方法调用和 main 函数也设置为异步。

var req = http.request(options, function (res) {
    var chunks = []
    res.on('data', function (chunk) {
        chunks.push(chunk)
    })

    res.on('end', async function () {
        var body = Buffer.concat(chunks)

        response = JSON.parse(body) //response.content = html, response.cookies = cookies

        const dom = new JSDOM(response.content)
        console.log(dom.window.document.querySelector('p').textContent) // 'Hello world'

        await openHtml(response.content)
        console.log('hi')
    })

})

req.end()

加载 html 到 chrome 然后是 jsdom 实例

Loading html into chrome followed by jsdom instance

javascript

node.js

asynchronous

puppeteer

jsdom