Nice programing

PhantomJS;

nicepro 2020. 10. 7. 08:18
반응형

PhantomJS; 요소를 클릭


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로 더블 클릭도 가능합니다.

추천

This is adapted from the answer of stovroz and triggers a native dblclick including the mousedown, mouseup and click events (two of each).

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

Other ways

The following two ways only trigger the dblclick event, but not the other events that should precede it.

Adapted from this answer 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);

Adapted from this answer of 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);

Full test script


The easiest way is using jQuery.

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

For those using JQuery, the JQuery UI created a utility to simulate these: jquery-simulate. I use this in PhantomJS and Chrome

$ele..simulate( "click" );

참고URL : https://stackoverflow.com/questions/15739263/phantomjs-click-an-element

반응형