# End-to-End Testing with Vitest

## Setup

In each `describe` block, call `setup()` before tests to initialize the Nuxt test environment:

```ts
import { describe, test } from 'vitest'
import { $fetch, setup } from '@nuxt/test-utils/e2e'

describe('My test', async () => {
  await setup({
    // test context options
  })

  test('my test', () => {
    // ...
  })
})
```

`setup` performs tasks in `beforeAll`, `beforeEach`, `afterEach`, and `afterAll`.

## Setup Options

### Nuxt Config
- `rootDir`: Path to Nuxt app directory (default: `'.'`)
- `configFile`: Configuration file name (default: `'nuxt.config'`)

### Timings
- `setupTimeout`: Time in ms for setup to complete (default: `120000`, `240000` on Windows)
- `teardownTimeout`: Time in ms for teardown (default: `30000`)

### Features
- `build`: Run a separate build step (default: `true`, `false` if browser/server disabled or host provided)
- `server`: Launch a server for requests (default: `true`, `false` if host provided)
- `port`: Fixed test server port (default: `undefined`, auto-assigned)
- `host`: URL to test against instead of building a new server (useful for testing deployed apps)
- `browser`: Launch a Playwright browser instance (default: `false`)
- `browserOptions`:
  - `type`: `'chromium'` | `'firefox'` | `'webkit'`
  - `launch`: Playwright launch options
- `runner`: Test runner (`'vitest'` | `'jest'` | `'cucumber'`, default: `'vitest'`)

## API Helpers

### `$fetch(url)`

Get the HTML of a server-rendered page:

```ts
import { $fetch } from '@nuxt/test-utils/e2e'

const html = await $fetch('/')
```

### `fetch(url)`

Get the full response:

```ts
import { fetch } from '@nuxt/test-utils/e2e'

const res = await fetch('/')
const { body, headers } = res
```

### `url(path)`

Get the full URL including the test server port:

```ts
import { url } from '@nuxt/test-utils/e2e'

const pageUrl = url('/page')
// 'http://localhost:6840/page'
```

### `createPage(url)`

Create a Playwright browser page (requires `browser: true` in setup):

```ts
import { createPage } from '@nuxt/test-utils/e2e'

const page = await createPage('/page')
// Full Playwright Page API available
```

## Target Host Example

Test against a running server instead of building:

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

describe('login page', async () => {
  await setup({
    host: 'http://localhost:8787',
  })

  it('displays the email and password fields', async () => {
    const page = await createPage('/login')
    expect(await page.getByTestId('email').isVisible()).toBe(true)
    expect(await page.getByTestId('password').isVisible()).toBe(true)
  })
})
```