Wie klicke ich auf ein Element in PhantomJS?

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

Dies gibt mir einen Fehler "undefiniert ist keine Funktion ..."

Wenn ich stattdessen

 return document.getElementById('idButtonSpan');

und dann drucken,

dann druckt es [Objekt Objekt], so dass das Element existiert.

Das Element fungiert als Schaltfläche, ist jedoch nur ein span-Element und keine Übermittlungseingabe.

Ich konnte diesen Button klicken, um mit Casper zu arbeiten, aber Casper hatte andere Einschränkungen, so dass ich zurück zu PhantomJS bin.

.click()ist nicht Standard. Sie müssen ein Ereignis erstellen und versenden:

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);
}

Alternativ zur Antwort von @ torazaburo können Sie HTMLElement.prototype.clickbeim Ausführen in PhantomJS einen Stub ausführen. Zum Beispiel verwenden wir PhantomJS + QUnit, um unsere Tests durchzuführen, und in unserem qunit-config.jshaben wir ungefähr Folgendes :

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);
    };
  }
}

Es ist nicht schön, aber ich habe dies verwendet, um jQuery für die Auswahl zu verwenden:

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

aber man kann immer ersetzen $(s)[0]mit , document.querySelector(s)wenn nicht jQuery verwenden.

(Es hängt davon ab, ob das Element im Blickfeld ist, dh Ihr Ansichtsfenster. Die Höhe ist groß genug.)

Hoffe, die folgende Methode wird nützlich sein. In Version 1.9 hat es bei mir funktioniert

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;
});

Das hat bei mir funktioniert. Hoffe, dass dies auch für andere nützlich sein wird

Damit 1.9.2funktionierten für mich Klick-Handler:

var a = page.evaluate(function() {
    return document.querySelector('a.open');
});

page.sendEvent('click', a.offsetLeft, a.offsetTop);

Verwenden Sie einfaches JavaScript mit evaluate:

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

Ich konnte das Element nie direkt anklicken. Stattdessen habe ich mir den HTML-Code angesehen, um herauszufinden, welche Funktion mit onclick aufgerufen wurde, und dann diese Funktion aufgerufen.

Document.querySelector (Element) .click () funktioniert bei Verwendung von 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);
},

Doppelklicks sind auch mit PhantomJS möglich.

Empfohlen

Dies ist aus angepasst der Antwort von stovroz und löst einen nativen dblclickeinschließlich der mousedown, mouseupund clickEreignisse (je zwei).

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);

Andere Möglichkeiten

Die folgenden zwei Möglichkeiten lösen nur das dblclickEreignis aus, nicht jedoch die anderen Ereignisse, die davor stehen sollten.

Angepasst an diese Antwort von Torazaburo :

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);

Angepasst an diese Antwort von 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);

Vollständiges Testskript

Am einfachsten ist die Verwendung von jQuery.

page.evaluate(function() {
  page.includeJs("your_jquery_file.js", function() {
    page.evaluate(function() {
      $('button[data-control-name="see_more"]').click();
    });
  });
});

Für Benutzer von JQuery hat die JQuery-Benutzeroberfläche ein Dienstprogramm erstellt, um diese zu simulieren: jquery-simulate . Ich benutze dies in PhantomJS und Chrome

$ele..simulate( "click" );