複数のスクリーンショットを取り、クリックイベントを含む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);  
}); 

コメント内にあるoccureエラーここ

コードです。私が何をするにしても、エラーやエラーはありませんが、スクリーンショット内には、開くべきボックスは常に閉じられています。 （プロンプトWindowsを使用して）

コンソールコマンド：

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