PhantomJS; щелкните элемент

как щелкнуть элемент в PhantomJS?

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

это дает мне ошибку " undefined не является функцией..."

Если я вместо 

 return document.getElementById('idButtonSpan');

а затем распечатать его,

затем он печатает [object object], поэтому элемент существует.

элемент действует как кнопка, но на самом деле это просто элемент span, не подать сигнала.

я смог заставить эту кнопку нажать, чтобы работать с Каспером, но у Каспера были другие ограничения, поэтому я вернулся к PhantomJS.

78
click javascript phantomjs

11 ответов

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

В качестве альтернативы ответу @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);
    };
  }
}
34

это не очень красиво, но я использовал это, чтобы позволить мне использовать jQuery для выбора:

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

но вы всегда можете заменить $(s)[0] С document.querySelector(s) если не использовать jQuery.

(он полагается на элемент, находящийся в поле зрения, т. е. ваш viewportSize.рост достаточно большой).

15

надеюсь, что следующий метод будет полезен. Он работал для меня в версии 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;
});

это сработало для меня. Надеюсь, это будет полезно и для других

9

С 1.9.2 это сработало для меня, обработчики щелчка были вызваны:

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

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

используйте простой JavaScript с evaluate, что-то вроде этого:

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

Я никогда не мог напрямую щелкнуть элемент. Вместо этого я посмотрел на html, чтобы найти, какая функция вызывалась с помощью onclick, а затем вызвал эту функцию.

2

документ.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);
},
2

двойные щелчки также возможны с PhantomJS.

рекомендовано

это взято из ответ of stovroz и вызывает уроженца dblclick в том числе mousedown, mouseup и click событий (по два каждого).

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

другие способы

следующие два способа вызвать только dblclick событие, но не другие события, которые должны предшествовать этому.

адаптировано из этот ответ of 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);

адаптировано из ответ of Jobins Джон:

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

полный тестовый скрипт

2

самый простой способ-использовать jQuery.

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

для тех, кто использует JQuery, пользовательский интерфейс JQuery создал утилиту для имитации этих:jquery-simulate. Я использую это в PhantomJS и Chrome

$ele..simulate( "click" );
0