はじめに

SAKURUGのTokiです。

今回からPlaywrightの基礎４編、応用４編の総８編で細かくご紹介していきます！

ご参考になれば幸いです。

本記事ではNuxt3環境におけるE2EテストをPlaywrightを用いて行います。

基本編

1.環境構築 (本記事)

2.テスト生成

3.テスト実行

4.テスト結果確認

応用編

5.Basic認証

6.Cookie認証

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

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

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

Playwrightの【導入方法】/【特徴】を知りたい方

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

紹介すること : Playwrightの導入・テスト生成・テスト実行方法・Playwrightの特徴

紹介しないこと : Playwrightの応用的なテスト生成・応用的な実行方法

動作環境

サービスの特徴

他の類似サービスとの比較

今回はNuxt3環境でE2Eテストを行う為、特に自動待機機能が優れているPlaywrightを使用しています。

PlaywrightにはSSRに対応した待機処理を行うことができます。

関連サービスの紹介

• Selenium公式サイト

サービスの導入方法

1.Node.jsのインストール

• PlaywrightはNode.jsベースで動作するため、まずNode.jsをインストールします。
• Node.jsの公式サイトからダウンロードしてインストールします

2.Playwrightのインストール

ターミナルまたはコマンドプロンプトで以下のコマンドを実行してPlaywrightをインストールします。

npm install -D @playwright/test

3.初期設定

プロジェクトディレクトリで以下のコマンドを実行してPlaywrightを初期化します。

npx playwright install

4.テストの作成

以下のように基本的なテストを作成します。

詳しくは第2回にてご紹介してます。

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

test('basic test', async ({ page }) => {
  await page.goto('<https://example.com>');
  const title = await page.title();
  expect(title).toBe('Example Domain');
});

5.テストの実行

Playwrightには2つの実行方法があります。

詳しくは第3回にてご紹介してます。

①コマンド

npx playwright test

②UIモード

npx playwright test --ui

補足

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

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

まとめ

本記事では、Nuxt3環境でPlaywrightによるE2Eテストの環境構築についてご紹介いたしました。

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

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

基本編

1.環境構築 (本記事)

2.テスト生成

3.テスト実行

4.テスト結果確認

応用編

5.Basic認証

6.Cookie認証

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

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