I am resolving an issue with a PWA not working offline properly and thought it would be a good idea to add a test to ensure that the PWA works offline. I use Playwright.

test('works offline', async ({ page }) => {
  // Go to the webpage
  await page.goto('http://localhost:3000/')

  // Go offline
  await page.context().setOffline(true)

  // Keep a list of all failed requests
  const failed: string[] = []
  page.context().on('requestfailed', (r) => {
    if (r.url().startsWith('http://localhost')) {
      failed.push(r.url() + ' ' + r.failure()!.errorText)
    }
  })

  // Reload the page
  await page.reload()

  // Ensure that the app still kinda works
  // expect(...)

  // Ensure that there are no failed requests
  expect(failed).toHaveLength(0)
})

When the app fails to load some asset files while offline, it will result in a test failure that looks like this: