I am waiting for a text within a locator that only displays itself after a few minutes but the page won't reload on its own to show it - we have a standard refresh button that needs to be clicked occasionally. There are 3 stages of the text that dynamically change. Stage 1 = 'Pending', Stage 2 = 'Running', Stage 3 = 'Completed'. Of course, if the text turns into 'Failed', it should fail the whole test. Any ideas?
Using expect.toPass() to retry until it pass:
test('Expect completed', async ({ page }) => {
await expect(async () => {
await page.getByRole('button', { name: 'refresh' }).click()
await expect(page.getByText('Completed')).toBeVisible()
}).toPass({ intervals: [30_000, 60_000, 90_000, 120_000] })
// Retries every half minute for 2 minutes
})
EDIT: A second approach that sets the timeout of the test to 15 minutes and retrying every 10 second using a promise with timeout:
test("Expect completed 2", async ({ page }) => {
test.setTimeout(15 * 60 * 1_000); // 15 minutes
while (await page.getByText("Completed").isHidden()) {
await Promise.all([
page.getByRole("heading", { name: "refresh" }).click(),
new Promise((resolve) => setTimeout(resolve, 10_000)),
]);
}
// If test exits the loop, it will pass. If not it will fail cause of the test timeout
});