Nuxt•4w ago

Fixture typing

Hi guys, I am implementing E2E tests in my Nuxt app and I would like to use the Page Object Model (POM) and fixtures patterns. In my POM, I have this code :

import type { NuxtPage } from '@nuxt/test-utils'

export class ListArticlesPage {

  readonly page: NuxtPage

  constructor(page: NuxtPage) {
    this.page = page
  }

  async goto() {
    await this.page.goto('/annonces/creer', { waitUntil: 'hydration' })
  }

}

import type { NuxtPage } from '@nuxt/test-utils'

export class ListArticlesPage {

  readonly page: NuxtPage

  constructor(page: NuxtPage) {
    this.page = page
  }

  async goto() {
    await this.page.goto('/annonces/creer', { waitUntil: 'hydration' })
  }

}

Note how I have imported NuxtPage from @nuxt/test-utils so I can pass 'hydration' as an option to goto. Now in my fixtures, I have this code:

import type { NuxtPage } from '@nuxt/test-utils'
import { test as base } from '@nuxt/test-utils/playwright'

interface ListArticlesFixtures {
  listArticles: ListArticlesPage
}

export const test = base.extend<ListArticlesFixtures>({
  listArticles: async ({ page }, use) => {
    const listArticlesPage = new ListArticlesPage(page as NuxtPage)
    await use(listArticlesPage)
  },
})

import type { NuxtPage } from '@nuxt/test-utils'
import { test as base } from '@nuxt/test-utils/playwright'

interface ListArticlesFixtures {
  listArticles: ListArticlesPage
}

export const test = base.extend<ListArticlesFixtures>({
  listArticles: async ({ page }, use) => {
    const listArticlesPage = new ListArticlesPage(page as NuxtPage)
    await use(listArticlesPage)
  },
})

Here I have to cast page to NuxtPage or else, typescript will complain. Is it the expected way to do it ? Or is there a better way to handle this ?

6 Replies

kapa.ai•4w ago

Hi @tlafarge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the available knowledge sources, there is no explicit documentation or example that addresses the typing of the Playwright page object as NuxtPage when using @nuxt/test-utils/playwright with the Page Object Model (POM) and fixtures pattern. The official Nuxt documentation shows that when using Playwright with Nuxt, you typically import expect and test from @nuxt/test-utils/playwright, and the test context provides a page object. However, it does not specify the type of page or mention the need to cast it to NuxtPage. The documentation also does not provide a recommended approach for typing the page parameter in custom fixtures or POM classes. The examples simply use the page object as provided by Playwright and do not reference NuxtPage typing or casting in this context Testing in a Browser. Therefore, based on the current knowledge sources, casting page to NuxtPage as you have done appears to be a workaround due to the lack of explicit type alignment between Playwright's page and any NuxtPage type exported by @nuxt/test-utils. There is no documented "better" or more idiomatic way provided by Nuxt at this time. If you want to avoid the cast and ensure type safety, you may need to check if future versions of @nuxt/test-utils or its Playwright integration provide improved typings or utility types for this use case. For now, your approach is reasonable given the current state of the documentation and typings. If you need further clarification or want to suggest improvements, you might consider opening an issue or discussion in the Nuxt repository, as the documentation does not explicitly cover this scenario. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

tlafargeOP•4w ago

@kapa.ai Nevermind, with type casting it doesn't work. It juste remove the error from my IDE 🥲 When I run the test it throw an error : "Error: waitUntil: expected one of (load|domcontentloaded|networkidle|commit)" Is waitUntil: 'hydration' necessary or the load event is enough so my tests don't have weird behaviors ?

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources confirm that when using Playwright with Nuxt, the recommended waitUntil options for page.goto() are the standard Playwright events: 'load', 'domcontentloaded', and 'networkidle'. The value 'hydration' is not a valid option for Playwright's waitUntil parameter, which is why you are seeing the error:

"Error: waitUntil: expected one of (load|domcontentloaded|networkidle|commit)"

In the Nuxt documentation, when using the Playwright test runner with Nuxt, the goto helper provided by @nuxt/test-utils/playwright does accept 'hydration' as a special option:

await goto('/', { waitUntil: 'hydration' })

await goto('/', { waitUntil: 'hydration' })

However, this is specific to the goto helper from @nuxt/test-utils/playwright, not the standard Playwright page.goto() method. If you are using the raw Playwright page.goto(), you should use one of the standard events, such as 'load' or 'domcontentloaded' Testing in a Browser. Summary: - If you use the Nuxt test utils' goto helper, you can use 'hydration'. - If you use Playwright's native page.goto(), you must use 'load', 'domcontentloaded', or 'networkidle'. - Using 'load' is generally sufficient for most E2E tests, but if your tests depend on client-side hydration being complete, consider using the Nuxt helper or waiting for a specific DOM change that indicates hydration is done. The knowledge sources do not provide more detail on how to detect hydration completion with native Playwright, so if you need to ensure hydration, you may need to wait for a DOM marker or event that signals hydration is finished. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

tlafargeOP•4w ago

I've created an utility method inspired by the source code of nuxt/test-utils

import type { Page } from '@playwright/test'

export async function navigateTo(path: string, page: Page) {
  await page.goto(path)
  await page.waitForFunction(() => window.useNuxtApp?.().isHydrating === false)
}

import type { Page } from '@playwright/test'

export async function navigateTo(path: string, page: Page) {
  await page.goto(path)
  await page.waitForFunction(() => window.useNuxtApp?.().isHydrating === false)
}

Then in my POM I do

async goto() {
  await navigateTo('/annonces/creer', this.page)
}

async goto() {
  await navigateTo('/annonces/creer', this.page)
}

Gaming

Programming

Fixture typing

Did you find this page helpful?