Fixture timeout exceeded with Playwright test runner

[becem-gharbi]

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.

https://github.com/nuxt/test-utils/blob/66b23ae6f3d717690551ff1908647ff0f0cfa63b/src/playwright.ts#L40

Logs

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

[dosubot[bot]]

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:

1. 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),
   })

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

[josip2312]

👍

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.

[becem-gharbi]

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

[josip2312]

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 https://github.com/nuxt/test-utils/issues/314#issuecomment-2047815314