抓取JS渲染页面的方法？

Question

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

这很好地满足了我的需求，然而，我注意到并不是所有的div都会出现，因为有些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 headless浏览器(由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
}