How do you make async UI tests stop flaking without just adding waits?

programming web dev
1

Hey folks, I’m trying to get our Playwright tests stable and I’m hitting a reliability wall in CI. Locally everything passes, but in GitHub Actions the same test fails like 1/20 runs because the UI sometimes renders a stale state after a retry and the click hits the wrong row.

test('retries show latest status', async ({ page }) => {
  await page.goto('/orders');
  await page.route('**/api/orders**', route => route.continue());
  await page.getByRole('button', { name: 'Retry failed' }).click();
  await expect(page.getByText('Status: Success')).toBeVisible();
  await page.getByRole('row', { name: /Order 123/ }).getByRole('button', { name: 'Open' }).click();
});

What’s the most practical way to redesign this test (or the app hooks) so it asserts the right thing and stops being flaky when async ordering and retry caching occasionally show stale data?

1 Like