javascript - 使用 casperjs 从灯箱中抓取文本

Question

我正在使用 casperjs 从网站上抓取文本，到目前为止效果很好。然而，我正在抓取的这个页面上有数百种产品，其中一些产品旁边有一个橙色按钮。

橙色按钮有一个按钮小橙色类。如果您点击这个橙色按钮，它将弹出一个带有产品描述的灯箱。

我如何让 casper 点击橙色按钮(如果有)然后抓取描述，然后退出灯箱，然后继续迭代 100 个产品？

Answer 1

您需要确定每个步骤中涉及的元素。您可以使用 Firefox 或 Chrome 中的开发人员工具来完成此操作。

你可以这样找到元素的数量:

var buttonNumber = casper.getElementsInfo(".button.small.orange").length;

然后，您可以迭代按钮并考虑最大值:

var x = require('casper').selectXPath
for(var i = 0; i < buttonNumber; i++) {
    casper.thenClick(x("(//*[contains(@class,'button') and contains(@class,'small') and contains(@class,'orange')])["+(i+1)+"]"));
    scheduleScrapeAndClose();
}

XPath 表达式的 //*[contains(@class,'button') and ...] 部分基本上等同于 .button.small.orange CSS 选择器。它返回一个节点列表，之后的索引就是您迭代的按钮。例如:(//*[...])[1]

您唯一要做的就是定义 scheduleScrapeAndClose 函数。它可能看起来像这样:

function scheduleScrapeAndClose(){
    casper.waitUntilVisible("your light box selector");
    casper.then(function(){
        // scrape the description
        var descr = this.fetchText("your description selector");
        this.click("your light box close selector");
    });
    casper.waitWhileVisible("again, your light box selector");
}

我假设每次点击按钮时只存在一个灯箱。

把它们放在一起看起来像这样:

var x = require('casper').selectXPath,
    casper = require('casper').create();

function scheduleScrapeAndClose(){
    // stuff from above
}
casper.start(url);
casper.then(function(){
    var buttonNumber = casper.getElementsInfo(".button.small.orange").length;
    for(var i = 0; i < buttonNumber; i++) {
        casper.thenClick(x("(//*[contains(@class,'button') and contains(@class,'small') and contains(@class,'orange')])["+(i+1)+"]"));
        scheduleScrapeAndClose();
    }
});
casper.run(function(){this.exit();});