使用 CasperJS 单击第二个元素

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(...) 是一个方便的函数，可以将 XPath 表达式与几乎所有 CasperJS 函数一起使用，而不是 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")]'), ...)