点击CasperJS中特定类的段落中的所有'a'元素 [英] Click on all 'a' elements in paragraph with specific class in CasperJS

问题描述

我有以下问题。
我有这样的HTML代码结构：

 < p class = > 
 lorem ipsum，bla bla bla 
< a href =＃onclick =somemethod（id）>点击< / a> 
< / p> 
< ; p class =description> 
 lorem ipsum，bla bla bla 
< / p> 
< p class =description> 
 lorem ipsum，bla bla bla 
< a href =＃onclick =somemethod（id）>点击< / a> 
< / p> 
 

现在我需要通过CasperJS在每个a上点击类'description'。 / p>



我试试这个：

  while （selector = document.querySelector（'p.description a'））{
 casper.then（function（）{
 this.click（selector）; 
 console.log ）; 
}）
} 
  

但不起作用。 / p>



有任何可能性吗？

解决方案

两个问题。

• 不能使用文档和 ，因为文档仅在页面上下文（ casper.evaluate（）

• 您需要对可点击元素进行完全迭代（例如，c $ c>），但不能在页面上下文中使用 casper 在页面上下文中或完全在外面。



---

CSS选择器

如果所有< p> 元素具有相同的父元素，并且两者之间没有其他元素，那么您可以简单地使用CSS选择器实现：

  casper.then（function（）{
 var numberOfElements = this.getElementsInfo（p.description ）。长度; 
 for（var i = 1; i <= numberOfElements; i ++）{
 this.click（p：nth-​​child（+ i +）a）; 
} 
}）; 
  

请注意，不能选择：nth-​​child 基于类，所以这也假定没有

$

元素。 b $ b

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 +]）表示NodeList（ // p [contains（@ class，'description'）] ）构建了所有包含描述作为其类属性的一部分的p元素。然后， （nodeList）[3]）选择该列表中的第三个元素。

---

$ b b

如果您想在页面上下文中迭代，则需要使用点击功能页面上下文。

I have the following problem. I have this structure of HTML code:

<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>

Now I need to click via CasperJS on every "a" in paragraphs with class 'description'.

I try this:

while (selector = document.querySelector('p.description a')) {
    casper.then(function () {
        this.click(selector);
        console.log('click');
    })
}

but it doesn't work.

Are there any possibilities how to do this?

解决方案

You have two problems.

• You cannot use document and casper at the same time, because document is only available inside of the page context (casper.evaluate()), but casper is not available in the page context.
• You need to iterate over the clickable elements either fully in the page context or fully outside.

---

CSS selectors

If all <p> elements have the same parent and there are no other elements in between, then you can simply use CSS selectors to achieve this:

casper.then(function(){
    var numberOfElements = this.getElementsInfo("p.description").length;
    for(var i = 1; i <= numberOfElements; i++) {
        this.click("p:nth-child("+i+") a");
    }
});

Note that it's not possible to select :nth-child based on the class, so this also assumes that no <p> elements are there without the "description" class.

XPath expressions

It's possible to make this much more robust, by using XPath expressions, because they are much more expressive.

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"));
    }
});

where (//p[contains(@class,'description')])["+i+"]) means that a NodeList (//p[contains(@class,'description')]) of p elements is built which all contain "description" as part of their "class" attribute. Then e.g. (nodeList)[3]) selects the third element from that list.

---

If you want to iterate inside of the page context, then you need to use a click function inside of the page context.

这篇关于点击CasperJS中特定类的段落中的所有'a'元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！