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: [email protected]
• 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.

[dosubot]

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 #314 (comment)