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

Question

我只是想从 this amazon URL 获取优惠商品：

当我在浏览器中打开此 link 并在控制台中编写查询时，它有效： 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() 截取屏幕截图时，它显示带有 unloaded/unfinished JS 的页面（ 这与我们在 URL 中键入时不同浏览器和搜索：):

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

我们将不胜感激任何帮助

Answer 1

根据 documentation on the evaluate method in PhantomJS

Note: The arguments and the return value to the evaluate function must be a simple primitive object. The rule of thumb: if it can be serialized via JSON, then it is fine.

Closures, functions, DOM nodes, etc. will not work!

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

Answer 2

之所以 document.querySelectorAll('div[class*="DealItem-module__dealItem_"]) 只有 return 在浏览器控制台而不是 PhantomJS 脚本中产生结果，是因为它们运行在页面的两个不同版本上：

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

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

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

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

最后：像 Amazon 和 Google 这样的大型网站非常擅长检测和防止自动机器人抓取他们的网站。将来您可能会遇到更多障碍！

更新：

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

Answer 3

感谢 Leftium 和 James 的回答，我试过了 waitFor.js and other suggestions on Stack Overflow. But none of them worked. Now I am using Nightmare.js and it's working now, using Nighmare.js - Asynchronous operations and loops and Looping through pages when next is available #402

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

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

phantomjs: document.querySelectorAll() not working for dynamic page

javascript

web-crawler

selectors-api

phantomjs