はじめに

SAKURUGのTokiです。

本記事ではPlaywrightのテスト結果確認方法についてステップバイステップでご紹介します！

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

基本編

1.環境構築

2.テスト生成

3.テスト実行

4.テスト結果確認 (本記事)

応用編

5.Basic認証

6.Cookie認証

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

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

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

Playwrightのテスト結果の確認方法を知りたい方

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

紹介すること : Playwrightのテスト結果確認方法

紹介しないこと : Playwrightの環境構築・テスト生成・テスト実行方法

動作環境

テスト結果確認方法

PlaywrightではUIモードとコマンドの2種類の確認方法があります。

①UIモード

1.テストツールの立ち上げ

npx playwright test --ui

2.実行したいテストの▷マークをクリックして、テスト実行

3.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)に対応した待機処理

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