shiftcraft/.claude/skills/nuxt-testing/references/e2e-playwright.md

End-to-End Testing with Playwright Test Runner

Installation

pnpm add -D @playwright/test @nuxt/test-utils

Configuration

// 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):

// 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:

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!')
})