使用Playwright做E2E测试时，组件未加载完成断言失败如何解决？

方法一：利用Playwright的自动等待断言 #

Playwright的locator断言自带自动等待机制，会轮询直到元素符合预期或超时，替换手动获取文本的方式即可解决：

import { expect, test } from "@playwright/test";

test("index page has expected liveness result", async ({ page }) => {
    await page.route('**/liveness', async (route) => {
        await route.fulfill({
            status: 200,
            contentType: "application/json",
            body: "OK"
        });
    });
    await page.goto("/");
    // 自动等待文本更新至预期值
    await expect(page.locator('p')).toHaveText('Liveness Check: OK');
});

方法二：显式等待API请求完成 #

在测试中提前监听API请求，确保请求响应完成后再执行断言：

import { expect, test } from "@playwright/test";

test("index page has expected liveness result", async ({ page }) => {
    // 预定义等待请求完成的Promise
    const livenessResponsePromise = page.waitForResponse('**/liveness');
    
    await page.route('**/liveness', async (route) => {
        await route.fulfill({
            status: 200,
            contentType: "application/json",
            body: "OK"
        });
    });
    
    await page.goto("/");
    // 等待API请求响应完成
    await livenessResponsePromise;
    
    expect(await page.textContent('p')).toBe('Liveness Check: OK');
});

方法三：调整Svelte组件优化测试体验 #

在组件中用{#await}块处理异步状态，明确展示加载过程，让测试更容易识别状态变化：

<script lang="ts">
    import { onMount } from "svelte";
    import { fetchLiveness } from "$lib/request";

    let livenessPromise: Promise<string>;

    onMount(() => {
        livenessPromise = fetchLiveness();
    });
</script>

<div>
    {#await livenessPromise}
        <p>Liveness Check: Loading...</p>
    {:then liveness}
        <p>Liveness Check: {liveness}</p>
    {:catch}
        <p>Liveness Check: FAIL</p>
    {/await}
</div>

调整后测试仍可沿用前两种方法，Playwright会自动等待异步状态更新完成。

内容的提问来源于stack exchange，提问作者Nick Jennings