2

casperJS を使用して 1 つのファイルを顧客サーバーにアップロードする必要があります。アップロードする前に、2 つの特定のリンクのクリックをエミュレートする必要があります。これらのリンク (単純な HTML アンカー) には名前/ID/クラスがありません... (実際には醜い HTML コード) であるため、テキスト コンテンツによって選択する唯一のオプションがあります。

querySelectorまたはquerySelectorAllメソッドを使用してそれを見つけるにはどうすればよいですか?

これまでのところ、次の（失敗した試み）を思いつくことができました:(

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 によって提案されたクリックラベル

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 文字列の末尾にある空白を削除して文字列をクリーンアップしても機能しません。

2 番目のテスト - @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が要素を見つけられなかったと思います。

3 番目のテスト - @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 に答える