Question

我想使用CasperJS点击文档中的第二个元素。

我的文档：

<div class="sample secondClass">1</div>
<div class="sample">2
  <ul class="ul">
    <li class="li">
      <a class="link">
        <div class="div_msg">
          <span>AbCde</span>
        </div>    
      </a>
    </li>
  </ul>
<div class="sample secondClass">3</div>

这就是我的尝试：

casper.thenClick(x('//*[@class="sample"][2]/ul[@class="ul"]/li[@class="li"]/a[@class="link"]/div[@class="div_msg"]/span[string-length(text())="ABCDE"]'), function() {
  ...
  //do anythings
  ...
}

Answer 1

x(...)是一个便利函数，它使用几乎所有CasperJS函数的XPath表达式而不是CSS选择器。 :nth-child(1)是一个CSS选择器，在XPath表达式中不起作用。

您可以使用[x]在匹配的兄弟姐妹中选择元素的位置。如果你想要第二个元素，那么使用x('//*[@class="sample"][2]')（XPath和CSS选择器是1索引的而不是0索引，就像所有其他编程语言一样）。

colorMatchingRed('//*[@class="sample"][2]')

function colorMatchingRed(xpath) { 
    var spans = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); 
    for (var i = 0 ; i < spans.snapshotLength; i++ ) spans.snapshotItem(i).style.color = "red";
}

<div>
    <div class="sample">No</div>
    <div class="sample">Yes</div>
    <div class="sample">No</div>
</div>
<hr/>
<div>
    <div>No</div>
    <div class="sample">No</div>
    <div class="sample">Yes</div>
    <div class="sample">No</div>
</div>

您也可以使用含义略有不同的x('//*[@class="sample" and position()=2]')，因为它与其兄弟姐妹中的第二个元素相匹配，但同时具有特定的@class属性。

colorMatchingRed('//*/*[@class="sample" and position()=2]')

function colorMatchingRed(xpath) { 
    var spans = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); 
    for (var i = 0 ; i < spans.snapshotLength; i++ ) spans.snapshotItem(i).style.color = "red";
}

<div>
    <div class="sample">No</div>
    <div class="sample">Yes</div>
    <div class="sample">No</div>
</div>
<hr/>
<div>
    <div>No</div>
    <div class="sample">Yes</div>
    <div class="sample">No</div>
    <div class="sample">No</div>
</div>

如果元素不是彼此的兄弟元素，那么您还可以评估节点集并从该集合中选择特定元素：x('(//*[@class="sample"])[2]')。它使用特定的@class创建一组所有元素，然后选择第二个元素。

colorMatchingRed('(//*[@class="sample"])[2]')

function colorMatchingRed(xpath) { 
    var spans = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); 
    for (var i = 0 ; i < spans.snapshotLength; i++ ) spans.snapshotItem(i).style.color = "red";
}

<div>
    <div class="sample">No</div>
    <div class="sample">Yes</div>
    <div class="sample">No</div>
</div>
<hr/>
<div>
    <div>No</div>
    <div class="sample">No</div>
    <div class="sample">No</div>
    <div class="sample">No</div>
</div>

以下是更新后问题的正确点击通话：

casper.thenClick(x('//*[@class="sample"][2]/ul[@class="ul"]/li[@class="li"]/a[@class="link"]/div[@class="div_msg"]/span[string-length(text())=string-length("ABCDE")]'), ...)

或更短：

casper.thenClick(x('//*[@class="sample"][2]//div[@class="div_msg"]/span[string-length(text())=string-length("ABCDE")]'), ...)

单击CasperJS的第二个元素

1 个答案: