Skip to main content

Style injection

Inject CSS to fix unstable rendering.

Browsers have unstable rendering for some use-cases like scrollbar display and border-radius consistency.

Use the code below to override the style and fix unstable rendering :

  • The first rule hides all scrollbars.
  • The data-test-hidden class allows you to hide flagged DOM nodes from the screenshots.
  • The data-test-no-radius class enables you to remove border-radius from the flagged DOM node.
function injectStyles(document) {
const cssText = `
/* Hide scrollbars */
::-webkit-scrollbar {
display: none !important;
}

/* Generic hide */
[data-test-hidden] {
opacity: 0 !important;
}

/* Generic hide */
[data-test-no-radius] {
border-radius: 0 !important;
}
`;
const css = document.createElement("style");
css.type = "text/css";
css.textContent = cssText;
document.body.appendChild(css);
}

/* Cypress command example */
Cypress.Commands.add("argosScreenshot", (name, options = {}) => {
// Inject style
cy.document().then((doc) => injectStyles(doc));

// Wait for font loading
cy.document().its("fonts.status").should("equal", "loaded");

// Take a screenshot with Cypress
cy.screenshot(name, options);
});