82

PhantomJS で要素をクリックするにはどうすればよいですか?

page.evaluate(function() {
    document.getElementById('idButtonSpan').click();  
});

これにより、「未定義は関数ではありません...」というエラーが表示されます

もし私が代わりに

 return document.getElementById('idButtonSpan');

そしてそれを印刷し、

次に [object object] を出力するので、要素は存在します。

この要素はボタンとして機能しますが、実際には送信入力ではなく単なるスパン要素です。

このボタンのクリックを Casper で動作させることができましたが、Casper には他の制限があったため、PhantomJS に戻りました。

4

11 に答える 11

68

.click()標準ではありません。イベントを作成してディスパッチする必要があります。

function click(el){
    var ev = document.createEvent("MouseEvent");
    ev.initMouseEvent(
        "click",
        true /* bubble */, true /* cancelable */,
        window, null,
        0, 0, 0, 0, /* coordinates */
        false, false, false, false, /* modifier keys */
        0 /*left*/, null
    );
    el.dispatchEvent(ev);
}
于 2013-04-11T12:06:10.853 に答える
34

@torazaburo の応答の代わりにHTMLElement.prototype.click、PhantomJS で実行するときにスタブすることができます。たとえば、PhantomJS + QUnit を使用してテストを実行すると、次のqunit-config.jsようになります。

if (window._phantom) {
  // Patch since PhantomJS does not implement click() on HTMLElement. In some 
  // cases we need to execute the native click on an element. However, jQuery's 
  // $.fn.click() does not dispatch to the native function on <a> elements, so we
  // can't use it in our implementations: $el[0].click() to correctly dispatch.
  if (!HTMLElement.prototype.click) {
    HTMLElement.prototype.click = function() {
      var ev = document.createEvent('MouseEvent');
      ev.initMouseEvent(
          'click',
          /*bubble*/true, /*cancelable*/true,
          window, null,
          0, 0, 0, 0, /*coordinates*/
          false, false, false, false, /*modifier keys*/
          0/*button=left*/, null
      );
      this.dispatchEvent(ev);
    };
  }
}
于 2013-07-22T14:18:10.137 に答える
16

きれいではありませんが、これを使用して、選択に jQuery を使用できるようにしています。

var rect = page.evaluate(function() {
    return $('a.whatever')[0].getBoundingClientRect();
});
page.sendEvent('click', rect.left + rect.width / 2, rect.top + rect.height / 2);

ただし、 jQuery を使用$(s)[0]していない場合はいつでも置き換えることができます。document.querySelector(s)

(要素がビューにあることに依存します。つまり、viewportSize.height が十分に大きい)。

于 2014-06-03T23:27:29.807 に答える
10

次の方法が役立つことを願っています。バージョン1.9でうまくいきました

page.evaluate(function(){
    var a = document.getElementById("spr-sign-in-btn-standard");
    var e = document.createEvent('MouseEvents');
    e.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    a.dispatchEvent(e);
    waitforload = true;
});

これは私にとってはうまくいきました。これが他の人にも役立つことを願っています

于 2014-08-07T11:00:30.247 に答える
6

evaluate次のように、単純な JavaScript を で使用します。

page.evaluate(function() {
    document.getElementById('yourId').click();
});
于 2016-03-09T10:04:11.163 に答える
2

Document.querySelector(element).click() は Phantomjs 2.0 の使用時に機能します

click: function (selector, options, callback) {
    var self = this;
    var deferred = Q.defer();
    options = options || {timeout:1000}; 
    setTimeout(function () { 
        self.page.evaluate(function(targetSelector) {
            $(document).ready(function() {
                document.querySelector(targetSelector).click();
            }) ;
        }, function () {
                deferred.resolve();
        }, selector);
    }, options.timeout);
    return deferred.promise.nodeify(callback);
},
于 2016-01-15T15:46:40.253 に答える
2

PhantomJS ではダブルクリックも可能です。

おすすめされた

これは、stovrozの回答から適応され、 、およびイベント (それぞれ 2 つ)を含むネイティブをトリガーします。dblclickmousedownmouseupclick

var rect = page.evaluate(function(selector){
    return document.querySelector(selector).getBoundingClientRect();
}, selector);
page.sendEvent('doubleclick', rect.left + rect.width / 2, rect.top + rect.height / 2);

他の方法

次の 2 つの方法は、dblclickイベントをトリガーするだけで、その前にある他のイベントはトリガーしません。

虎三郎のこの回答から適応：

page.evaluate(function(selector){
    var el = document.querySelector(sel);
    var ev = document.createEvent("MouseEvent");
    ev.initMouseEvent(
        'dblclick',
        true /* bubble */, true /* cancelable */,
        window, null,
        0, 0, 0, 0, /* coordinates */
        false, false, false, false, /* modifier keys */
        0 /*left*/, null
    );
    el.dispatchEvent(ev);
}, selector);

Jobins Johnのこの回答から適応:

page.evaluate(function(selector){
    var el = document.querySelector(sel);
    var e = document.createEvent('MouseEvents');
    e.initMouseEvent('dblclick', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    el.dispatchEvent(e);
}, selector);

完全なテスト スクリプト

于 2016-06-13T09:16:33.083 に答える
0

JQuery を使用している人のために、JQuery UI はこれらをシミュレートするためのユーティリティjquery-simulateを作成しました。これをPhantomJSとChromeで使用しています

$ele..simulate( "click" );
于 2016-10-24T19:39:38.373 に答える