【個人開発】Nuxt.js+Railsで、Web上でチームで同時に操作できる、手動統合テスト記録ツール「Itamaster」β版を開発しました！

現在システムはベータ版です。
アクセス時、利用できない機能、未実装の機能が存在することがあります。
DBはベータテスト終了時に初期化予定ですので、重要なデータは入力をお控えください。

運営者ギルドというorganizationに所属しております。
ギルドの方々には大変助けていただきました。この場を借りてお礼申し上げます。
これからも開発・運営を続けていきますので、改めて宜しくお願い致します。
機能の追加、バグの修正、ベータ版の終了や、アルファ版リリースについてはtwitterで発信致します。
↓
https://twitter.com/Itamaster_

サイトの概要

Itamasterは、Web上で統合テストを設計、管理し、直感的な操作で実行が可能なサービスです。

テストには前提条件、手順、期待する結果を複数登録でき、実行ログは全てサーバーに保存されます。
チームには他のユーザーを招待し、複数人で同時にテストの管理、実行が可能です。

また、システムはテスト結果を複数の選択肢からテンプレートを選択し、Excelへの出力が可能です。
Excelを編集する際のCPUへの負荷と、作業時のストレスを無くすことが出来ます。

言語切り替え機能が実装されています。
英語と日本語によってシステムを利用可能です。

App Link↓
https://itamaster.work

使用技術

• npm 7.6.3
• nuxtjs 2.15.3 (SPA モード)
• @nuxtjs/storybook 4.0.2
• vuetify (@nuxtjs/vuetify 1.12.1)
• ruby 2.6.8
• Ruby on Rails 6.1.4 (APIモード)
• EC2(t2.small)
  • ALB
  • ACM
• RDS (mysql)
• Route53
• nginx

※技術面についての詳細は、後日また記事を投稿させていただきますので、フォローをよろしくお願いします。

Itamasterの使い方

ユーザー登録・ログイン

下がトップ画面になります。
Itamasterはログイン/ユーザー登録をしなければ利用が出来ないので、まずはユーザーを作成します

ヘッダー部ないし、画面上の「SIGN UP」ボタン(日本語版の場合、アカウント登録ボタン)をクリックしてください。ユーザー登録画面に遷移します。

ユーザー登録の際は、まずプライバシーポリシーに同意していただく必要があります。同意し、送信してください。
（モーダル上部の「↑↓LANG」ボタンをクリックすると、言語をEn ⇔ Jp で切り替えることが出来ます。）

ユーザー登録の際は、以下を入力します。（後から変更できます）

• 表示名
• メールアドレス
• パスワード
  全てがバリデーションを通過した時、初めて「SIGN UP」ボタンが有効になります。
  

チームの管理

ユーザー登録/ログインが正常に成功した場合、「チーム管理画面」にページ遷移します。

この画面では、自分が所属しているチームを一覧表示できます。
チームの情報を表示しているカードの右下部に、クリック可能なアクションボタンが表示されます。
それぞれ左から順番に、
・Informationボタン
・Editボタン
・チームメンバー管理ボタン
です。
Editボタンとチームメンバー管理ボタンは、チームの管理者以外はクリックできません。

Informationボタン

チームの情報ダイアログが表示されます。

少し余談にはなりますが、全画面で使われているユーザーのほとんどのアイコンは、クリックすることで、ユーザーの情報を表示可能です。

「PROFILE」ボタンをクリックすると、該当のユーザーのプロフィールページに遷移します。

Editボタン

チームの情報を編集/削除可能なダイアログが表示されます。

チームのIDはユニークです。
英数字を使い、システムで唯一の文字列を入力できます。（テキストボックス横の更新ボタンをクリックすることで、ユニークであるかのチェックが可能です。ユニークである場合のみ情報を登録できます。）

チームメンバー管理ボタン

チームメンバーの情報を一覧表示し、管理するための画面へとページ遷移します。

招待中で、チームに加入していないユーザーのカードは下部のように表示されています。
右下部のボタンをクリックすることで、取り消しをキャンセル/チームからの除外が可能です。
（再度、招待を行う事で、一緒にテストを行う事は可能です。）

招待は、画面を下方向にスクロールした先の「＋」アイコンボタンから行えます。
招待したい相手のメールアドレスを入力し、
「合言葉」を設定することで、招待したい相手に通知を飛ばします。

プロジェクトの管理、テストスイートの管理

チームは、複数のプロジェクトを作成できます。
プロジェクトは、複数のテストスイートを保持します。
（チームのInformationダイアログや、カードからプロジェクトの一覧画面にページ遷移することが可能です。）

まず、プロジェクトの一覧画面では、画面上部の「＋」アイコンボタンからプロジェクトを作成します。
作成したプロジェクトはリストボックスから選択可能です。
プロジェクトをリストボックスから選択した時、プロジェクトの情報と、保持しているテストスイートの一覧テーブルが画面に表示されます。

四色で表示されているプログレスバーでは、プロジェクトに対して登録されているテストケースの合計の件数に対する、
・完了（Complete）
・再テスト（Retest）
・問題（Issue）
・未実行（NotRunning）
のそれぞれの件数を、比率で一目で確認することが出来ます。

また、テストスイートのInformationダイアログから、テストスイート毎のテストケースの状態別件数のプログレスバーを表示可能です。

テストケースの管理

プロジェクトの一覧画面中、テストスイートの一覧テーブルの、
「Actions」列、左端のOpenアイコンボタンをクリックすると、
・テストを実行する
・テストを管理する
のオプションが選択できます。

「テストを管理する」旨のボタンをクリックした時、
該当のテストスイートに従属するテストケースの管理画面にページ遷移します。

他の画面と同様に、各列の
・Informationボタン
・Editボタン
によってテストケースの情報を変更したり、確認したりすることができます。
テーブル右下の「＋」アイコンボタンによってテストケースを新規に作成できます。

テストケース作成時、以下が入力できます。

• タイトル
• テストの実行担当者
• 詳細（前提とする条件、手順、期待する結果）

テストのログは、画像のInformationダイアログによって確認が可能です。

ログのエリアには、
・実行年月日
・実行者
・理由(再テスト・問題の場合のみ入力可能)
の情報を閲覧可能です。

テストの実行

プロジェクトの一覧画面中、テストスイートの一覧テーブルの、
「Actions」列、左端のボタンから、「テストを管理する」旨のボタンをクリックした時、
該当のテストスイートに従属するテストケースの実行画面にページ遷移します。
実行画面には、ログインユーザーがテスト実行担当者に指定されているテスト項目のみが表示されます。

実行画面は感覚的に、サクサクと操作が出来るように特にこだわった画面の一つです。
テストケースの一つ一つに対して、簡単に結果を入力し、問題点などを入力できます。
結果の入力が完了後は、画面右下の紙飛行機のボタンから確定が可能です。

テストケースの表示部を縮小化することで、
タイトルのみを確認して結果を連続して選択していくことも可能です。

テスト実行結果表のExcel出力

（ベータ版終期に実装）

'2021/08/27.実装されました！

プロジェクト画面より、Excelアイコンをクリックします。

表示されるダイアログから、テンプレートを選択できます。

「テスト実行結果表」を選択した時、テスト実行結果表の概要説明、情報の入力画面が表示されます。

「情報の入力」ステートでは、画像のような情報を事前に入力可能です。
（システム名、チーム名、リーダー名は自動的に入力されています。変更も可能です。）

出力される情報の確認画面です。
「出力」ボタンをクリックした時、Excelが生成され、出力されます。

出力データ↶

ユーザーのプロフィール

アイコンは、画像をアップロードし切り取り範囲を選択できます。

画像を使わない場合は、アイコン上の文字、アイコン色を選択し、登録が可能です。

今後の展望

OSSのテストを全世界のチームメンバーと進行

プライベート設定をパブリックに設定しているチームに限定されますが、
世界中のチームが持っているプロジェクトを、ログイン後のトップ画面でランダムに幾つか表示します。
興味のあるプロジェクトが見つかった場合は、チームの管理者に加入希望を提出し、
世界中のチームメンバーと同時にシステムのテスト工程を行えるようにします。

GitHubでOSSにエンジニアがコントリビュートを行うように、
OSSのテストを世界中のエンジニアと同時に進行し、有志によるベータテストを現在よりも多い人数で、
手順や結果を体系化して一元管理し実行出来るようになります。

Gitリポジトリとの連携

プロジェクトをGitリポジトリに連携することで、Issue,retestによってテストを完了した時、
Gitのリポジトリに対して自動的にIssueチケットを発行します。
remarksを入力していれば、その情報もGitリポジトリに送信し、開発者が問題点を明確に把握できるようにします。

テスト環境の構築手順をMarkDown記法によって記述し公開

プロジェクトに対して、テスト環境構築手順をMarkDown記法によって記述し、
特設ページを設置できるようにします。
リモートワークによって、社内のサーバーにアクセス出来ない時でも簡単にテスト環境を構築できます。

インポート機能、項目のコピー機能の実装

CSV形式でデータをインポートし、プロジェクトを開始しやすくします。
また、テストスイートやテストケースを作成する際、
既存のものと類似したものなら複写し、さらに簡単にテストを管理しやすくします。

テスト進捗ダッシュボードの追加

テスト計画をプロジェクトに対して設定可能にします。
プロジェクトやチームに対して、テスト計画を変更したり、
チームメンバー毎の進捗率、テストケースの消化率、問題の発生確率や、テストの実行回数等、
様々な情報を表やグラフを使って表示可能なダッシュボード画面を追加します。

日本語化

（今秋から今冬までに実装予定です）
現在Itamasterは英語で実装されています。
i18nによって、日本語で操作を可能にします。
2021.8.19
主なボタンやラベル以外に対して、日本語化を実装しました。
今週中に、i18nを利用し、英語表記と日本語表記を切り替え可能にします。

i18nを利用して、英語と日本語の両方に対応しました。
ヘッダー左上部の、「言語」あるいは、「Language」ボタンからご利用いただきたい言語を選択可能です。

各ページ単位の情報再取得機能の実装

（今月中に実装予定）
現在Itamasterは、ログイン時に必要なすべての情報を取得し、
必要な場合も、必要な情報のみを取得。
作成や削除も、成功/失敗のみにレスポンスを受け取る事で高速なレンダリングと通信速度を実現しております。
しかし現在のままでは、ユーザーの任意のタイミングでログイン状態のまま情報を再取得することが出来ません。
（厳格には一部の情報の更新時のみ、同じ属性に従属している情報を取得する、等の機能は存在しております）
よって、任意のタイミングで任意の情報を、ログイン状態のまま再取得が可能なボタンを実装予定です。

全ての情報をログインしたまますべての情報を再取得し、ホーム画面へと移動するボタンをヘッダーに追加しました。
現在のところ高いレスポンス速度を維持しております。
ページ単位での実装も取り急ぎ行います。

テスト結果を元にした、テストサマリー（テスト密度、不具合発生率）の出力

'21/08/25追加しました。
近日実装予定です。

テストケースに対して、重要度のレベルを設定可能にします。

Itamasterにはテストの実行ログが全て保存されています。
テストの実行ログを利用し、重要度別の不具合の発生件数や、プロジェクト毎に、グラフや表を使ってのテストサマリーのExcel出力を可能にします。
（サマリー出力時に総実行ステップ数、テストスイート毎の実行ステップの入力を行います）

• 総実行ステップ数に対するテストの件数
• テストスイート毎でのテスト密度
• テストケースに対するテスト密度
• テストスイート毎での不具合発生率