如何使用node.js抓取具有动态内容的页面？

Question

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

我在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获取这些元素？如何抓取具有动态内容的页面？

Answer 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()
        });
      });
    });
  });
});

Answer 2

查看 GoogleChrome/puppeteer

无头 Chrome 节点 API

它使得抓取变得非常简单。以下示例将抓取 npmjs.com

的标题

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('body).textContent
  });

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

  browser.close();
})();

evaluate

将允许检查动态元素，因为这将在页面上运行脚本。

Answer 3

使用新的 npm 模块 x-ray，以及可插入的 Web 驱动程序 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();
})

Answer 4

作为规范回答这个问题，用于抓取动态网站的 Puppeteer 的替代方案是 Playwright，截至 2023 年也得到了良好的支持。这是一个简单的例子：

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());

---

另一种方法是尝试直接访问API。链接的教程使用了一些 Python，但大多数技术同样适用于 Node。我将在这里总结它们。高级策略是搜索数据的网络请求，以确定数据是否由不安全的 API 端点提供服务。如果是这样，您可以发出传统的 HTTP 请求来直接下载原始 JSON 数据。

在其他情况下，数据可作为静态页面提供的

<script>

标签中的 JS 对象或 JSON 字符串使用。然后可以使用像 Cheerio 这样的 HTML 解析器来提取数据，可能需要使用一些正则表达式。

通常，访问原始数据比浏览器自动化更快、更容易、更可靠。

Answer 5

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

仅将 Browser.js、TimeoutSettings.js、Launcher.js 中的超时 300000 更改为 3000000