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

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

CodePudding user response：

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