使用剧作家进行e2e测试时，组件在测试运行前没有完全加载

Question

我在为一个测试页写一个剧作家测试。这个页面非常简单，它对后端进行了一个提取，以确保它是响应(称为liveness)，这将返回一个确定或失败。

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

    let liveness: string;

    onMount(async () => {
        liveness = await fetchLiveness();
    });
</script>

<div>
    <p>Liveness Check: {liveness}</p>
</div>

该测试模拟一个API调用，加载该页，并检查页面的内容是否为预期值。

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("/");
    expect(await page.textContent('p')).toBe('Liveness Check: OK');
});

在提取完成之前，活性的值是undefined。当测试运行时，这就是我作为textContent元素的p。虽然我可以确认正在调用page.route回调，但似乎不需要等待结果。因此，在测试结束之前，页面从未从其初始状态进行更新。

    Error: expect(received).toBe(expected) // Object.is equality

    Expected: "Liveness Check: OK"
    Received: "Liveness Check: undefined"

我还没有找到任何关于这方面的信息，我需要做些什么来告诉剧作家等待API请求完成吗？或者我应该在svelte组件中做些什么，这样剧作家就不会认为页面加载已经完成了？

Answer 1

使用waitForResponse，以便在验证之前等待响应。

这里要理解的关键是，在调用和加载页面之前，我们需要先等待，以避免任何争用条件。

代码：

  await Promise.all([
        page.waitForResponse(resp => resp.url().includes('/liveness') && resp.status()===200),
        page.goto("/");
   ])
        
  expect(await page.textContent('p')).toBe('Liveness Check: OK');