如何抓取JS渲染页面？

Question

我目前正在使用request-promise npm模块在我的网站上抓取URL列表。

这可以很好地满足我的需求，但是，我注意到并不是所有的div都出现了，因为有些是在使用JS之后渲染的。 我知道我不能远程运行该JS代码以强制渲染，但是有什么方法只有在添加了这些元素之后才能刮取页面？

我目前正在使用Node进行此操作，并且如果可能，希望继续使用Node。

这是我所拥有的：

const urls ['fake.com/link-1', 'fake.com/link-2', 'fake.com/link-3']

urls.forEach(url => {
  request(url)
    .then(function(html){
      //get dummy dom
      const d_dom = new JSDOM(html);
      ....
    }
});

关于如何实现这一目标的任何想法？ 或者，如果目前有Selenium作为npm模块的替代方案？

Answer 1

您将要使用puppeteer ，它是Chrome无头浏览器（由Chrome / Google拥有和维护），用于加载和解析动态网页。

使用page.goto()转到特定页面，然后使用page.content（）从呈现的页面加载html内容。

这是一个如何使用它的示例：

const { JSDOM } = require("jsdom");
const puppeteer = require('puppeteer')

const urls = ['fake.com/link-1', 'fake.com/link-2', 'fake.com/link-3']

urls.forEach(async url => {
  let dom = new JSDOM(await makeRequest(url))
  console.log(dom.window.document.title)
});

async function makeRequest(url) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);
  let html = await page.content()

  await browser.close();
  return html
}