How do I wait for a loading spinner to disappear in Playwright?

Assert await expect(spinner).toBeHidden(), which retries until the spinner is gone or no longer visible. Better still, assert on the content the spinner was covering, because that is what the test actually needs.

This answer is one piece of Chapter 13: Waiting and Synchronisation.

Auto-Waiting Deep Dive
Explicit Waiting Methods
Handling Race Conditions
Controlling the Clock
Practice and interview questions: Waiting & Synchronization

A fixed sleep long enough for the spinner is either too long, which wastes time, or too short on a slow day, which makes the test flaky. A web-first assertion waits exactly as long as it takes.

toBeHidden() passes whether the page hides the spinner or removes it from the DOM, so you do not need to know which the app does. It retries for the assertion timeout, 5 seconds by default; pass { timeout } if the spinner can legitimately stay up longer.

In the example, ?delay=2500 keeps the catalogue's spinner up for about 2.5 seconds. The test:

asserts the spinner is visible, so it is really testing the wait, not a page that was already loaded
asserts it is hidden
asserts the product grid has its 24 cards

Step 3 matters most. A spinner can disappear because loading failed, and a test that stops at step 2 would pass on an error page. Waiting for the real content covers both: it waits for the spinner, and it proves the data arrived.

spinner.spec.js(https://practice.learnplayforge.com)

import { test, expect } from '@playwright/test';

test('wait for the catalogue spinner to go before counting products', async ({ page }) => {
  // ?delay=2500 keeps the spinner up for about 2.5 seconds
  await page.goto('/catalog.html?mock=static&seed=42&autologin=1&delay=2500');
  await expect(page.getByTestId('catalog-loading')).toBeVisible();

  await expect(page.getByTestId('catalog-loading')).toBeHidden();
  await expect(page.getByTestId('product-card')).toHaveCount(24);
});

Output

1 passed (4.2s)

Test yourself

After the spinner goes, the page shows an error instead of the products. Which test notices?

Practised in the full course: the drill Spinner gone, list hidden.

See the chapter

AI can write the test now. The job is knowing whether it checks anything. That's what the course teaches, one chapter at a time.

163 lessons · 226 drills · start free

How do I wait for a loading spinner to disappear in Playwright?

Related questions