Playwright+Vite测试无法找到已存在元素的问题求助

使用Playwright对Vite前端应用进行端到端（E2E）测试时，执行命令playwright test -c ./playwright.config.ts测试报错，提示元素不可见；但使用调试模式playwright test -c ./playwright.config.ts --debug运行时测试成功。推测是调试模式的等待时间让元素完成了渲染，普通模式下元素还未渲染完成就执行了断言。

测试代码如下：

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

报错信息：

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

核心问题是原代码中isVisible()是立即判断元素状态，不会等待元素渲染完成；而Playwright的断言API内置了自动重试等待机制，可以解决这个问题。以下是几种可行的修改方式：

方式一：使用Playwright内置可见性断言（推荐） #

直接用await expect(locator).toBeVisible()，它会在默认超时时间（可配置）内不断检查元素是否可见，直到满足条件或超时，完全适配动态渲染的场景。

修改后的测试代码：

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/');
        // 自动等待元素可见，无需手动判断
        await expect(page.locator("[data-test-id='auth-brand-logo']")).toBeVisible();
    });
});

方式二：优化页面加载等待逻辑 #

如果页面依赖网络请求加载资源（比如Vite的chunk加载、接口请求），可以在page.goto时指定更严格的等待条件：

// 等待网络空闲（500ms内没有网络请求）再执行后续操作
await page.goto('http://localhost:8080/', { waitUntil: 'networkidle' });

或者等待特定接口响应完成：

// 并行执行页面跳转和接口等待，避免额外耗时
await Promise.all([
  page.goto('http://localhost:8080/'),
  page.waitForResponse(res => res.url().includes('/api/auth/init') && res.ok())
]);

方式三：手动等待（不推荐，仅应急） #

如果以上方式都不适用，可以临时添加固定时长的等待，但硬编码等待不够灵活，容易因环境差异失效：

await page.goto('http://localhost:8080/');
await page.waitForTimeout(2000); // 等待2秒后再检查元素
await expect(page.locator("[data-test-id='auth-brand-logo']")).toBeVisible();

内容的提问来源于stack exchange，提问作者exlint development