はじめに

SAKURUGのTokiです。

本記事ではPlaywrightのテスト実行方法について２種類ご紹介します！

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

基本編

1.環境構築

2.テスト生成

3.テスト実行 (本記事)

4.テスト結果確認

応用編

5.Basic認証

6.Cookie認証

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

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

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

• Playwrightのテスト実行方法を知りたい方
• ２種類の実行方法の違いを知りたい方

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

紹介すること : Playwrightのテスト実行方法

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

動作環境

テスト実行方法

UIモード

Playwright公式ドキュメント_test-ui-mode

npx playwright test --ui

UIモードでは下記の単位でテストを実行できる

• 全テストファイル
• 単一のテストファイル
• 単一のテストグループ
• 単一のテスト

• フィルタリングテスト

• タイムラインビュー

• テスト生成

左のアクションタブをオンにすることで、テスト生成を行える

• 検証ツールの使用

右クリック→検証→新規検証ウィンドウが作成される

chromeを使用されている場合は、青色のアイコンで検証ウィンドウが生成されます。

コマンド

npx playwright test　<テストファイル名>

下記のようにテスト結果が表示されます。

テスト結果確認

UIモード

UIツールのテスト実行ファイルにチェックマークがつけばパスが通っている

コマンド

npx playwright show-report

別ウィンドウが開き、確認できる

1. [ブラウザ]New Todo › should allow me to add todo items をクリックする。

2. [ブラウザ]サイト下部にvideosが追加したことを確認する。

補足

参考文献や公式ページへのリンク

• Playwright公式ドキュメント
• PlaywrightGitHubリポジトリ

まとめ

本記事では、Nuxt3環境でPlaywrightによるE2Eテストの2種類のテスト実行方法についてご紹介しました。

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

基本編

1.環境構築

2.テスト生成

3.テスト実行 (本記事)

4.テスト結果確認

応用編

5.Basic認証

6.Cookie認証

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

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

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