单击CasperJS中具有特定类的段落中的所有“a”元素
单击CasperJS中具有特定类的段落中的所有“a”元素
提问于 2015-11-01 16:47:55
我有以下问题。我有一个HTML代码的结构：
<p class="description">
lorem ipsum, bla bla bla
<a href="# onclick="somemethod(id)">click</a>
</p>
<p class="description">
lorem ipsum, bla bla bla
</p>
<p class="description">
lorem ipsum, bla bla bla
<a href="# onclick="somemethod(id)">click</a>
</p>现在，我需要通过CasperJS点击每一段中的"a“类‘描述’。
我试试看：
while (selector = document.querySelector('p.description a')) {
casper.then(function () {
this.click(selector);
console.log('click');
})
}但不起作用。
有什么可能做到这一点吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-11-01 17:42:50
你有两个问题。
- 您不能同时使用
document和casper，因为document只在页面上下文(casper.evaluate())中可用，但是casper在页面上下文中不可用。 - 您需要在页面上下文中或完全在外部迭代可点击的元素。
CSS选择器
如果所有<p>元素都具有相同的父元素，并且之间没有其他元素，那么您可以简单地使用CSS选择器来实现这一点：
casper.then(function(){
var numberOfElements = this.getElementsInfo("p.description").length;
for(var i = 1; i <= numberOfElements; i++) {
this.click("p:nth-child("+i+") a");
}
});请注意，不可能基于类选择:nth-child，因此这也假定没有“描述”类就没有<p>元素。
XPath表达式
通过使用XPath表达式可以使其更加健壮，因为它们更有表现力。
var x = require("casper").selectXPath;
...
casper.then(function(){
var numberOfElements = this.getElementsInfo("p.description").length;
for(var i = 1; i <= numberOfElements; i++) {
this.click(x("(//p[contains(@class,'description')])["+i+"])/a"));
}
});其中，(//p[contains(@class,'description')])["+i+"])意味着构建p元素的NodeList (//p[contains(@class,'description')])，其中所有元素都包含"description“，作为其"class”属性的一部分。然后，(nodeList)[3])从该列表中选择第三个元素。
如果要在页面上下文中迭代，则需要在页面上下文中使用a click function。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33464591
复制相关文章
相似问题
腾讯云开发者
