E2E（CodeceptJS）について

Zennに参上

Zennでは初めまして。
ケニーと申します！

何について触れてみようか

さて、私は現在品質チームに所属しており、日々サービスの品質向上に全力を注いでおります。

その中で、個人的にはテストについて非常に重要視しています。
テストを行う主なの理由はユーザーの要求を満たせているか。を確認する為だと思います。
不具合やデグレがないか等、非常に重要且つ、欠かせない事だと思います。

そこで、今回はテストに慣れていない方も含めて、個人的にとっつきやすいと思う「CodeceptJS」を使ったE2Eテストについて軽く触れてみたいと思います。

E2Eとは

End to Endの略で、エンドユーザー側の視点で想定通りに動作・機能するかを検証する手法です。
どういった動き・検証をするのかは、まずは、以下GIFをみてみましょう。

実行例：Googleを開いて、「コラボフロー」で検索し、コラボフローのHPを開けるかの検証

E2E（CodeceptJS）の大枠実行手順について

１）CodeceptJSをインストールします
　　E2Eテストフレームワークをインストールします
２）テストコードをかく
　　CodeceptJSで実際にコードをかきます
３）実行する
　　実行して、成功するか確認します

一度やってみましょう

前提

• Node.js(v16.14.2）
• CodeceptJS（v3.3.7）

１）nodeをインストールする

既に入っているかの確認は、コマンドプロンプトで node-v
入っていない場合：こちら からダウンロード

２）CodeceptJSをインストールする

適当なディレクトリで以下実行します
npx create-codeceptjs .　※最後のスペース+ドットも必要
npx codeceptjs init　で設定します
⇒各問いに対して答えていきますが、以下2ヵ所だけ注意です。
　Where are your tests located?　⇒./tests/*_test.js
　Do you want localization for tests? 　⇒ja-JP

３）テストコードをかく

今回は、testsのフォルダを直下に作成し、その中で、google_test.jsファイルを作成します
コードは以下をとりあえずコピペします。

google_test.js

Feature('はじめてのCodeceptJS');
Scenario('Googleを開いて、コラボフローのHPにたどり着けるかチェェェック!', async ({ I }) => {
 I.amOnPage('https://www.google.com');
 I.fillField('検索', 'コラボフロー');
 I.pressKey('Enter');
 I.wait(2);
 I.click('ワークフローはコラボフロー');
 I.wait(3);
});

CodeceptJSの個人的に感じる一番のメリットは、
上記のとおり、簡単にテストをかくことができ、どんなテストをしているのかも、
なんとなく分かってもらえるところじゃないかと思います。

＜ざっくり解説＞

Feature⇒　大見出し
Scenario⇒　テスト詳細の目次
amOnPage⇒　ブラウザでウェブページを開くメソッド
fillField⇒　テキストフィールドに値を入力するメソッド
　　　　　　　第一引数：入力対象の要素を指定
　　　　　　　要素が分からない場合、idやclassで指定も可！（すごい！）
　　　　　　　第二引数：入力する文字列を指定
click⇒　要素をクリックするメソッド
その他は公式参照 ください。

４）実行する

以下で実行してみましょう
npx codeceptjs run --steps　 ※--steps　：　処理状況を表示できる
以下画面キャプチャのように結果が出ればOK！

終わりに

思った以上にシンプルで書きやすいと感じてもらえるかと思います。
ただし、UI変更や機能変更の影響で、正常に機能しなくなる可能性も十分にあり得る為、注意が必要です。
⇒壊れてもメンテに手間のかからないテストを書くことが重要！

只今、絶賛スキルアップ中ですので、次回も乞うご期待ください！♪