2

SlimerJS を使用してページ上のボタンをクリックしようとしています。

SlimerJS のドキュメントでは、sendEvent(eventType, arg1, arg2, button, modifier)X 座標と Y 座標で特定の位置をクリックできるようになっていることがわかります。(ドキュメントはこちら)

そこで、ボタン座標のこれらの X と Y を次の方法で取得しようとしました。

var webpage = require("webpage").create();
function clickButton(button)
{
    var rect = button.getBoundingClientRect();
    webpage.sendEvent('click',rect.left,rect.top,'left',0);
}
webpage.open(url).then(function(){
    var button = webpage.evaluate(function(){
        signInButton = document.querySelector("#signIn");
        return signInButton;
    });
    clickButton(button);
});

この方法では、エラーはスローされませんが、ボタンはクリックされないようです。この慣習に何か問題がありますか？より良い方法はありますか？IDまたはタグ名だけで提供されるボタンまたはリンクをクリックする方法はありますか?

4

1 に答える 1

4

それはそれを行うにはかなり難しい方法です。(ちなみに、ボタンなどの DOM オブジェクトを から戻すことはできないため、コンテンツを 内にevaluate()移動することをお勧めします。)clickButtonevaluate()

簡単な方法は、PhantomJS/SlimerJS の上位レベルの抽象化レイヤーであるCasperJSを使用することです。あなたの例は次のようになります。

var casper = require('casper').create();
casper.start(url, function(){
  this.click('#signIn');
  });
casper.run();

PhantomJS を使い続けたい場合で、ページに jQuery が読み込まれている場合は、かなり簡単です。

var webpage = require("webpage").create();

webpage.open(url).then(function(){
    this.evaluate(function(){
        $("#signIn").click();
        });
    });

あなたのアプローチに代わるものは、DOMオブジェクトにクリックイベントを直接送信することです（つまり、マウスの座標を心配するのではなく）：

var webpage = require("webpage").create();

webpage.open(url).then(function(){
    this.evaluate(function(){
      var evt = document.createEvent("MouseEvents");
      evt.initMouseEvent("click", true, true, window,
        0, 0, 0, 0, 0, false, false, false, false, 0, null);
      return document.querySelector('#signIn').dispatchEvent(evt);
      };
    });

これがマウスの座標を扱うよりも優れていると思うのはなぜですか? 座標を使用したマウス クリックは、表示されているボタン上で行う必要があるため、ビューポートについて心配する必要があります。https://stackoverflow.com/a/24861718/841830を参照してください

(最後の 2 つのソースは、d3 の使用についても説明した私自身のブログ投稿です。)

于 2014-07-28T10:44:53.130 に答える