Playwright & Vite - 测试块找不到元素，尽管存在

Question

我正在与带有vite前端应用程序的playwright一起运行一些 e2e 测试。 这是我的代码：

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);
    });
});

我运行这个脚本： playwright test -c./playwright.config.ts

当我运行测试时，output 是

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 }) => {

但是，当我运行playwright test -c./playwright.config.ts --debug时，它成功了。 我猜这是因为测试在调试模式下等待我的输入，然后元素开始渲染。 我怎样才能改变它工作？

我希望剧作家能找到存在的元素

Answer 1

根据文档， page.locator(...).isVisible()不会等待元素变为可见。 推荐的方法是使用expect(page.locator(...)).toBeVisible() ，它会等待特定的、可配置的时间量。

await expect(page.locator("[data-test-id='auth-brand-logo']")).toBeVisible()