Injecting Styles
Browsers may have unstable rendering for certain elements, such as scrollbars and border-radii. To ensure consistency in screenshots, it can be helpful to hide or remove these elements.
In our integrations, we inject the following styles 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>
Then, inject the style into the tested page before taking the screenshot.