javascript - 如何在 CasperJS 中使用 jQuery find() 函数？

Question

我想做类似于 Cabybara 的事情在 CasperJS 的函数内。我想获取父 div 并从它们的子元素中检索文本。

像这样:

$('div.education').find('h4').text()
$('div.education').find('h1').text()

代码片段如下:

casper.page.injectJs('/jquery-latest.min.js');
var links = casper.evaluate(function() {
    var elements = $('div.education');
    return elements.map(function(e){
           this.fetchText(casper.evaluate(function(){
                return e.find('h4.summary');
           }));
           this.fetchText(casper.evaluate(function(){
                return e.find('h1');
           }));
    });
});
casper.echo(links);

当前它返回 null。如何在 CasperJS 中实现这一点？

Answer 1

$('div.education').find('h4')

应该在功能上等同于 CSS 选择器

'div.education h4'

如果你想从这些节点获取文本，你可以使用casper.fetchText() , 但它会将所有文本连接成一个字符串。另一个有用的函数是 casper.getElementsInfo()因为它已经提供了文本属性:

casper.then(function(){
    var h4Texts = this.getElementsInfo('div.education h4').map(function(h4){
        return h4.text;
    });
    var h1Texts = this.getElementsInfo('div.education h1').map(function(h1){
        return h1.text;
    });
    // do something with h4Texts and h1Texts
});

对于同一个父元素，这两个不同列表中的 h4 和 h1 文本可能不是您想要的。您仍然可以使用 CasperJS 的函数来使用 CasperJS 的 XPath 支持将 h4 和 h1 文本放在一起:

var x = require('casper').selectXPath;
casper.then(function(){
    var parents = this.getElementsInfo('div.education');
    var result = parents.map(function(divInfo, i){
        var h4Texts = this.getElementsInfo(x('(//div[contains(@class,'education')])['+(i+1)+']//h4')
            .map(function(h4){
                return h4.text;
            });
        var h1Texts = this.getElementsInfo(x('(//div[contains(@class,'education')])['+(i+1)+']//h1')
            .map(function(h1){
                return h1.text;
            });
        return {h1: h1Texts, h4: h4Texts};
    });

    var h1Texts = this.getElementsInfo('div.education h1').map(function(h1){
        return h1.text;
    });
    // do something with `result`
});

描述:

• //div[contains(@class,'education')]返回父元素的节点列表，
• (//div[contains(@class,'education')])['+(i+1)+'] 取 i+1-第 parent(从 1 开始计数)和
• (//div[contains(@class,'education')])['+(i+1)+']//h1 和 (//div[contains (@class,'education')])['+(i+1)+']//h4 查找同一父代的 h1 和 h4 后代。

---

您的代码有多个问题。

casper.page.injectJs('/jquery-latest.min.js'); 中的文件名应该是 './jquery-latest.min.js' 或 'jquery-latest.min.js' jquery 与您的 CasperJS 脚本位于同一目录中。

那你好像没理解page context和outer casper context的区别。 casper.evaluate()函数是沙盒页面上下文。它的局限性是变量必须显式传递给它(完整阅读 this)并且通常 this 指的是页面的 window 而不是 casper。在您的情况下，您在 map 回调中使用 this ，它将引用 DOM 节点的 jQuery 对象，而不是 casper。此外，jQuery 没有 .fetchText() 函数，因此它会产生错误。 casper 在页面上下文中也不可用，但您可以使用 __utils__ module .

所以你可以这样写脚本:

casper.page.injectJs('jquery-latest.min.js');
var links = casper.evaluate(function() {
    var elements = $('div.education');
    return elements.map(function(){
        return {
            h4: $(this).find('h4.summary').map(function(){
                return $(this).text();
            }),
            h1: $(this).find('h1').map(function(){
                return $(this).text();
            })
        };
    });
});
casper.echo(links);

最后，为了确保您看到所有问题，请注册 remote.message和 page.error事件:

casper.on("remote.message", function(msg){
    this.echo("remote.msg: " + msg);
});

casper.on("page.error", function(pageErr){
    this.echo("page.err: " + JSON.stringify(pageErr));
});