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