PhantomJS에서 요소를 어떻게 클릭합니까?

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

"정의되지 않은 것은 함수가 아닙니다 ..."라는 오류가 발생합니다.

대신 내가

 return document.getElementById('idButtonSpan');

인쇄하고

그런 다음 [object object]를 인쇄하므로 요소가 존재합니다.

요소는 버튼 역할을하지만 실제로는 제출 입력이 아닌 스팬 요소 일뿐입니다.

이 버튼을 클릭하여 Casper와 함께 작동하도록 할 수 있었지만 Casper에는 다른 제한 사항이 있으므로 PhantomJS로 돌아 왔습니다.

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

@torazaburo의 응답 대신 PhantomJS에서 HTMLElement.prototype.click실행할 때 스텁 할 수 있습니다. 예를 들어, 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);
    };
  }
}

예쁘지는 않지만 선택을 위해 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.height가 충분히 큽니다).

다음 방법이 유용하기를 바랍니다. 버전 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;
});

이것은 나를 위해 일했습니다. 이것이 다른 사람들에게도 유용하기를 바랍니다.

함께 1.9.2이 나를 위해 일한, 클릭 핸들러가 트리거되었다 :

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

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

evaluate다음과 같이 간단한 JavaScript를 사용 하십시오.

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

요소를 직접 클릭 할 수 없었습니다. 대신 html을보고 onclick으로 어떤 함수가 호출되었는지 확인한 다음 해당 함수를 호출했습니다.

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

PhantomJS로 더블 클릭도 가능합니다.

추천

이것은 stovroz 의 답변 에서 수정 되었으며 , 및 이벤트 (각각 2 개)를 dblclick포함 하는 네이티브 를 트리거합니다 .mousedownmouseupclick

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 이벤트를 뿐 선행해야하는 다른 이벤트는 하지 않습니다.

에서 적응 이 답변 의 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);

에서 적응 이 답변 의 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);

전체 테스트 스크립트

가장 쉬운 방법은 jQuery를 사용하는 것입니다.

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

JQuery를 사용하는 사람들을 위해 JQuery UI는이를 시뮬레이션하는 유틸리티를 만들었습니다 : jquery-simulate . PhantomJS와 Chrome에서 사용합니다.

$ele..simulate( "click" );