Hi @open shadow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Playwright Testing Problems
long mossBOT
To address your Playwright testing issue with Nuxt, let's analyze the problem and provide a solution based on the available knowledge sources.
The error you're encountering suggests that the test is timing out before the expected content is available. This could be due to the way Nuxt hydrates the page or how Playwright is interacting with it. Let's make some adjustments to improve your test:
-
First, ensure you're using the latest version of
@nuxt/test-utilsand its peer dependencies as mentioned in the Nuxt documentation on testing (https://nuxt.com/docs/getting-started/testing#installation). -
Update your test file to use the correct imports and setup from
@nuxt/test-utils/playwright. Here's an example of how your test file should look:
import { expect, test } from '@nuxt/test-utils/playwright'
test('basic test', async ({ page, goto }) => {
await goto('/', { waitUntil: 'hydration' })
await expect(page.locator('title')).toHaveText('Welcome to Daytistics', { timeout: 10000 })
})
- In your Playwright configuration, make sure you're using the correct setup for Nuxt. Update your config file as follows:
import { fileURLToPath } from 'node:url'
import { defineConfig, devices } from '@playwright/test'
import type { ConfigOptions } from '@nuxt/test-utils/playwright'
const devicesToTest = [
'Desktop Chrome',
] satisfies Array<string | (typeof devices)[string]>
export default defineConfig<ConfigOptions>({
testDir: './playwright',
use: {
trace: 'on-first-retry',
nuxt: {
rootDir: fileURLToPath(new URL('.', import.meta.url)),
},
},
projects: devicesToTest.map((p) => (typeof p === 'string' ? { name: p, use: devices[p] } : p)),
})
- If the issue persists, you might need to increase the timeout for the specific assertion. You can do this by adding a
timeoutoption to theexpectcall:
await expect(page.locator('title')).toHaveText('Welcome to Daytistics', { timeout: 10000 })
- Additionally, consider using a more reliable selector for your test. Instead of checking the
<title>tag, which might not be immediately available, try asserting on a visible element on the page:
await expect(page.getByRole('heading', { name: 'Welcome to Daytistics' })).toBeVisible({ timeout: 10000 })
These changes should help resolve the timeout issue you're experiencing. If you're still encountering problems, it might be worth checking if there are any specific loading or hydration delays in your Nuxt application that could be affecting the test.
For more detailed information on Nuxt testing with Playwright, refer to the following resources:
- Nuxt Documentation on Testing (https://nuxt.com/docs/getting-started/testing)
- Nuxt Test Utils with Playwright (https://nuxt.com/docs/getting-started/testing#testing-with-playwright-test-runner)