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