For a control that appears after a click, navigation, or asynchronous update, locate it by its role or label and use the locator action directly. Playwright waits for the checks needed to perform actions such as clicking; then use a retrying assertion to verify the visible result. This synchronizes the test with the interface instead of relying on a guessed delay.
Use a fresh, user-facing locator for the control
A Playwright locator is a query that resolves against the page when it is used, rather than a permanent reference to one DOM node. If the page re-renders between actions, a locator can find the matching element in the updated DOM. Prefer locators based on how a user identifies the control—such as its role and accessible name, or a form label. Use a test ID when the application provides it as an explicit testing contract. See Playwright’s locator guidance.
const save = page.getByRole('button', { name: 'Save' });
await save.click();Creating the locator before the control appears is generally fine: it is resolved when the action runs. The locator should still identify the intended control uniquely; a stale-looking screen or an ambiguous match calls for checking the locator, not adding a delay.
Let actions wait for actionability
Before locator.click(), Playwright waits for the target to resolve to one element and for it to be visible, stable, enabled, and able to receive pointer events. If those conditions do not become true within the configured action timeout, the action fails with a TimeoutError. These checks answer whether the control can be clicked; they do not establish that an entire application workflow has finished. Playwright describes these checks in its auto-waiting documentation.
#1 Best Overall
For a control expected to appear after an interaction, try the normal locator action first. Avoid a fixed sleep as a readiness strategy: a delay may be unnecessarily long on a fast run and too short on a slow one, and it does not prove the control is usable.
Assert the result the user should see
After the action, use a web-first assertion to wait for the outcome that matters. Assertions such as toBeVisible() and toHaveText() retry until the condition passes or the assertion timeout expires. Playwright documents a five-second default assertion timeout; a project can configure a different value. This assertion timeout is distinct from an action timeout. See Playwright’s assertion documentation.
import { expect } from '@playwright/test';
const save = page.getByRole('button', { name: 'Save' });
await save.click();
await expect(page.getByRole('status')).toHaveText('Saved');The click waits for the button to be actionable; the assertion waits for the status text. Choose an assertion that represents the application outcome, rather than treating the successful click itself as proof that the save completed.
Wait for transient dialogs before interacting
If a dialog appears asynchronously, assert that it is visible before proceeding. Then locate its control within the dialog, which scopes the query and helps distinguish it from similarly named controls elsewhere on the page.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →const dialog = page.getByRole('dialog', { name: 'Confirm changes' });
await expect(dialog).toBeVisible();
await dialog.getByRole('button', { name: 'Continue' }).click();For transient UI such as a toast, assert the state you need while it is available. To verify dismissal, use a retrying hidden-state assertion such as toBeHidden(), provided the locator and expected lifecycle match the application. Do not assume an action’s auto-wait covers a later disappearance or other business-process state.
Wait for a changing list before enumerating it
locator.all() returns immediately; it does not wait for a dynamic list to finish populating. Calling it while results are still arriving can produce unpredictable results. First wait for an application-specific readiness signal, such as a loading indicator becoming hidden or a known result count being reached, then enumerate the list. The Locator API reference documents this behavior.
const loading = page.getByRole('status', { name: 'Loading results' });
await expect(loading).toBeHidden();
const rows = await page.getByRole('row').all();Use a signal that actually means the relevant results are ready in your application. A hidden spinner is useful only if the application hides it after the list has reached the state your test needs.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Handle alternate UI states without ambiguous locators
Sometimes the next screen can show either the intended control or an interstitial, such as a security dialog. A locator union using or() can express that either state may appear, but if both locators match simultaneously the union may match multiple elements and cause a strictness error. Detect and handle the interstitial explicitly, then continue with the locator for the intended control. Playwright discusses locator alternatives in its locator documentation.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Do not treat a union as a substitute for deciding what the test should do in each state. Make each branch explicit, and ensure subsequent actions target the correct state.
Diagnose timeouts before increasing them or forcing a click
A timed-out action can mean the locator is wrong or ambiguous, the element never becomes actionable, an overlay intercepts pointer events, or the timeout is unsuitable for the application. Check which condition is failing and whether the page reached the expected state. Increase a timeout only when the operation legitimately needs more time and the underlying condition is understood.
Forcing a click is not a general reliability fix. With force, Playwright disables non-essential actionability checks, including checking that the target receives events. That can conceal an overlay or another real interaction problem. Use it only when bypassing the relevant check is intentional; otherwise fix the locator or UI-state handling. See the actionability guide.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Free tools Windows power users keep installed
One-click scans. No signup required.
