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

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()