Playwright Error: waiting for expect(locator).toBeVisible()

Question

When I run my test in Playwright the assertion always fails. It does not match the h2 element even though the page does display it.

My test code:

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

test('Thomann', async ({ page }) => {
  await page.goto('https://www.thomann.de/intl/index.html');
  await page.locator('xpath=/html/body/div[2]/div/div/div/div[2]/button[1]').click();
  await expect(page.getByRole('heading', { name: 'Nuestras categorías' })).toBeVisible();
});

Log Error:

Error: Timed out 5000ms waiting for expect(locator).toBeVisible()

Locator: getByRole('heading', { name: 'Nuestras categorías' })
Expected: visible
Received: hidden
Call log:
  - expect.toBeVisible with timeout 5000ms
  - waiting for getByRole('heading', { name: 'Nuestras categorías' })

Answer 1

I don't know about you, but I'm redirected to https://www.thomannmusic.com/index.html. It could be because I'm in the USA. In any case, I suggest running headfully with npx playwright test --headed to make sure you're winding up in the right place.

Otherwise, the code works for me if I use English text:

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

test("has an 'Our Categories' heading after redirect and cookie reject", async ({page}) => {
  await page.goto("https://www.thomann.de/intl/index.html");
  await expect(page).toHaveURL("https://www.thomannmusic.com/index.html");
  await page.getByRole("button", {name: "Reject Cookies"}).click();
  await expect(page.getByRole("heading", {name: "Our Categories"})).toBeVisible();
});

Notice I'm not using an xpath, which is discouraged because it's not user-visible, and it's fragile, since if a single div changes in the chain, the path will no longer be valid.