# はじめに
E2Eテストについて学んだので、備忘録程度に書いていきます。

# E2Eテストとは
E2Eテスト（エンドツーエンドテスト）とは、システム全体をユーザーの視点からテストし、期待通りの動作をしているかどうかを確認する手法です。
E2Eテストでは、ネットワーク接続やWebサービス、データベース接続、その他のアプリケーションや依存関係など、さまざまなサブシステムが連携して正しく動作しているかどうかを検証します。﻿

https://aslead.nri.co.jp/ownedmedia/development/productivityimprovement-002/#entry-outline_4

# E2Eテストを自動化するメリット
・**テスト時間の削減**
E2Eテストは、手動で行うにはかなりの時間と労力がかかるテスト手法です。
大規模なアプリケーションの場合、E2Eテストを実行するだけで数日またはそれ以上の時間がかかるケースもあるため、自動化を行うことは、テストにかかる時間を大幅に削減できるうえに、夜間や週末などの非稼働時間にもテストを実行できるため、リリースサイクルの短縮に繋がります。

・**繰り返し実行できる**
自動化されたE2Eテストは、同じテストケースを何度でも簡単に繰り返し実行することができるため、アプリケーションリリース前のE2Eテストだけでなく、新しいコードの追加や変更が既存の機能に影響を与えて発生する回帰エラーの検出も可能です。
特に、継続的インテグレーション（CI）環境では、コードがコミットされるたびに自動テストが実行されるため、回帰テストを自動化することができます。

・**テスト結果の安定化**
人間が行う手動テストでは、実行者によるばらつきや人為的なミスが発生する可能性がありますが、自動化されたテストではそのようなリスクがありません。
その結果、テスト結果の信頼性が向上し、バグの発見と修正が効率的に行えます。

# Playwrightについて
Playwright は、モダンなWebアプリケーションのテスト自動化やブラウザ操作を行うためのオープンソースのフレームワークです。
Microsoftによって開発され、主にエンドツーエンド（E2E）テストのために使用されますが、ブラウザの操作自体を自動化するため、Webスクレイピングやインタラクションのテストにも利用されます。
Chromium、WebKit、Firefoxを含むすべての最新のレンダリングエンジンをサポートしています。

https://playwright.dev/docs/intro

# インストール
今回は、以下のNext.jsのプロジェクトにインストールしていこうと思います。
![スクリーンショット 2024-11-17 14.21.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/16ba534b-2ab8-0f7f-92a4-099dd01a88aa.png)

以下のコマンドでインストールを行います。

・npm
![img](/mosaic-code.jpg)
・yarn
![img](/mosaic-code.jpg)
・pnpm
![img](/mosaic-code.jpg)

コマンドを実行すると、質問されるので答えていきます。
![img](/mosaic-code.jpg)

インストールが完了すると、以下のように自動でフォルダとファイルが作成されます。

![スクリーンショット 2024-11-17 14.23.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/0c96e209-63b5-f07e-a01a-8068507b0bd4.png)

# Playwright Test for VSCodeをインストール
以下の「Playwright Test for VSCode」というVSCodeの拡張機能をインストールします。
![スクリーンショット 2024-11-17 14.30.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/91c4aa8d-0e42-493d-f31e-242ab3caf192.png)

この拡張機能を使うと、ローカルで立ち上げた画面上で、アプリケーションの操作を行うと、その操作に沿ったテストコードを作成してくれる便利なものです。

# テストコードの生成
テストコードの生成をしていきます。
## テストケース
今回は、以下のテストケースを作成したいと思います。
①フォームに「test」と入力する。
②ボタンをクリックする。
③demoページへのリンクをクリックし、ページ遷移する。

![img](/mosaic-code.jpg)

![スクリーンショット 2024-11-17 14.46.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/813fdbcb-365c-bddc-6c5a-a3eb293109a4.png)


## 生成手順
①ローカルでサーバーを立ち上げる。
「http://localhost:3000」でローカルサーバーを立ち上げます。

②VSCodeのテストタブから、E2Eテストのレコードを開始する。
以下のVSCodeのサイドバーのテストのタブから、「Record new」をクリックし、レコードを開始する。
![スクリーンショット 2024-11-17 14.49.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/0e4d932e-1ecb-8da0-864a-3d92990cffd1.png)

すると、以下のようにブラウザが自動で立ち上がりますので、http://localhost:3000
をURLバーに入力し、アプリケーションのページにアクセスします。
![スクリーンショット 2024-11-17 14.50.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/2bae2b75-19c8-d2e1-6e40-2bce72acff64.png)
↓
![スクリーンショット 2024-11-17 14.51.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/df3cbb45-c56d-d75d-6cf8-d49dce6877ac.png)

③テストケースに沿って画面を操作
テストケースに沿って画面を操作し、完了後は、以下のボタンをクリックして終了します。

![スクリーンショット 2024-11-17 14.53.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/98b8296f-c92a-561e-a9a2-74338a4e36b8.png)

すると、以下のようにテストファイルとテストコードが自動で生成されます。
![スクリーンショット 2024-11-17 14.55.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/abf1b49a-01e1-f7a0-11ab-6877d408f068.png)

# テスト実行
最後に、自動で生成されたテストを実行していきたいと思います。
ルート階層で、以下のコマンドを実行します。
![img](/mosaic-code.jpg)
成功すると、以下のように表示されます。
![スクリーンショット 2024-11-17 15.00.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/51c82aa2-f600-b232-c2c0-a06dd4adbc21.png)

# まとめ
今回はPlaywriteを使ったE2Eテストについて備忘録程度に書いていきました。
もっと踏み込んだ内容などについては、追記していこうと思います。

# 最後に
他にも色々な記事を書いているので、よければ読んでいってください！

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

# はじめに
E2Eテストについて学んだので、備忘録程度に書いていきます。

# E2Eテストとは
E2Eテスト（エンドツーエンドテスト）とは、システム全体をユーザーの視点からテストし、期待通りの動作をしているかどうかを確認する手法です。
E2Eテストでは、ネットワーク接続やWebサービス、データベース接続、その他のアプリケーションや依存関係など、さまざまなサブシステムが連携して正しく動作しているかどうかを検証します。﻿

https://aslead.nri.co.jp/ownedmedia/development/productivityimprovement-002/#entry-outline_4

# E2Eテストを自動化するメリット
・**テスト時間の削減**
E2Eテストは、手動で行うにはかなりの時間と労力がかかるテスト手法です。
大規模なアプリケーションの場合、E2Eテストを実行するだけで数日またはそれ以上の時間がかかるケースもあるため、自動化を行うことは、テストにかかる時間を大幅に削減できるうえに、夜間や週末などの非稼働時間にもテストを実行できるため、リリースサイクルの短縮に繋がります。

・**繰り返し実行できる**
自動化されたE2Eテストは、同じテストケースを何度でも簡単に繰り返し実行することができるため、アプリケーションリリース前のE2Eテストだけでなく、新しいコードの追加や変更が既存の機能に影響を与えて発生する回帰エラーの検出も可能です。
特に、継続的インテグレーション（CI）環境では、コードがコミットされるたびに自動テストが実行されるため、回帰テストを自動化することができます。

・**テスト結果の安定化**
人間が行う手動テストでは、実行者によるばらつきや人為的なミスが発生する可能性がありますが、自動化されたテストではそのようなリスクがありません。
その結果、テスト結果の信頼性が向上し、バグの発見と修正が効率的に行えます。

# Playwrightについて
Playwright は、モダンなWebアプリケーションのテスト自動化やブラウザ操作を行うためのオープンソースのフレームワークです。
Microsoftによって開発され、主にエンドツーエンド（E2E）テストのために使用されますが、ブラウザの操作自体を自動化するため、Webスクレイピングやインタラクションのテストにも利用されます。
Chromium、WebKit、Firefoxを含むすべての最新のレンダリングエンジンをサポートしています。

https://playwright.dev/docs/intro

# インストール
今回は、以下のNext.jsのプロジェクトにインストールしていこうと思います。
![スクリーンショット 2024-11-17 14.21.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/16ba534b-2ab8-0f7f-92a4-099dd01a88aa.png)

以下のコマンドでインストールを行います。

・npm
``` npm
npm init playwright@latest
```
・yarn
``` yarn
yarn create playwright
```
・pnpm
``` pnpm
pnpm create playwright
```

コマンドを実行すると、質問されるので答えていきます。
```
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
```

インストールが完了すると、以下のように自動でフォルダとファイルが作成されます。

![スクリーンショット 2024-11-17 14.23.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/0c96e209-63b5-f07e-a01a-8068507b0bd4.png)

# Playwright Test for VSCodeをインストール
以下の「Playwright Test for VSCode」というVSCodeの拡張機能をインストールします。
![スクリーンショット 2024-11-17 14.30.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/91c4aa8d-0e42-493d-f31e-242ab3caf192.png)

この拡張機能を使うと、ローカルで立ち上げた画面上で、アプリケーションの操作を行うと、その操作に沿ったテストコードを作成してくれる便利なものです。

# テストコードの生成
テストコードの生成をしていきます。
## テストケース
今回は、以下のテストケースを作成したいと思います。
①フォームに「test」と入力する。
②ボタンをクリックする。
③demoページへのリンクをクリックし、ページ遷移する。

``` page.tsx
import Link from "next/link";

export default async function Page() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
      <input
        className="w-full max-w-sm p-3 mb-6 border-2 border-gray-300 rounded-lg text-lg focus:outline-none focus:border-green-500"
        type="text"
        placeholder="Enter text here"
      />
      <button className="px-6 py-3 text-white bg-blue-500 rounded-lg text-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-300">
        Click me
      </button>
      <Link
        href="/demo"
        className="mt-6 text-lg text-blue-500 hover:text-blue-700"
      >
        Go to Demo
      </Link>
    </div>
  );
}
```

![スクリーンショット 2024-11-17 14.46.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/813fdbcb-365c-bddc-6c5a-a3eb293109a4.png)


## 生成手順
①ローカルでサーバーを立ち上げる。
「http://localhost:3000」でローカルサーバーを立ち上げます。

②VSCodeのテストタブから、E2Eテストのレコードを開始する。
以下のVSCodeのサイドバーのテストのタブから、「Record new」をクリックし、レコードを開始する。
![スクリーンショット 2024-11-17 14.49.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/0e4d932e-1ecb-8da0-864a-3d92990cffd1.png)

すると、以下のようにブラウザが自動で立ち上がりますので、http://localhost:3000
をURLバーに入力し、アプリケーションのページにアクセスします。
![スクリーンショット 2024-11-17 14.50.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/2bae2b75-19c8-d2e1-6e40-2bce72acff64.png)
↓
![スクリーンショット 2024-11-17 14.51.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/df3cbb45-c56d-d75d-6cf8-d49dce6877ac.png)

③テストケースに沿って画面を操作
テストケースに沿って画面を操作し、完了後は、以下のボタンをクリックして終了します。

![スクリーンショット 2024-11-17 14.53.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/98b8296f-c92a-561e-a9a2-74338a4e36b8.png)

すると、以下のようにテストファイルとテストコードが自動で生成されます。
![スクリーンショット 2024-11-17 14.55.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/abf1b49a-01e1-f7a0-11ab-6877d408f068.png)

# テスト実行
最後に、自動で生成されたテストを実行していきたいと思います。
ルート階層で、以下のコマンドを実行します。
```
npx playwright test tests/test-1.spec.ts
```
成功すると、以下のように表示されます。
![スクリーンショット 2024-11-17 15.00.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/51c82aa2-f600-b232-c2c0-a06dd4adbc21.png)

# まとめ
今回はPlaywriteを使ったE2Eテストについて備忘録程度に書いていきました。
もっと踏み込んだ内容などについては、追記していこうと思います。

# 最後に
他にも色々な記事を書いているので、よければ読んでいってください！

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

E2Eテストとは

続きを読むには単価診断を受けてください（30秒）