Skip to main content

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