Last active
September 22, 2017 15:18
-
-
Save automagisch/7ad2be5ee75b27e10111971b6394918b to your computer and use it in GitHub Desktop.
CasperJS missing flexbox properties workaround
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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