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 screenshots
• data-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);
}