CSS Preflight
Browsers may have unstable rendering for certain elements, such as scrollbars and border-radii. To ensure consistency in screenshots, Argos provides a set of rule to stabilize it.
This is the CSS preflight injected by our integrations before taking a screenshot:
/* Hide carets */
* {
caret-color: transparent !important;
}
/* Hide scrollbars */
::-webkit-scrollbar {
display: none !important;
}
/* Generic hide */
[data-visual-test="transparent"] {
color: transparent !important;
font-family: monospace !important;
opacity: 0 !important;
}
[data-visual-test="removed"] {
display: none !important;
}
This snippet provides the following attributes to hide or remove unstable HTML nodes:
data-visual-test="transparent"
— hide this HTML node from screenshotsdata-visual-test="removed
— remove this HTML node from screenshots
Using these styles
To use these styles, add the appropriate attribute to your unstable element:
<button data-visual-test="transparent">Click here</button>
Here is an example of function to inject styles in the page:
function injectStyles(document) {
const css = document.createElement("style");
css.type = "text/css";
css.textContent = cssText;
document.body.appendChild(css);
}