여러 스크린 샷을 찍고 클릭 이벤트와 관련된 phantomjs 테스트 스크립트를 실행하는 방법은 무엇입니까?

Question

다음 문제 - 나중에 시각 회귀 테스트를 위해 여러 상태 (주로 클릭 이벤트로 인해 표시되거나 숨겨진 Div)가 포함 된 웹 사이트의 스크린 샷을 찍고 싶습니다.

저는 노드 모듈로 phantomjs 버전 2.1.1을 사용하고 있습니다.

다음 코드는 정확히 내가 사용하는 코드는 아니지만 재현하기 쉬운 예제입니다. 내 스크립트에서 발생하는 문제는이 예제에서 동일합니다.

TESTFILE :

var page = require('webpage').create(); 
var start_time = new Date().getTime(); 
console.info('beginning of script'); 

page.open('http://www.w3schools.com/jquery/jquery_hide_show.asp', function() {  
    console.info('page opened: ' + (new Date().getTime() - start_time)/1000); 

    window.setTimeout(function() {  
     page.clipRect = page.evaluate(function() { 
      return document.getElementById('main').getBoundingClientRect(); 
     });  
     page.render('closed.png'); 
     console.info('first screenshot taken: '+ (new Date().getTime() - start_time)/1000); 

     /* 
     //this did not work, element could be selected, but no click was triggered 
     var a = page.evaluate(function() { 
      return document.querySelector('.flip'); 
     });  
     console.info('a.offsetLeft: '+a.offsetLeft); 
     console.info('a.offsetTop: '+a.offsetTop);  
     //page.sendEvent('click', a.offsetLeft+5, a.offsetTop+5); 
     page.sendEvent('click', a.offsetLeft+5, a.offsetTop+5, 'left'); 
     */ 

     /* 
     //this also didn't work 
     var a = page.evaluate(function() { 
      return document.querySelector('.flip'); 
     }); 
     //var a = document.querySelector(".flip"); //using just this would cause this error: Typeerror 'null' is not an object but should work as stated here: https://github.com/ariya/phantomjs/issues/11258 
     a.addEventListener('click', function() { // Typeerror: undefined is not a function, a.addEventListener ... 
      console.info('click on flip button'); 
     }); 
     var evt = document.createEvent("MouseEvents"); 
     evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
     a.dispatchEvent(evt); 
     */ 

     //http://phantomjs.org/api/webpage/method/inject-js.html 
     // this runs without an error but within the opened.png screenshot the box is still closed 
     page.injectJs("jquery.min.js", function(){ //the jquery file is in the testfile folder 
      console.info('element.length: '+$('.flip').length); 
      $('.flip').click(); 
      console.info('click triggered: '+ (new Date().getTime() - start_time)/1000); 
     }); 

     //console.info('click triggered: '+ (new Date().getTime() - start_time)/1000); 
     window.setTimeout(function() {    
      page.render('opened.png'); 
      console.info('second screenshot taken: '+ (new Date().getTime() - start_time)/1000);  
      phantom.exit(); 
     },5000); 
    },5000);  
}); 

발생 시킬수 오류가 주석 내에 다음

는 코드입니다. 내가하는 일은 오류 또는 오류가 없지만 스크린 샷에는 열어야하는 상자가 항상 닫힙니다.이

phantomjs --debug=no --ignore-ssl-errors=yes --web-security=false --ssl-protocol=any --local-to-remote-url-access=true button_test.js 

사람이 내가 잘못 알고 있나요 :

콘솔 명령 (윈도우 프롬프트를 사용)?

Answer 1

해결책을 찾았습니다. 위에서 잘못된 함수를 사용하고 있었는데 InjectJs 대신 IncludeJs이되어야합니다. 하지만 이미 버전 1.9에서 IncludeJs를 시도했지만 작동하지 않는다고 생각합니다. $는 콜백에서 정의되지 않았습니다. 어쨌든 나는 마지막 부분을 이것으로 바꾸었지만 이제는 작동한다.

page.includeJs("https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js", function(){ 
    page.evaluate(function(){ 
     //console infos won't work here 
     $('.flip').click();     
    }); 
    page.render('opened.png'); 
}); 

window.setTimeout(function() {    
    phantom.exit(); 
},5000);