How to run a phantomjs test script which takes multiple screenshots and involves click events?
<p>Following problem - for later visual regression testing I'd like to take screenshots of a website which involves multiple states (mostly shown or hidden Divs triggered by click events).</p>

<p>I'm using phantomjs version 2.1.1 as node module.</p>

<p>Here is the code which is not exactly the code I use but an easy to reproduce example. The problems that occure in my script are the same in this example.</p>

<p>Here is the code:</p>

<p><strong>Testfile:</strong></p>

<pre><code>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);    
});
</code></pre>

<p>The errors that occure are within the comments. Whatever I do there is an error or no error but within the Screenshots the box that should be opened is always closed.</p>

<p><strong>Console Command (using Windows prompt):</strong></p>

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

<p>Does anyone know what I'm doing wrong?</p>