Fixture timeout exceeded with Playwright test runner

Environment

Operating System: Linux
Node Version: v18.20.3
Nuxt Version: 3.11.2
CLI Version: 3.11.1
Nitro Version: -
Package Manager: pnpm@8.15.6
Builder: -
User Config: devtools
Runtime Modules: -
Build Modules: -

Reproduction

https://stackblitz.com/edit/github-jpkifv?file=playwright.config.ts

Describe the bug

Hi,
When running a fixture test with Playwright, the setup performing the build step takes too long which leads to a timeout error.

Additional context

The reason seems to be related to the setupTimeout option not passed as described in Playwright's docs https://playwright.dev/docs/next/test-fixtures#fixture-timeout.

test-utils/src/playwright.ts

Line 40 in 66b23ae

}, { scope: 'worker' },

Logs

Fixture "_nuxtHooks" timeout of 30000ms exceeded during setup.

Hey @becem-gharbi! 👋 I'm here to help you with your bug and questions. I can assist you in solving bugs, answering questions, and even becoming a contributor.

To resolve the timeout issue when running a fixture test with Playwright, you can increase the timeout for the setup phase by configuring the setupTimeout option. Here is how you can do it:

Update the playwright.config.ts file:
Add the timeout option in the use section to globally increase the timeout for all tests.

import { fileURLToPath } from 'node:url'
import { defineConfig, devices } from '@playwright/test'
import type { ConfigOptions } from '@nuxt/test-utils/playwright'

const devicesToTest = [
  'Desktop Chrome',
  // Test against other common browser engines.
  // 'Desktop Firefox',
  // 'Desktop Safari',
  // Test against mobile viewports.
  // 'Pixel 5',
  // 'iPhone 12',
  // Test against branded browsers.
  // { ...devices['Desktop Edge'], channel: 'msedge' },
  // { ...devices['Desktop Chrome'], channel: 'chrome' },
] satisfies Array<string | typeof devices[string]>

export default defineConfig<ConfigOptions>({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    trace: 'on-first-retry',
    nuxt: {
      rootDir: fileURLToPath(new URL('.', import.meta.url)),
    },
    timeout: 120000, // Set the global timeout to 2 minutes
  },
  projects: devicesToTest.map(p => typeof p === 'string' ? ({ name: p, use: devices[p] }) : p),
})

Increase the setupTimeout for the specific test:
If you need to increase the timeout for a specific test, you can do so by configuring the setupTimeout option directly in the test file.

import { test } from '@playwright/test'
import { fileURLToPath } from 'node:url'

test.use({
  nuxt: {
    rootDir: fileURLToPath(new URL('.', import.meta.url)),
    setupTimeout: 120000 // Increase the setup timeout to 2 minutes
  }
})

test('example test', async ({ page }) => {
  // Your test code here
})

By increasing the setupTimeout and the global timeout, you can prevent the timeout error during the setup phase of your Playwright tests ^[1]^[2].

Details

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

👍

I don't get why the build step is ran for every test case. In a bigger app it takes 30 seconds for each test to finish setup.

I don't get why the build step is ran for every test case. In a bigger app it takes 30 seconds for each test to finish setup.

I agree. As a solution, I suggest launching your Nuxt app with Playwright. https://playwright.dev/docs/test-webserver#configuring-a-web-server

I don't get why the build step is ran for every test case. In a bigger app it takes 30 seconds for each test to finish setup.

I agree. As a solution, I suggest launching your Nuxt app with Playwright. https://playwright.dev/docs/test-webserver#configuring-a-web-server

Does not seem to work, I used this as a workaround for now #314 (comment)