且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

点击CasperJS中特定类的段落中的所有'a'元素

更新时间:2023-01-15 18:23:41

两个问题。




  • 不能使用文档 ,因为文档仅在页面上下文( casper.evaluate()$

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






CSS选择器



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

  casper.then(function(){
var numberOfElements = this.getElementsInfo(p.description )。长度;
for(var i = 1; 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 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.