Làm cách nào để nhấp vào một phần tử trong PhantomJS?

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

Điều này khiến tôi gặp lỗi "undefined không phải là một hàm ..."

Nếu tôi thay thế

 return document.getElementById('idButtonSpan');

và sau đó in nó,

sau đó nó in ra [object object], vì vậy phần tử tồn tại.

Phần tử hoạt động như một nút, nhưng nó thực sự chỉ là một phần tử span, không phải là một đầu vào gửi.

Tôi đã có thể nhấp vào nút này để làm việc với Casper, nhưng Casper có những hạn chế khác nên tôi quay lại PhantomJS.

.click()không phải là tiêu chuẩn. Bạn cần tạo một sự kiện và gửi nó đi:

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

Ngoài ra đối với phản hồi của @ torazaburo, bạn có thể bị HTMLElement.prototype.clickđơ khi chạy trong PhantomJS. Ví dụ: chúng tôi sử dụng PhantomJS + QUnit để chạy các bài kiểm tra của mình và trong chúng qunit-config.jstôi có một cái gì đó như sau:

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

Nó không đẹp, nhưng tôi đã sử dụng cái này để cho phép tôi sử dụng jQuery cho lựa chọn:

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

nhưng bạn luôn có thể thay thế $(s)[0] bằng document.querySelector(s)nếu không sử dụng jQuery.

(Nó phụ thuộc vào yếu tố có trong tâm trí chế độ xem, tức là viewportSize.height của bạn đủ lớn).

Hy vọng phương pháp sau đây sẽ hữu ích. Nó hoạt động với tôi trong phiên bản 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;
});

Điều này đã làm việc cho tôi. Hy vọng điều này cũng sẽ hữu ích cho những người khác

Với 1.9.2điều này đã làm việc cho tôi, các trình xử lý nhấp chuột đã được kích hoạt:

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

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

sử dụng JavaScript đơn giản với evaluate, tương tự như sau:

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

Tôi chưa bao giờ có thể nhấp trực tiếp vào phần tử. Thay vào đó, tôi nhìn vào html để tìm hàm nào được gọi với onclick và sau đó gọi hàm đó.

Document.querySelector (phần tử) .click () hoạt động khi sử dụng 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);
},

Cũng có thể nhấp đúp với PhantomJS.

Được đề xuất

Điều này được điều chỉnh từ câu trả lời của stovroz và kích hoạt một bản địa dblclickbao gồm mousedown, mouseupvà clickcác sự kiện (hai trong số mỗi sự kiện).

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

Những cách khác

Hai cách sau đây chỉ kích hoạt dblclicksự kiện, nhưng không kích hoạt các sự kiện khác trước nó.

Phỏng theo câu trả lời này của 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);

Phỏng theo câu trả lời này của 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);

Tập lệnh thử nghiệm đầy đủ

Cách dễ nhất là sử dụng jQuery.

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

Đối với những người sử dụng JQuery, giao diện người dùng JQuery đã tạo một tiện ích để mô phỏng những điều này: jquery-simulate . Tôi sử dụng cái này trong PhantomJS và Chrome

$ele..simulate( "click" );