Skip to main content

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 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>

Then, inject the style into the tested page before taking the screenshot.