N
Nuxt•2w ago
Tobberoth

Playwright browser wont open

Even though my setup function looks like this: await setup({ host: 'http://localhost:3000', browser: true }) No browser window is opened when I run "npm run test", the tests just run in the CLI as if browser was set to false.
8 Replies
kapa.ai
kapa.ai•2w ago
Hi @Tobberoth. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, I can see that you're trying to use Playwright for browser testing with Nuxt, but the browser isn't opening as expected. There are a few things to check: 1. Make sure you have the required dependencies installed. For browser testing with Nuxt, you need: 
npm i --save-dev @nuxt/test-utils playwright-core
npm i --save-dev @nuxt/test-utils playwright-core
If you're using the Playwright test runner specifically: 
npm i --save-dev @playwright/test @nuxt/test-utils
npm i --save-dev @playwright/test @nuxt/test-utils
2. Your setup looks correct with browser: true, but you might need to add browserOptions to configure how the browser launches: 
await setup({
  host: '<http://localhost:3000',>
  browser: true,
  browserOptions: {
    type: 'chromium', // or 'firefox' or 'webkit'
    launch: {
      // Additional launch options
      headless: false // Explicitly set to false to see the browser
    }
  }
})
await setup({
  host: '<http://localhost:3000',>
  browser: true,
  browserOptions: {
    type: 'chromium', // or 'firefox' or 'webkit'
    launch: {
      // Additional launch options
      headless: false // Explicitly set to false to see the browser
    }
  }
})
3. Consider using the Playwright test runner directly instead of the custom setup function, which might provide a better debugging experience: 
import { expect, test } from '@nuxt/test-utils/playwright'

test('test', async ({ page, goto }) => {
  await goto('/', { waitUntil: 'hydration' })
  // Your test code here
})
import { expect, test } from '@nuxt/test-utils/playwright'

test('test', async ({ page, goto }) => {
  await goto('/', { waitUntil: 'hydration' })
  // Your test code here
})
The Nuxt team has been migrating their own tests to use the Playwright test runner for "a nicer debugging experience" as mentioned in a recent PR. If you're still having issues, make sure you're using a compatible version of Playwright-core. Recent updates include versions 1.48.0 and 1.48.2 as seen in several PRs in the Nuxt repository. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@184996700883124225> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Tobberoth
TobberothOP•2w ago
@kapa.ai Setting launch options helped, now the browser shows up. However, it's shut down automatically once the test is over. I want it to stay open.
kapa.ai
kapa.ai•2w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm glad the browser is now showing up! When using Playwright with Nuxt testing, the browser automatically closes after tests complete by default. To keep it open for debugging purposes, you can modify your browserOptions configuration. Here's how to prevent the browser from closing automatically: 
await setup({
  host: '<http://localhost:3000',>
  browser: true,
  browserOptions: {
    type: 'chromium', // or your preferred browser
    launch: {
      headless: false,
      // This prevents the browser from closing after the test
      slowMo: Infinity
    }
  }
})
await setup({
  host: '<http://localhost:3000',>
  browser: true,
  browserOptions: {
    type: 'chromium', // or your preferred browser
    launch: {
      headless: false,
      // This prevents the browser from closing after the test
      slowMo: Infinity
    }
  }
})
The slowMo: Infinity option effectively keeps the browser open indefinitely. This is particularly useful for debugging your tests. Alternatively, if you're using the Playwright test runner directly, you can use the --headed flag with the --debug flag when running your tests: 
npx playwright test --headed --debug
npx playwright test --headed --debug
This will open the browser and pause execution, allowing you to inspect what's happening. Remember that keeping the browser open is primarily for development and debugging purposes. For CI/CD pipelines or production testing, you'll want to let the browser close automatically to free up resources. I hope this helps with your testing workflow! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@184996700883124225> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Tobberoth
TobberothOP•2w ago
@kapa.ai The browser windows are still automatically shut down with slowMo set to Infinity.
kapa.ai
kapa.ai•2w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand that you're still experiencing issues with the browser windows closing automatically even with slowMo: Infinity. Let me suggest some alternative approaches based on the knowledge sources. Looking at the Nuxt testing documentation, there are a few other options you might try: 1. Try using the Playwright test runner directly instead of the setup function, as it might provide better control over the browser lifecycle: 
import { expect, test } from '@nuxt/test-utils/playwright'

test.use({
  nuxt: {
    rootDir: '.' // path to your Nuxt app
  }
})

// Add this to keep the browser open for debugging
test.use({ 
  launchOptions: { 
    headless: false,
    devtools: true,
    timeout: 0
  } 
})

test('test', async ({ page, goto }) => {
  await goto('/', { waitUntil: 'hydration' })
  // Your test code here
})
import { expect, test } from '@nuxt/test-utils/playwright'

test.use({
  nuxt: {
    rootDir: '.' // path to your Nuxt app
  }
})

// Add this to keep the browser open for debugging
test.use({ 
  launchOptions: { 
    headless: false,
    devtools: true,
    timeout: 0
  } 
})

test('test', async ({ page, goto }) => {
  await goto('/', { waitUntil: 'hydration' })
  // Your test code here
})
2. If you're using the Playwright CLI, you can run your tests with: 
npx playwright test --headed --debug
npx playwright test --headed --debug
The --debug flag is particularly important as it will pause execution and keep the browser open. 3. Another approach is to add a deliberate pause at the end of your test: 
test('my test', async () => {
  // Your test code
  
  // Add a very long pause at the end
  await page.waitForTimeout(3600000) // 1 hour in milliseconds
})
test('my test', async () => {
  // Your test code
  
  // Add a very long pause at the end
  await page.waitForTimeout(3600000) // 1 hour in milliseconds
})
The Nuxt team has been migrating their own tests to use the Playwright test runner directly, as it provides a better debugging experience, so that might be the most reliable approach for keeping the browser open during development. If you're still experiencing issues, it might be related to the specific version of Playwright you're using, as there have been several updates to Playwright-core in the Nuxt repository recently. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@184996700883124225> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?