When doing e2e testing with Playwright, components aren't fully loaded before tests run

I'm writing a Playwright test for a test page. The page is extremely simple, it makes a fetch to the backend to make sure it's responding (called liveness) which will return an OK or FAIL.

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

The test mocks an API call, loads the page, and checks the content of the page for the expected value.

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

Before the fetch completes, the value of liveness is undefined. When the test runs, this is what I'm getting as the textContent of the p element. While I can confirm that the page.route callback is being called, it seems it does not wait for the result. so the page is never updated from its initial state before the test finishes.

    Error: expect(received).toBe(expected) // Object.is equality    Expected: "Liveness Check: OK"    Received: "Liveness Check: undefined"

I haven't been able to find any info on this, is there something that I need to do to tell playwright to wait for the API request to complete? Or is there something I should be doing in the svelte component so Playwright doesn't think the page load is already completed?