如何运行phantomjs测试脚本，该脚本进行多个屏幕截图并涉及点击事件

Question

以下问题 - 对于以后的视觉回归测试，我想进行网站的屏幕截图，该网站涉及多个状态（主要是由单击事件触发的或隐藏的divs）。

我使用的是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);    
});

出现的错误在注释中。无论我做什么，都有错误或没有错误，但是在屏幕截图中应打开的框总是关闭的。

控制台命令（使用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

我找到了一个解决方案。上面我使用了错误的功能 - 必须是IncludeJs而不是InjectJs。但是我认为我已经尝试在1.9版中包含j，并且它不起作用 - $在回调中不确定。无论如何，我用这个替换了最后一部分，现在它有效：

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