Skip to content

Instantly share code, notes, and snippets.

@automagisch
Last active September 22, 2017 15:18
Show Gist options
  • Save automagisch/7ad2be5ee75b27e10111971b6394918b to your computer and use it in GitHub Desktop.
Save automagisch/7ad2be5ee75b27e10111971b6394918b to your computer and use it in GitHub Desktop.
CasperJS missing flexbox properties workaround
/*
In favor of casper.js (regressive UI testing): a very tiny and hacky fix
to get around the flexbox issues... Idea is to have this class put on the body
when we're running phantomjs.
@NOTE: There is only a class on the body 'body.casper-env' that is allowed to
make changes to minimize complexity.
@NOTE: Only apply the casper-env fix when it's needed in the test env. ofcourse
we still need (AND SHOULD) test without making any modifcations. This fix
is purely and ONLY to compensate for missing phantomjs behavior - in no
way the DOM should differ while testing and I'm aware of this, but there
is no other way right now available untill phantomjs 2.5 is released which
enables all missings goods.
*/
body.casper-env {
// do all the phantomjs compensations
.some-flexbox-thing {
display: block;
}
}
/*
function 'confirmCasperTweaks' - returns if the casper tweak (.casper-env) is
enabled on the current context. For more info
on this 'polyfill', refer to the notes marked
in 'scss/_casper-tweak.scss' for a disclaimer
and usage rules. Invoke only binded to a casper
context. (confirmCasperTweak.apply(casper|this)).
@description returns if we enabled our custom CasperJS tweak.
@return Boolean
*/
function confirmCasperTweak() {
return this.evaluate(function() {
return document.body.classList.contains('casper-env');
});
}
// start the environment, set the .casper-env class to the body and confirm (with a 'notification' that it's enabled)
casper.start('localhost:8080').thenEvaluate(function() {
document.body.classList.add('casper-env');
}).then(function() {
var enabled_tweak = confirmCasperTweak.apply(this);
if(enabled_tweak) this.echo('Casper tweaking is enabled.');
});
casper.run();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment