はじめに

SAKURUGのTokiです。

本記事ではPlaywrightを使用したE2Eテスト生成についてご紹介します。

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

基本編

1.環境構築

2.テスト生成 (本記事)

3.テスト実行

4.テスト結果確認

応用編

5.Basic認証

6.Cookie認証

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

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

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

PlaywrightでE2Eテストの生成方法を知りたい方

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

紹介すること : Playwrightのジェネレーターツールを使用したテスト生成

紹介しないこと : Playwrightの詳細(第一回でご紹介しています)

動作環境

テスト生成方法

手順

1.Playwrightのインストール

まず、Playwrightをインストールします。

npm install -D @playwright/test

2.サーバ起動

以下のコマンドを実行してサーバを起動します。

npm run dev

3.Codegen(Playwrightテスト生成ツール)の起動

以下のコマンドを実行してCodegenを起動します。

npx playwright codegen <テストしたいURL>

4.操作の記録

起動したブラウザでテストしたい操作を実行します。 操作が記録され、その内容が自動的にテストコードとして生成されます。 【playwright inspectorウィンドウ】にテストコードが生成されます

　①.テストコードのコピー

　②.レコードボタンを押してテスト生成を終了します。

　※ウィンドウが削除されるので、テストコードは事前にコピーしてください

　③.testファイルにペースト

5.生成されたコードの確認

記録が終了したら、生成されたテストコードを確認し、必要に応じて修正します。

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

test('test', async ({ page }) => {
  await page.goto('http://localhost:3000/');
});

テスト実行方法

Playwrightにはテスト実行方法が２種類あります。

詳細は第三回でご紹介します！

UIモード

npx playwright test　--ui

コマンド

npx playwright test

まとめ

本記事では、Nuxt3環境でPlaywrightによるE2Eテストの生成方法について解説しました。

前回の第一回では、Playwrightの環境構築をご紹介しています。

次回、第三回ではPlaywrightのテスト実行方法を2種類に分けてご紹介します。

この記事を読んでいただきありがとうございます！

是非、他の記事も閲覧頂けますと幸いです。

基本編

1.環境構築

2.テスト生成 (本記事)

3.テスト実行

4.テスト結果確認

応用編

5.Basic認証

6.Cookie認証

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

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