mercredi 14 décembre 2016

How to pass phantomjs or casperjs options to grunt phantomcss testfile?

There is a grunt plugin for visual regression testing calles grunt-phantomcss. It takes screenshots of a page and compares them. I successfully took a screenshot of google.com but when I want to take a screenshot of a testserver page where the content is loaded asynchronously there is just whitespace. Maybe this is a CORS issue. Now I'd like to try to disable the websecurity but I don't know where to do it. Within the Gruntfile settings for the plugin it can't be done. I set loglevel to debug and within the loggings this error is thrown: unsafe Javascript attempt to access frame with URL about:blank. So probably the settings can be changed within the testfile. Did anyone have the same problem and knows how to solve it?

Here the code of the testfile:

function wait_n_seconds(n) {
  var seconds = new Date().getTime() / 1000;
  var time_now = seconds;
  while ((time_now + n) > seconds)
  {
      seconds = new Date().getTime() / 1000;
  }
}
casper.start('http://ift.tt/2gzMSha').then(function() {
    phantomcss.screenshot('body', 'Body Screenshot');       
});

As you can see it's not an issue that the page hasn't rendered completely because there is a timeout. A screenshot is taken - the menu an all not asynchronously loaded element are shown. So I guess I somehow have to enable CORS or disable websecurity. But how?

Here the Gruntfile settings for pahntomcss:

phantomcss: {
    options: {
        mismatchTolerance: 0.05, //threshold for finding visual differences
        screenshots: 'baselines', //Choose a folder to place baseline images in
        results: 'results', //results of comparison test will be placed in this folder
        viewportSize: [1920, 1080],             
        logLevel: 'debug'
    },
    src: ['tests/testfile01.js'] //path to the test file    
},  

Aucun commentaire:

Enregistrer un commentaire