[Question] How do I listen for a custom event, when doing page.goto?

[alexbjorlig]

My objective is to create a helper function, that navigates to a page and waits for the page hydration event. My initial code looks like this:

await page.goto(url);
await page.evaulate( ... window.addEventListener('sveltekit:start )

Works great, but there is a bug. Sometimes the sveltekit:start event is emitted before the event listener is added.

How can I add the eventListener before calling page.goto?

If I move the listener to before page.goto I get this error : Execution context was destroyed, most likely because of a navigation

[mxschmitt]

You can do the following, would that work for your use-case?

  await page.addInitScript(() => {
    let resolveSvelteKitStart = () => {};
    window.svelteKitStart = new Promise(resolve => resolveSvelteKitStart = resolve);
    window.addEventListener('sveltekit:start', () => resolveSvelteKitStart());
  });
  await page.goto("...")
  await page.waitForFunction(() => window.svelteKitStart);

The addInitScript needs to be called only once for the whole page. You can also call it on the context level.

[alexbjorlig]

await page.waitForFunction(() => window.svelteKitStart);

Will this await also work on another page.goto - or only the first time?

[mxschmitt]

It will work for another page.goto's.

[mxschmitt]

closing since it seems answered, please re-file if you have more questions.

[thenbe]

@alexbjorlig You can also use the strategy implemented in the sveltekit repo itself. Tldr; you wrap(override?) the goto function.

• https://github.com/sveltejs/kit/blob/272e6c87385833e9add656070ddc87d3f46b0d2e/packages/kit/test/setup.js#L24

• https://github.com/sveltejs/kit/blob/272e6c87385833e9add656070ddc87d3f46b0d2e/packages/kit/test/utils.js#L94

• Remove sveltekit:start event sveltejs/kit#6484

[alexbjorlig]

@alexbjorlig You can also use the strategy implemented in the sveltekit repo itself. Tldr; you wrap(override?) the goto function.

• https://github.com/sveltejs/kit/blob/272e6c87385833e9add656070ddc87d3f46b0d2e/packages/kit/test/setup.js#L24
• https://github.com/sveltejs/kit/blob/272e6c87385833e9add656070ddc87d3f46b0d2e/packages/kit/test/utils.js#L94
• sveltejs/kit@70bc001

This looks amazing!

Does this also work/support client-side navigation?

[thenbe]

Sure. You can override the default page fixture and use it in all your tests. Client side navigations should breeze through since the started class is available instantly. And durring ssr, the tests should wait for that onMount to happen, signalling that hydration is complete.

// +layout.svelte

onMount(() => {
  // communicate that the app is ready - used for testing
  document.body.classList.add('started');
});

// my-fixture.ts

export const test = base.extend({
  page: async ({
    page,
  }, use) => {
    const goto = page.goto;

    page.goto = async function(url, opts) {
      const res = await goto.call(page, url, opts);

      // https://github.com/sveltejs/kit/pull/6484
      await page.waitForSelector('body.started', {
        timeout: 5000
      });

      return res;
    };

    await use(page);
  },
});

[phil-w]

It may be me being thick, but without this little hack, my Playwright Sveltekit tests were completely and horribly unreliable in ways I've not come across since the early days of test tools. This is a life safer... I guess I think maybe it needs a bit more publicity. Thanks anyway.

[jgchk]

It may be me being thick, but without this little hack, my Playwright Sveltekit tests were completely and horribly unreliable in ways I've not come across since the early days of test tools. This is a life safer... I guess I think maybe it needs a bit more publicity. Thanks anyway.

Agreed, this feels like something that should be included in the default SvelteKit scaffolding when users opt to include Playwright, or at the very least featured in documentation somewhere.