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);
});