SAKURUG TECHBLOG

Nuxt3とPlaywrightを使ったE2Eテスト_⑧Nuxt対応の待機処理

技術記事

2024-07-30 author-name

Toki

はじめに

SAKURUGのTokiです。

本記事ではPlaywrightを使用してNuxt3環境でのE2Eテスト待機処理についてステップバイステップでご紹介します！

今回はvitestを使用していません。Nuxt3環境でのE2Eテストのみ実行する為です。

総8回でNuxt3環境におけるPlaywrightを使用したE2Eテストについてご紹介してます。

基本編

応用編

5.Basic認証

6.Cookie認証

7.テスト結果動画保存方法

8.Nuxt(SSR)に対応した待機処理 (本記事)

待機処理のアンチパターン

・waitForTimeout(1000) → 1秒待機

・watForLoadState('networkidle') → ネットワークが安定するまで待機(公式ドキュメントより非推奨)

DISCOURAGED consider operation to be finished when there are no network connections for at least 500 ms. Don't use this method for testing, rely on web assertions to assess readiness instead.

DISCOURAGEDでは、少なくとも500ミリ秒の間ネットワーク接続がない場合、操作が終了したとみなす。この方法をテストに使わないでください。代わりに、ウェブ・アサーションに頼って準備完了を評価してください。

参考 : Playwright - Page - waitForLoadState

この記事を読んで欲しい人

・上記のアンチパターンを使用して、E2Eテストを作成している方

・Nuxt3環境でE2Eテストを行いたい方

・Nuxt特有のSSRやhydrationにより、Playwrightの待機処理で躓いている方

紹介すること / 紹介しないこと

紹介すること : nuxt/test-utilsテストライブラリのインストール・Nuxt3に対応した待機処理方法

紹介しないこと : Playwrightの環境構築・テスト生成・テスト実行・テスト結果確認

※第1回～第4回の基本編でご紹介してます。

動作環境

OS	Windows 11
Node.js	20.14.0
Nuxt.js	38.1
Playwright / Tes	1.45.1
nuxt / test-utils	3.13.1

nuxt/test-utilsテストモジュールのインストール

npm i --save-dev @nuxt/test-utils

package.jsonの追加

"type": "module",

ES Modulesを使用する場合は、Node.jsにその情報を伝える必要があります。

そのために、package.jsonに"type": "module"を追加します。

このフィールドを指定することで、Node.jsがこのプロジェクトでES Modulesを使用することを認識し、

importやexportを正しく解釈できるようになります。

nuxt/test-utils/playwrightを使用したテスト生成方法

変更前 (playwright/testモジュールを使用)

import { expect, test } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('/')
  await waitForLoadstate('load')
  await expect(page.getByRole('heading')).toHaveText('Welcome to Playwright!')
})

変更後 (nuxt/test-utils/playwrightを使用)

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