62 lines
1.4 KiB
Markdown
62 lines
1.4 KiB
Markdown
# End-to-End Testing with Playwright Test Runner
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
pnpm add -D @playwright/test @nuxt/test-utils
|
|
```
|
|
|
|
## Configuration
|
|
|
|
```ts
|
|
// playwright.config.ts
|
|
import { fileURLToPath } from 'node:url'
|
|
import { defineConfig, devices } from '@playwright/test'
|
|
import type { ConfigOptions } from '@nuxt/test-utils/playwright'
|
|
|
|
export default defineConfig<ConfigOptions>({
|
|
use: {
|
|
nuxt: {
|
|
rootDir: fileURLToPath(new URL('.', import.meta.url)),
|
|
},
|
|
},
|
|
// ...
|
|
})
|
|
```
|
|
|
|
## Writing Tests
|
|
|
|
Import `expect` and `test` from `@nuxt/test-utils/playwright` (not from `@playwright/test`):
|
|
|
|
```ts
|
|
// tests/example.test.ts
|
|
import { expect, test } from '@nuxt/test-utils/playwright'
|
|
|
|
test('test', async ({ page, goto }) => {
|
|
await goto('/', { waitUntil: 'hydration' })
|
|
await expect(page.getByRole('heading')).toHaveText('Welcome to Playwright!')
|
|
})
|
|
```
|
|
|
|
The `goto` helper is Nuxt-aware and supports `waitUntil: 'hydration'`.
|
|
|
|
## Per-File Nuxt Configuration
|
|
|
|
Override Nuxt config directly in a test file:
|
|
|
|
```ts
|
|
import { fileURLToPath } from 'node:url'
|
|
import { expect, test } from '@nuxt/test-utils/playwright'
|
|
|
|
test.use({
|
|
nuxt: {
|
|
rootDir: fileURLToPath(new URL('..', import.meta.url)),
|
|
},
|
|
})
|
|
|
|
test('test', async ({ page, goto }) => {
|
|
await goto('/', { waitUntil: 'hydration' })
|
|
await expect(page.getByRole('heading')).toHaveText('Welcome to Playwright!')
|
|
})
|
|
```
|