Nuxt•4mo ago

How do I enable "headful mode" when running E2Es?

I have Vitest set up and I can run tests, but I need to be able to see these tests run sometimes for debugging purposes. I cannot get headless mode enabled. Browser Mode seems really cool, but it currently does not work (I can share screenshots and logs if that sounds incorrect, but considering it is an experimental feature I'm assuming that it just doesn't work yet). How do I turn off headless mode?

3 Replies

kapa.ai•4mo ago

Hi @elliott. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To run your end-to-end (E2E) tests in "headful mode" (i.e., with the browser UI visible) using Nuxt's testing utilities, you need to configure Playwright (which is used under the hood for browser-based E2E tests) to launch the browser in non-headless mode. While the Nuxt documentation explains how to enable browser testing and configure browser options via the setup function in your test files, it does not explicitly mention how to set the headless option. However, Playwright's standard configuration allows you to pass a launch object with options, including headless: false, to the browserOptions property. Here’s how you can do it in your Nuxt E2E test setup:

import { describe, it, expect } from 'vitest'
import { setup, createPage } from '@nuxt/test-utils/e2e'

describe('headful mode test', async () => {
  await setup({
    browser: true,
    browserOptions: {
      type: 'chromium', // or 'firefox', 'webkit'
      launch: {
        headless: false // This enables headful mode
      }
    }
  })

  it('should display the page', async () => {
    const page = await createPage('/')
    // ... your test logic
  })
})

import { describe, it, expect } from 'vitest'
import { setup, createPage } from '@nuxt/test-utils/e2e'

describe('headful mode test', async () => {
  await setup({
    browser: true,
    browserOptions: {
      type: 'chromium', // or 'firefox', 'webkit'
      launch: {
        headless: false // This enables headful mode
      }
    }
  })

  it('should display the page', async () => {
    const page = await createPage('/')
    // ... your test logic
  })
})

This configuration should launch the browser with its UI visible, allowing you to watch the tests run for debugging purposes. If you encounter issues with "Browser Mode" or experimental features, using the above approach with Playwright's standard options is the recommended way to enable headful mode in Nuxt E2E tests at this time. For more details on available options, see the Nuxt Testing documentation and the Playwright API reference as linked in the docs<sup>Nuxt E2E Testing</sup>. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@385612261101666306> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

elliottOP•4mo ago

That suggestion is not correct in the slightest. I can't imagine you'd want to configure this for each file, either.

Gaming

Programming

How do I enable "headful mode" when running E2Es?

Did you find this page helpful?