如何使用 node.js 抓取包含动态内容的页面？答案

【问题标题】：How can I scrape pages with dynamic content using node.js?如何使用 node.js 抓取包含动态内容的页面？
【发布时间】：2023-02-06 18:20:19
【问题描述】：

我正在尝试抓取 website，但我没有得到某些元素，因为这些元素是动态创建的。

我在 node.js 中使用 cheerio，我的代码如下。

var request = require('request');
var cheerio = require('cheerio');
var url = "http://www.bdtong.co.kr/index.php?c_category=C02";

request(url, function (err, res, html) {
    var $ = cheerio.load(html);
    $('.listMain > li').each(function () {
        console.log($(this).find('a').attr('href'));
    });
});

此代码返回空响应，因为当页面加载时，<ul id="store_list" class="listMain"> 为空。

内容尚未附加。

如何使用 node.js 获取这些元素？如何抓取包含动态内容的页面？

【问题讨论】：

使用 phantom.js 无头浏览器，它将加载并呈现页面。您可以使用其 javascript API 访问页面上的不同元素。
谢谢萨菲！但是你能给我一个代码 sn-p 或一些关于这个案例的参考吗？
@Safi Phantom 已弃用且不再维护，因此如果您不介意的话，我建议删除评论并将此标记为删除。

标签： javascript node.js web-crawler phantomjs

【解决方案1】：

干得好;

var phantom = require('phantom');

phantom.create(function (ph) {
  ph.createPage(function (page) {
    var url = "http://www.bdtong.co.kr/index.php?c_category=C02";
    page.open(url, function() {
      page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
        page.evaluate(function() {
          $('.listMain > li').each(function () {
            console.log($(this).find('a').attr('href'));
          });
        }, function(){
          ph.exit()
        });
      });
    });
  });
});

【讨论】：

这很好用！非常感谢。但我还有一个问题。此页面使用向下滚动附加子项。所以我必须知道该组何时结束。可能在代码上方声明回调（function（）{ph.exit（）}但幻影未终止并保留光标！
@Safi 我复制并尝试了上面的代码但没有任何反应。你能帮我么。我运行 node file.js 并进入下一行。
这段代码的确切位置是等待ajax完成加载的逻辑？我不明白幻影怎么会知道。
幻影：⚠️此软件包已被弃用⚠️ 这个包不再维护。您可能想尝试使用 puppeteer
@1mike12 您可以在打开页面后等待 setTimeout 承诺，或者 Phantom 的 waitFor 可以帮助您验证页面内的某个条件是否为真

【解决方案2】：

查看GoogleChrome/puppeteer

无头 Chrome 节点 API

它使抓取变得非常微不足道。以下示例将在 npmjs.com 处抓取标题（假设保留 .npm-expansions）
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://www.npmjs.com/');

  const textContent = await page.evaluate(() => {
    return document.querySelector('.npm-expansions').textContent
  });

  console.log(textContent); /* No Problem Mate */

  browser.close();
})();
evaluate 将允许检查动态元素，因为这将在页面上运行脚本。

【讨论】：

不错的选择，会计，这个announcement
我读了一些文章，我可以说 puppeteer 在服务器（node.js）上而不是在客户端（在浏览器中）运行吗？

【解决方案3】：

使用新的 npm 模块x-ray，以及可插入的网络驱动程序x-ray-phantom。

上面页面中的示例，但这里是如何进行动态抓取的：

var phantom = require('x-ray-phantom');
var Xray = require('x-ray');

var x = Xray()
  .driver(phantom());

x('http://google.com', 'title')(function(err, str) {
  if (err) return done(err);
  assert.equal('Google', str);
  done();
})

【讨论】：

您是以node google_xray_code.js 还是phantomjs google_xray_code.js 运行此程序？？在当前形式下，phantomjs 不是节点模块。
@zipzit phantom 不是节点模块；它是您在外部安装并导出路径的驱动程序，如果您希望将其与 X 射线一起使用。
是什么让它充满活力？ google.com 的页面标题是静态的不是吗？
phantom stderr: 'phantomjs' 不是内部或外部命令，也不是可运行的程序或批处理文件。 C:ProjectsDealbuilder1一个 ode_modules ightmarelibindex.js:284 抛出错误； ^
我试过这个，x-ray 在静态网站上工作得很好。但是对于dynamic x-ray-phantom的安装就很头疼了。取而代之的是，我发现了pusher.com/tutorials/web-scraper-node中提到的静态+动态报废的非常现实和简单的解决方案

【解决方案4】：

将此作为规范回答，用于抓取动态站点的 Puppeteer 的替代方案从 2023 年起也得到了很好的支持，Playwright。这是一个简单的例子：

const playwright = require("playwright"); // ^1.28.1

let browser;
(async () => {
  browser = await playwright.chromium.launch();
  const page = await browser.newPage();
  await page.goto("https://example.com");
  const text = await page.locator('h1:text("Example")').textContent();
  console.log(text); // => Example Domain
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

【讨论】：

【解决方案5】：

最简单可靠的解决方案是使用 puppeteer。正如https://pusher.com/tutorials/web-scraper-node中提到的，静态+动态都适用刮.

只将Browser.js、TimeoutSettings.js、Launcher.js中的超时时间从300000改成3000000

【讨论】：

这对已经推荐 Puppeteer 的 this answer 没有太大帮助。