Playwright testing with Server Side Fetches

[mabentley85]

When running Playwright tests, setting up mock API routes is pretty straight forward as per this simple example test:

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

test('Simple Test', async ({ page }) => {
  // Mock the API Endpoint
  await page.route('http://api.example.com/ping', (route) =>
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: {
        message: 'pong' 
      }
    })
  );

  // Navigate To Page
  await page.goto('/simple');
  
  // Check for Expected Content on Page
  await expect(page.locator('h1')).toHaveText('Simple Page');
  await expect(page.locator('h2')).toContainText('Pong');  
});

When testing the page below it runs fine, as the API request is run in the browser:

<script>
  import { onMount } from 'svelte';

  const title = 'Simple Page';
  let ping = {}; 

  onMount(async () => {
    // Get list of items
    const response = await fetch('http://api.example.com/ping', {
      method: 'GET',
      mode: 'cors',
      credentials: 'include',
      headers: {
        Accept: 'application/json'
      }
    });
    ping = await response.json();
  }
});
</script>

<svelte:head>
  <title>{title}</title>
</svelte:head>

<h1>{title}</h1>
<h2>Browser Side Ping: {ping.message}</h2>

But with this page, the test times out, as it's looking for the actual URL and is not intercepted by the mock API endpoint:

<script context="module">
  export async function load({ fetch }) {
    const response = await fetch('http://api.example.com/ping', {
      method: 'GET',
      mode: 'cors',
      credentials: 'include',
      headers: {
        Accept: 'application/json'
      }
    });
    
    if (response.status === 200) {
      const ping = await response.json();
        return { props: { ping } };
    }

    return {
      status: response.status,
      error: new Error('Error Getting Ping')
    };
  }
</script>

<script>
  export let ping;
  
  const title = 'Simple Page';
</script>

<svelte:head>
	<title>{title}</title>
</svelte:head>

<h1>{title}</h1>
<h2>Server Side Ping: {ping.message}</h2>

Are there any ways to configure Playwright and/or SvelteKit in order to intercept server side fetches so that mock data is returned?

[sidharthramesh]

Any updates here?

[mabentley85]

I just revisited this now that things have changed a lot since I initially posting this. I have found a workaround using an environment variable set by Playwright and turning off Server Side Rendering when it is present. Probably not the best solution, but if anyone has any better ideas, please share them!

+page.js

import { error } from '@sveltejs/kit';

export const ssr = (typeof process !== 'undefined' && 'PLAYWRIGHT_TEST_BASE_URL' in process.env) ? false : true;

/** @type {import('./$types').PageLoad} */
export async function load({ fetch }) {
  const response = await fetch('http://api.example.com/ping', {
    method: 'GET',
    mode: 'cors',
    credentials: 'include',
    headers: {
      Accept: 'application/json'
    }
  });

  if (response.status === 200) {
    const ping = await response.json();
      return { ping };
  }
  
  throw error(500, 'Error Message');
}

+page.svelte

<script>
  /** @type {import('./$types').PageData} */
  export let data;

  import { onMount } from 'svelte';

  const title = 'Ping Test';
  let testResponse = {};

  onMount(async () => {
    // Get list of items
    const response = await fetch('http://api.example.com/ping', {
      method: 'GET',
      mode: 'cors',
      credentials: 'include',
      headers: {
        Accept: 'application/json'
      }
    });

    if (response.status === 200) {
      testResponse = await response.json();
    }
  });
</script>

<svelte:head>
  <title>{title}</title>
</svelte:head>

<h1>{title}</h1>
<h2>Server Side Ping: {data.ping.message}</h2>
<h2>Client Side Ping: {testResponse.message}</h2>

+page.test.js

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

test.describe('Simple Tests', () => {
  test('simple page has expected one h1 and two h2 elements', async ({ browser }) => {
    const browserContext = await browser.newContext();
    const page = await browserContext.newPage();

    await page.route(`${process.env.VITE_API_URL}/ping`, (route) =>
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: {
          message: 'pong' 
        }
      })
    );

    await page.goto('/ping');

    await expect(page.locator('//html/body/div/main/h1')).toHaveText('Ping Test');
    await expect(page.locator('//html/body/div/main/h2[1]')).toContainText('Pong');
    await expect(page.locator('//html/body/div/main/h2[2]')).toContainText('Pong');
  });
});

[aerojeyenth]

You can use tools like mswjs to mock your servercalls.

[Nhollas]

Do you have an example of this?

[markjaquith]

I wrote a package to do this.

The setup is more involved than I would like, but it solved my issue with Playwright tests hitting production API requests during E2E tests.

https://github.com/markjaquith/sveltekit-playwright-fetch-mock