Anti-flaky recipes

Here are some recipes that we recommend running in the tested pages and waiting for them to resolve before taking a screenshot.

At Argos we believe that end-to-end testing should rely on accessibility. A bot can be compared to a blind person navigating in the application. That's why in these recipes we rely a lot of accessiblity of your application.

Making your application more accessible will reduce its flakiness.

Wait for all "aria-busy"

Check for the presence of [aria-busy="true"] elements on the page, which can indicate that a page is still loading:

async function ensureNoBusy() {
  const checkIsVisible = (element) =>
    Boolean(
      element.offsetWidth ||
        element.offsetHeight ||
        element.getClientRects().length
    );

  return [...document.querySelectorAll('[aria-busy="true"]')].every(
    (element) => !checkIsVisible(element)
  );
}

Wait for fonts

Wait for all fonts to be loaded:

function waitForFonts() {
  return document.fonts.status === "loaded";
}

Wait for images

Wait for all images to be loaded:

async function waitForImages() {
  return Promise.all(
    Array.from(document.images)
      .filter((img) => !img.complete)
      .map(
        (img) =>
          new Promise((resolve) => {
            img.onload = img.onerror = resolve;
          })
      )
  );
}