phantomjs：document.querySelectorAll() 不适用于动态页面

Question

我只是想从this amazon URL 获取交易项目：

当我在浏览器中打开此链接并在控制台中编写查询时，它可以工作： document.querySelectorAll('div[class*="DealItem-module__dealItem_"]')

但是当我尝试通过这个phantomjs 脚本获取这个时，它似乎总是什么都不返回：

var page = require('webpage').create();

page.viewportSize = { height: 800, width: 1920 }; // BRODIE : CHROME

page.customHeaders = {
  accept:
    'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
  // 'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'en-US,en;q=0.9',
  dnt: '1',
  'sec-ch-ua':
    '" Not A;Brand";v="99", "Chromium";v="90", "Microsoft Edge";v="90"',
  'sec-ch-ua-mobile': '?0',
  'sec-fetch-dest': 'document',
  'sec-fetch-mode': 'navigate',
  'sec-fetch-site': 'none',
  'sec-fetch-user': '?1',
  'upgrade-insecure-requests': '1',
  'user-agent':
    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36 Edg/90.0.818.66',
};

page.settings.javascriptEnabled = true;
page.settings.loadImages = false;
//Script is much faster with this field set to false
phantom.cookiesEnabled = true;
phantom.javascriptEnabled = true;

page.onConsoleMessage = function (message) {
  console.log('console.log() -- ', message);
}; // BUBBLE UP LOGS FROM BROWSER CONSOLE TO PHANTOM CONSOLE

page.onLoadStarted = function () {
  loadInProgress = true;
  console.log('page loading started');
};
page.onLoadFinished = function () {
  loadInProgress = false;
  console.log('page loading finished');
};

page.onError = function (msg, trace) {
  console.log(msg);
  trace.forEach(function (item) {
    console.log('  ', item.file, ':', item.line);
  });
};

// OPEN PAGE
console.log('page.open()');
page.open(
  'https://www.amazon.com/gp/goldbox/ref=gbps_ftr_s-5_cd34_wht_26179410?gb_f_deals1=sortOrder:BY_SCORE,includedAccessTypes:GIVEAWAY_DEAL,enforcedCategories:2617941011&pf_rd_p=fd51d8cf-b5df-4144-8086-80096db8cd34&pf_rd_s=slot-5&pf_rd_t=701&pf_rd_i=gb_main&pf_rd_m=ATVPDKIKX0DER&pf_rd_r=A89BX6V6RQRQ94NFA0DP&ie=UTF8',
  function (status) {
    if (status !== 'success')
      console.log('U N A B L E   T O   O P E N   P A G E . . .');
    else console.log(' P A G E   O P E N E D . . .');

    var selector = 'div[class*="DealItem-module__dealItem_"]'

    var findAll = setInterval(function () {
      console.log('trying to fetch deals...');
      var deals = page.evaluate(function (sel) {
        return document.querySelectorAll(
          'div[class*="DealItem-module__dealItem_"]'
        );
      }, selector);

      if(deals.length) {
        console.log('deals.length', deals.length);
        clearInterval(findAll);
      }
    }, 1000);
  }
);

另外，当我尝试使用page.render() 截屏时，它会显示带有未加载/未完成的 JS 的页面（这与我们在浏览器中键入该 URL 并搜索时不同：）： p>

另外，我注意到当我在终端中运行这个脚本时，我得到了一些网页的 JS 错误：

任何帮助将不胜感激

Answer 1

根据documentation on the evaluate method in PhantomJS

注意：评估函数的参数和返回值必须是简单的原始对象。经验法则：如果可以通过 JSON 序列化就可以了。

闭包、函数、DOM 节点等将不起作用！

相反，您应该在评估中执行长度计算，然后返回简单的原始长度。

Answer 2

感谢 Leftium 和 James 的回答，我已经尝试过 waitFor.js 以及有关 Stack Overflow 的其他建议。但他们都没有工作。现在我正在使用Nightmare.js，它现在正在工作，使用Nighmare.js - Asynchronous operations and loops 和Looping through pages when next is available #402

不过，知道如何使用 phantom.js 会很好

Answer 3

document.querySelectorAll('div[class*="DealItem-module__dealItem_"]) 仅在浏览器控制台中返回结果而不是 PhantomJS 脚本的原因是因为它们在页面的两个不同版本上运行：

1. 在 phantomjs 脚本中，您没有登录。因此亚马逊显示“登录”页面而不是交易列表。
   • PhantomJS page.render() 的截图证实了这一点。
2. 在浏览器中，您已登录，因此亚马逊网站会显示包含与此查询匹配的 DOM 元素的交易列表。
   • 如果您退出亚马逊或使用隐身浏览器，您可以进一步确认document.querySelectorAll() 不会在浏览器中返回任何内容。 （有趣的是，当我在隐身模式下退出时，该亚马逊 URL 确实为我显示了一个交易列表。亚马逊可能只会在怀疑自动机器人正在访问该 URL 时才显示该登录消息......）

要让 PhantomJS 脚本抓取与您在浏览器中看到的页面相同的页面，您必须首先在 PhantomJS 无头浏览器上登录 Amazon。 （PhantomJS 可能使用与您的浏览器不同的浏览器可执行文件。）有几种不同的方法可以做到这一点：

• 从 PhantomJS 脚本手动登录。这并不简单；你必须：
  1. 加载登录页面。
  2. 找到用户ID字段并填写您的ID。
  3. 找到密码字段并填写您的密码。
  4. 找到提交按钮并单击它。
  5. 解决您遇到的任何 CAPTCHA 亚马逊挑战。
• 在浏览器中登录 Amazon 后获取 Amazon 会话 cookie，然后在 PhantomJS 脚本中使用这些 cookie。这通常更容易，但并不总是有效，必须在每次 cookie 过期时重复。
• 告诉 PhantomJS 将浏览器与您的 Amazon 会话 cookie 一起使用。我不确定 PhantomJS 是否可行，但这是一个可配置的 NickJS setting（另一个可编写脚本的无头浏览器）。

由于亚马逊有时会在未登录时显示交易列表，因此您可以通过使 PhantomJS 看起来像一个真正的浏览器来获得交易列表而无需登录：确保 PhantomJS 发送所有 cookie 和用户代理字符串，如一个真正的浏览器。

最后：像亚马逊和谷歌这样的大型网站非常擅长检测和防止自动机器人抓取他们的网站。未来你可能会面临更多的障碍！

---

更新：

我刚刚检查了亚马逊的 URL，确实有 HTTP-only cookie。无法从 JavaScript 访问（既不读取也不写入）这种类型的 cookie。因此，除了通过 PhantomJS 脚本手动登录之外，PhantomJS 很有可能无法读取/写入这些 cookie：