2

我必须使用 casperJS 将一个文件上传到客户服务器，现在在上传之前我需要模拟点击两个特定链接，这些链接（简单的 HTML 锚）没有名称/id/类...（真的丑陋的 HTML 代码），所以我只能通过它的文本内容来选择它。

如何使用querySelectororquerySelectorAll方法找到它？

到目前为止，我可以想出以下（不成功的尝试）:(

querySelector("a[text()='texttofind']");
querySelector("a[text='texttofind']");
querySelector("a[text=texttofind]");

在所有建议后编辑

TITLE UPDATED 更具体地说明我的问题似乎只与 casperjs 有关

平台 - Windows 7 - CasperJS 版本 1.1.0-beta3 - phantomjs 版本 1.9.7 - Python 2.7

所以，可能我太笨了:(现在我发布了一个完整的例子，遗憾的是对我不起作用:(

HTML 主索引

<html>
<head>
<title>TEST Main Page</title>
</head>
<frameset cols="100,100" >
    <frame name="menu_a" src="menu_1.html">
    <frame name="menu_b" src="menu_2.html">
</frameset>
</html>

HTML menu_1.html

<html>
<head>
<title>TEST Menu 1</title>
</head>
<body style="background-color:red;">
<h3>Menu 1</h3>
<select onchange="javscript:alert('test')" id="test" size="1" name="systemID">
    <option value="0">---</option>
    <option selected="selected" value="1">TestMenu1            </option>
    <option value="17">TestMenu2                               </option>
</select>
</body>
</html>

HTML menu_2.html

<html>
<head>
<title>TEST Menu 1</title>
</head>
<body style="background-color:orange;">
<h3>Menu 2</h3>
 <a href="javascript:alert('test')"><b>clickhere   </b></a>
 <a href="javascript:alert('noclickhere')"><b>NoClickHere   </b></a>
</body>
</html>

CasperJS 脚本

所有测试开始相等：

var casper = require('casper').create();

casper.start(serverName, function(){});

第一次测试-@Ka0s 建议的 clicklabel

casper.then(function(){
    this.withFrame('menu_b', function(){
        this.clickLabel('clickhere', 'a');
    });
});

结果：

CasperError: Cannot dispatch mousedown event on nonexistent selector: xpath selector: //a[text()="test"]
  /bin/casperjs/modules/casper.js:1355 in mouseEvent
  /bin/casperjs/modules/casper.js:462 in click
  /bin/casperjs/modules/casper.js:487 in clickLabel
  /test.js:90
  /bin/casperjs/modules/casper.js:1553 in runStep
  /bin/casperjs/modules/casper.js:399 in checkStep

即使我在我的测试代码上清除了 clickhere 字符串末尾的空格，这也不起作用。

第二个测试 - @ArtjomB 建议的 xPath

casper.then(function(){
    this.withFrame('menu_b', function(){
    this.evaluate(function(){
     var element = __utils__.getElementByXPath("//a[starts-with(text(),'clickhere')]");
     console.log(element);
    });
 });
});

结果：

remote message caught: undefined

所以我认为 xPath 找不到元素。

第三个测试-@Brunis 建议的带有 for 循环的 querySelectorAll

这是一个奇怪的行为，casperJS 返回 href 的内容而不是对象，这在下面的代码中似乎不是错误，而是我的实现或其他问题。

casper.then(function(){
    this.withFrame('menu_b', function(){
        this.evaluate(function(){
        var as = document.querySelectorAll("a");
        var match = "clickhere";
        var elems = [];     
        for (var i=0; i<as.length; i++){
            if (as[i].textContent === match) {
                elems.push(as[i]);
            }
        }
        console.log(elems[0]);
    });
 });
});

结果：远程消息被捕获：javascript:alert('test')

我获得的是href代码而不是对象！如果我在小提琴中尝试这个示例，我会收到该对象，我可以在其上调用 onclick()。

4

4 回答 4

5

这是一个简单的循环，它匹配您想要的链接文本并将它们添加到数组中：

的HTML：

<div>
    <a name="test">not this one</a>
    <a name="test">not this one</a>
    <a name="test">not this one</a>
    <a name="test">not this one</a>
    <a name="test">this one</a>
</div>

和脚本：

var as = document.querySelectorAll("a");
var match = "this one";
var elems = [];

for (var i=0; i<as.length; i++){
    if (as[i].textContent === match) {
        elems.push(as[i]);
    }
}

现在您在 elems 数组中有匹配的元素。

在这里摆弄：http: //jsfiddle.net/0pLd8s9r/

于 2014-08-13T08:30:58.890 回答
3

如果您仍然知道锚点中的文本，请尝试 clickLabel。这就是我使用的

this.clickLabel('Anchor_Text','a')

其中 Anchor_Text 是锚点中的完整文本

在这里找到

于 2014-08-13T08:59:50.060 回答
1

querySelector(All)不会让您指定要查找的元素的内容。您必须单独查看每个锚点。

你可以尝试这样的事情：

var hrefs = document.getElementById('all_anchors').querySelectorAll('a');
for (var x=0;x<hrefs.length;x++) {
    if (hrefs[x].innerHTML==text) {
        alert(hrefs[x].href);   
    }
}

( JSFiddle )

于 2014-08-13T08:36:38.917 回答
1

您似乎对页面上下文感到困惑。evaluate在回调中执行的所有内容都是沙盒化的。它将看不到外部的变量或外部无法看到内部的变量。它们必须专门传递，并且只能由基本原语组成。从文档：

注意：评估函数的参数和返回值必须是简单的原始对象。经验法则：如果它可以通过 JSON 序列化，那就没问题了。

关于您的实际问题，您可以按照 BoltClock 的建议使用 XPath。如您所见，CasperJS 提供了可在页面上下文之外使用的 XPath 实用程序。

var x = require('casper').selectXPath;
casper.click(x("//a[starts-with(.,'clickhere')]"));

starts-with(string, string)是一个 XPath 1.0 函数，用于检查某个字符串是否以另一个字符串开头。

如果您只想使用它来根据起始文本检索元素，然后用它做其他事情，您可以在页面上下文中使用 CasperJS 的客户端工具。它提供了例如功能getElementByXPath：

casper.evaluate(function(){
    var element = __utils__.getElementByXPath("//a[starts-with(.,'clickhere')]");
    // do something with element
});

该__utils__属性由 CasperJS 注入到每个页面的页面上下文中。

XPath 中的.是该元素内的完整文本，而text()只会选择直接位于该a元素内的文本节点。由于用于选择a元素的文本位于元素内部，因此b您需要使用.如上所示的方法或选择b元素然后转到父元素：

"//a/b[starts-with(text(),'clickhere')]/.."
于 2014-08-13T09:36:01.923 回答