Playwright & Vite - test block cannot find an element, although exists - reactjs

Question

I'm running some e2e tests with playwright with vite frontend application.
This is my code:
import { test, expect } from '#playwright/test';
test.describe('Auth page #auth-page', () => {
test('auth page should have brand logo', async ({ page }) => {
await page.goto('http://localhost:8080/');
const isBrandLogoElementVisible = await page.locator("[data-test-id='auth-brand-logo']").isVisible();
expect(isBrandLogoElementVisible).toBe(true);
});
});
I run this script: playwright test -c ./playwright.config.ts
When I run the test the output is
basic/auth.spec.ts:4:6 › Auth page #auth-page › auth page should have brand logo ==============
Error: expect(received).toBe(expected) // Object.is equality
Expected: true
Received: false
7 | const isBrandLogoElementVisible = await page.locator("[data-test-id='auth-brand-logo']").isVisible();
8 |
> 9 | expect(isBrandLogoElementVisible).toBe(true);
| ^
10 | });
11 |
12 | test('auth page should have main header', async ({ page }) => {
But, when I run playwright test -c ./playwright.config.ts --debug it succeeds. I guesss it's because the test waits for my inputs on debug mode and then the element start rendering.
How can I change it to work?
I Expect Playwright to find the element as it exists

Answer 1

According to the docs, page.locator(...).isVisible() does not wait for the element to become visible. The recommended way to do this is to use expect(page.locator(...)).toBeVisible() which does wait for a specific, configurable amount of time.
await expect(page.locator("[data-test-id='auth-brand-logo']")).toBeVisible()