CasperJS - 遍历一个 url 数组答案

【问题标题】：CasperJS - loop through an array of urlCasperJS - 遍历一个 url 数组
【发布时间】：2018-04-11 08:18:41
【问题描述】：

我正在尝试使用 CasperJS 遍历一个 url 数组并执行几个步骤。

var links = ['https://www.facebook.com/delivagri/inbox/?selected_item_id=1921693171204929',
'https://www.facebook.com/delivagri/inbox/?selected_item_id=1879523705421876'];

但是当我使用评估函数时，返回变量要么为空，要么仅适用于第一个 URL：

    casper.start().each(links, function(self, link) {
        self.thenOpen(link, function() {
            var list = this.evaluate(function(){
                return document.getElementsByClassName("_50u0 _60p- _14hj")
            });
        console.log("This page contains :", list.length, " unanswered comments");
    });
});

感谢您的回答。

【问题讨论】：

标签： javascript loops url casperjs

【解决方案1】：

您可以使用each() 循环浏览每个页面，并使用getElementsInfo() 检索有关与提供的选择器匹配的所有元素的信息。

这将允许您避免在 CasperJS 环境和远程 DOM 环境之间切换。您可以通过documentation了解更多关于不同环境的信息。

简单的解决方案：

var links = [
  'https://www.facebook.com/delivagri/inbox/?selected_item_id=1921693171204929',
  'https://www.facebook.com/delivagri/inbox/?selected_item_id=1879523705421876'
];

var casper = require('casper').create();

casper.each(links, function (self, link) {
  self.thenOpen(link);
  
  self.then(function () {
    var list = this.getElementsInfo('._50u0._60p-._14hj');
    
    this.echo('This page contains: ' + list.length + ' unanswered comments');
  });
});

casper.run();

注意：此方法不返回NodeList，仅返回匹配元素的简单对象数组；这是因为 Casper 环境和页面 DOM 环境不一样，所以需要对 DOM 对象进行序列化。

【讨论】：

【解决方案2】：

我尝试了你的代码，它对我来说很好，这里有一个有点扩展的版本供你尝试：

var casper = require('casper').create({
  logLevel: 'debug',
  verbose: true,
  viewportSize: {width: 1200, height: 1080 }
});

var links = [
  'https://www.facebook.com/delivagri/inbox/?selected_item_id=1921693171204929',
  'https://www.facebook.com/delivagri/inbox/?selected_item_id=1879523705421876'
];

casper
  .start()
  .each(links, function (self, link) {
    self.thenOpen(link, function () {
      var list = this.evaluate(function () {
        return document.getElementsByClassName("_50u0 _60p- _14hj")
      });
      console.log("This page contains :", list.length, " unanswered comments");
  });
})
.run();

这是我的输出：

[info] [phantom] Starting...
[info] [phantom] Running suite: 4 steps
[debug] [phantom] opening url: https://www.facebook.com/delivagri/inbox/?selected_item_id=1921693171204929, HTTP GET
[debug] [phantom] Navigation requested: url=https://www.facebook.com/delivagri/inbox/?selected_item_id=1921693171204929, type=Other, willNavigate=true, isMainFrame=true
[debug] [phantom] url changed to "https://www.facebook.com/delivagri/inbox/?selected_item_id=1921693171204929"
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=false
[debug] [phantom] Successfully injected Casper client-side utilities
[info] [phantom] Step anonymous 2/4 https://www.facebook.com/delivagri/inbox/?selected_item_id=1921693171204929 (HTTP 200)
This page contains : 0  unanswered comments
[info] [phantom] Step anonymous 2/4: done in 2670ms.
[debug] [phantom] opening url: https://www.facebook.com/delivagri/inbox/?selected_item_id=1879523705421876, HTTP GET
[debug] [phantom] Navigation requested: url=https://www.facebook.com/delivagri/inbox/?selected_item_id=1879523705421876, type=Other, willNavigate=true, isMainFrame=true
[debug] [phantom] url changed to "https://www.facebook.com/delivagri/inbox/?selected_item_id=1879523705421876"
[debug] [phantom] Successfully injected Casper client-side utilities
[info] [phantom] Step anonymous 4/4 https://www.facebook.com/delivagri/inbox/?selected_item_id=1879523705421876 (HTTP 200)
This page contains : 0  unanswered comments
[info] [phantom] Step anonymous 4/4: done in 3524ms.
[info] [phantom] Done 4 steps in 3547ms
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=true
[debug] [phantom] url changed to "about:blank"

这显然会为您的数组中的两个链接运行您的代码。

【讨论】：