Question

我在使用旧HTML选择某些页面中的元素时遇到了一些麻烦。

如果我在Chrome javascript控制台中注入jQuery并自己执行代码，它会返回正确的值。但是，当我尝试在CasperJS中执行此操作时，它不起作用。所以我制作了一个小脚本来测试发生了什么：

（casper.start和casper.run ommited）

casper.then(function() {
    this.echo("1: Entire Row");
    this.echo(this.evaluate(function() {
        return $("#table20 > tbody > tr:nth-child(3)").html();
    }));

    this.echo("2: More specific");
    this.echo(this.evaluate(function() {
        return $("#table20 > tbody > tr:nth-child(3) > td:nth-child(2)").html();
    }));

    this.echo("3: More specific");
    this.echo(this.evaluate(function() {
        return $("#table20 > tbody > tr:nth-child(3) > td:nth-child(2) > p").html();
    }));

    this.echo("4: Even more specific");
    this.echo(this.evaluate(function() {
        return $("#table20 > tbody > tr:nth-child(3) > td:nth-child(2) > p > font").html();
    }));

    this.echo("5: Using jQuery functions");
    this.echo(this.evaluate(function() {
        return $("#table20 > tbody > tr:nth-child(3)").children("td:nth-child(2)").children("p").children("font").html();
    })); //Ugly workaround

});

当我运行它时，结果就是这样：

1: Entire Row
<td height="23" width="226" style="border-style: solid; border-width: 1px" bordercolor="#666666" colspan="2">
        <p>
        <img width="16px" height="16px" src="upload/imagens/bandeira_eua.gif">
        <strong>Dólar americano (USD)</strong>
</p></td>
<td height="23" width="80" style="border-style: solid; border-width: 1px" bordercolor="#666666">
        <p><font size="2">2,400</font>
</p></td>
<td height="23" width="81" style="border-style: solid; border-width: 1px" bordercolor="#666666">
        <p><font size="2">2,600</font>
</p></td>

2: More specific //Correct so far...
<p><font size="2">2,400</font> 
</p>

3: More specific //What? This is from another row!!
<font size="2">3,060</font>

4: Even more specific
null //What??

5: Using jQuery functions
2,400 //Correct result

但是，如果我使用Chrome访问该网站并在控制台中注入相同的jQuery，那么它会按预期运行：

$("#table20 > tbody > tr:nth-child(3) > td:nth-child(2) > p > font").html();
"2,400"

发生了什么事???使用本机CasperJS方法检索值也不起作用。

ps：CasperJS版本1.1.0-beta3与PhantomJS版本1.9.0

ps1：CSS路径是在Chrome开发工具中生成的，“复制CSS路径”。

编辑：甚至更奇怪：这个脚本

casper.then(function() {
    this.echo(this.evaluate(function() {
        return $("#table20 > tbody > tr:nth-child(3) > td:nth-child(2) > p > font").html();
    }));

    this.echo(this.evaluate(function() {
        return $("#table20 > tbody > tr:nth-child(3) > td:nth-child(2) > p > font").html();
    }));
});

返回：

2,400
null

它始终只是第一次起作用，即使我分成2个casper.then。

Answer 1

不幸的是，Casper / PhantomJS Webkit与chrome不同。在chrome上工作的Xpath并不总能在PhantomJS上运行，并且找到理由是挖掘复杂的C ++代码。

基本上这不回答问题但确认我之前遇到过相同的情况。解决方法是找到一个更加一致的向下钻取xpath，通过文本，属性，类，id等来定位元素......而不是从那里向下钻取。即使你必须经过你的元素工作，它的父母或兄弟等等......比基于通用标签的绝对dom路径更可靠。

诸如// div / div / div / p / a / span / text（）之类的xpath在phantomjs中不是很可靠。

使用jQuery和CSS3选择器的CasperJS无法按预期工作

1 个答案: