将 XPath 与 CasperJS 一起使用答案

【问题标题】：Using XPath with CasperJS将 XPath 与 CasperJS 一起使用
【发布时间】：2017-05-31 16:45:35
【问题描述】：

我正在使用 CasperJS 测试我的前端，并创建了一个名为“Brand New Name”的新元素“foo”，并且已经存在“foo”元素。我需要使用 XPath 选择具有正确名称的特定元素，以便使用 Casper 测试它是否存在。

这就是我目前正在做的事情：

this.test.assertExists(x('//*[@class="foo" and text()="Brand New Name"]'), 'new thing exists')

但这不是找到我想要的，我做错了什么？

更新 1

这是我收到的 Casper.JS 失败消息，尽管 xPath 选择器看起来正确。

FAIL new category exists
#    type: assertExists
#    file: ../../../foo/test/casper/foo_manager/new_category.js
#    subject: false
#    selector: {"type":"xpath","path":"//*[@class=\"foo\" and contains(text(), \"Brand New Category\")]"

我意识到在我要选择的元素中实际上有一个span。我试图解释这一点，但我无法让xPath CasperJS 选择器工作。我已将xPath 选择器更新为contains，但它仍然无法正常工作。

选择器如下所示：

this.test.assertExists(x('//*[@class="foo" and contains(text(), "Brand New Category")]'), 'new category exists')

有问题的元素如下所示：

<a href='#' class='foo' id='foo-bar'>
  Brand New Category
  <span>some text</span>
</a>

【问题讨论】：

标签： javascript xpath casperjs

【解决方案1】：

如果你尝试这个，你的测试应该会通过：

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CasperJS and XPath</title>
</head>
<body>
  <ul>
    <li class="foo">Foo</li>
    <li class="foo">Bar</li>
    <li class="foo">Brand New Name</li>
  </ul>
</body>
</html>

JavaScript (xpath.js)

casper.test.begin('CasperJS and XPath', 1, function (test) {
  var x = require('casper').selectXPath;

  casper.start('index.html', function () {
    this.test.assertExists(x('//*[@class="foo" and text()="Brand New Name"]'), 'new thing exists');
  });

  casper.run(function () {
    test.done();
  });
});

命令

casperjs test xpath.js

【讨论】：

感谢您的回答@Badacadabra，我已经更新了我的问题，如果您可以看一下，我仍然有问题吗？谢谢
我已经用你的新 XPath 选择器测试了你的新 HTML 结构，它正在工作。请确保在使用 Casper 测试元素时已加载该元素。这可能是时间问题...
该元素肯定已加载，我可以截图 casper 并显示。此外，我将测试更改为搜索特定 id 而不是通过类和文本搜索，它通过了，但我仍然无法通过使用类和文本来通过