Stabilize glitches
Some graphic glitches can be experienced because of unstable rendering engine of browsers. Here are some solutions to stabilize rendering.
Border radius
Sometimes, the border-radius
property can cause screenshots to appear differently across different browsers or devices.
To address this, you can add the data-test-no-radius
attribute to unstable components and inject the following CSS snippet before taking a screenshot:
[data-test-no-radius] {
border-radius: 0 !important;
}
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);
}