前回は自動化テストを行うために、XPathやCSSセレクタの基礎について学習しました。
◾️参考記事
【自動化テスト入門①】Katalonで学ぶCSSセレクタ基本編
しかし、実際に自動化テストを練習するためには、テスト対象となるWebアプリケーションが必要です。そこで今回は、Next.jsを使用してテスト用プロジェクトを作成し、GitHubとの連携まで行っていきます。
- Next.jsプロジェクト作成方法
- GitHubとプロジェクト連携方法
- 自動化テスト用ページの準備方法
Next.jsプロジェクトを作成する
今回は以下の構成でプロジェクトを作成しました。
- Next.js
- TypeScript
- Tailwind CSS
- App Router
- srcディレクトリ構成
プロジェクト作成の前に、まずプロジェクトを管理するためのフォルダを用意します。
例：
Documents
└─ GitHubVS Codeからプロジェクトを作成する
VSCodeを開き、ターミナルから対象フォルダへ移動します。
cd ~/Documents/GitHub
以下のコマンドでプロジェクトを作成します。
npx create-next-app@latest katalon-practice
作成時には以下のように選択しました。
✔ TypeScript → Yes
✔ ESLint → Yes
✔ Tailwind CSS → Yes
✔ src/ directory → Yes
✔ App Router → Yes
✔ Turbopack → Yes
✔ import alias → No
プロジェクト作成後は対象フォルダへ移動します。
cd katalon-practice
開発サーバーを起動します。
npm run dev
ブラウザで以下のURLへアクセスし、初期画面が表示されれば成功です。
http://localhost:3000
GitHubリポジトリを作成する
続いてGitHubで新しいリポジトリを作成します。
今回は以下の名前で作成しました。
katalon-practice
リポジトリ作成後、ローカルプロジェクトとGitHubを連携します。
まずは初回コミットを作成します。
git add .
git commit -m "Initial project setup"
続いてGitHubリポジトリを接続します。
git remote add origin リポジトリURL
最後にPushを実行します。
git push -u origin main
これでGitHubとの連携は完了です。
テスト用ページを作成する
今回はWebアプリケーション開発そのものが目的ではなく、Katalon Studioの学習環境を用意することが目的です。そのため、テスト対象となる画面の実装にはAIを活用し、自動化テストで利用しやすい構成のサンプルページを作成しました。
ログイン画面やサイドメニュー、一覧画面など、自動化テストで利用しやすい画面を中心に作成しています。
今回のサンプルページには以下の機能を用意しています。
- ログイン画面
- サイドメニュー
- 一覧画面
- 検索機能
- フォーム入力
実際の業務アプリケーションを再現することよりも、自動化テストの練習を行いやすいことを重視しています。
ソースコード
今回作成したサンプルコードはGitHubで公開しています。同じ環境で学習したい方や、自動化テストの練習用ページが必要な方はぜひご活用ください。
※学習用に作成したサンプルプロジェクトのため、自由にForkやCloneしてご利用いただいて問題ありません。
※内容は更新される場合があります。
◾️GitHub Repository
まとめ
今回は自動化テストの練習環境として、Next.jsプロジェクトの作成からGitHub連携までを行いました。
次回はKatalon Studioを使用して、実際にログイン処理の自動化テストを作成していきたいと思います。
