こんにちは、”はふぃ”です。

E2Eテストという言葉をご存知でしょうか?

E2Eテストとは、End to Endの略でその名の通りWEBサイトやアプリケーションの「開始から終了まで」をテストするものです。

例えば、あるコマースサイトで「商品を購入するまで」のE2Eテストを行う場合には、ユーザーが商品を購入するまでに

  1. サイトにアクセス
  2. 商品を探す
  3. 購入ボタンを押す
  4. 決済が実行される
  5. 購入完了画面が表示される

などのステップがあると思いますが、ブラウザでの遷移やボタンを押すなどの挙動を自動で行い、ユーザーが「商品を購入するまで」の手順が正常に動作しているかをチェックするものです。

WEBサイトやアプリケーションの改修を行うと予期しない部分に影響し、不具合を起こしてしまうことが多々あります。

チームで開発していればコードレビューなどで確認していると思いますが、人手での確認は必ず漏れが出ます

そんな時にE2Eテストを実装しておくと、E2Eテストの対象のユーザー体験は担保されているため、上記のような場合にも異常に気が付きやすくなります

では、そんなE2Eテストを今回は CodeceptJS × Puppeteer という構成で実装してみたいと思います。

CodeceptJS とは?

CodeceptJSはいろんなブラウザ操作ライブラリのラッパーです。

ブラウザ操作ライブラリにも色々ありますが、CodeceptJS は WebDriverIO や後述する Puppeteer などのライブラリを使うことでブラウザの操作を実現しています。

それなら「ブラウザ操作ライブラリをそのまま使えばいいのでは?」と思うかもしれませんが、 CodeceptJSには以下のようなメリットがあります。

  • 以下のように文章のようなコードの書き方をするので、エンジニア以外の人でもなんとなく内容を理解することができる
I.amOnPage('https://hafilog.com/')
I.fillField('キーワードを入力', 'hafilog')
I.pressKey('Enter')
I.see('This is HAFILOG')
  • 標準で DIコンテナ が備わっている
  • プラグイン が作りやすい

Puppeteer とは?

Puppeteer はヘッドレス(GUIを操作することなく)でプログラムからブラウザ(Chrome)を操作することができる Node.js 制のライブラリです。

簡単に言うと、みなさんが Chrome を使ってインターネットをみる時にボタンをクリックしたり、リンクから他のページに移ったりすると思います。Puppeteer を使うと、それをプログラム上から行うことができるのです!

Puppeteer は今回のようなE2Eテストの他に、スクレイピング(WEBサイトの情報を収集する行為)などに利用されることが多いです。

CodeceptJS × Puppeteer の使い方

ここからは実際にプログラムを作成しながら使い方について説明していきます。

※ 以下のサンプルは Git にまとめてあるので参考にしてみてください!

環境構築

まず npm を用いて CodeceptJS と Puppeteer をインストールします。

$ npm i codeceptjs puppeteer

続いて initコマンド を実行してテンプレートを作成します。

$ node node_modules/.bin/codeceptjs init

項目に答えて設定していくのでお好みで設定してください。

  • Where are your tests located?
    • testファイルをどこに置くかの設定
    • デフォルトだとファイル名の末尾が _test.js となっているファイルをテストファイルと認識します
  • What helpers do you want to use? (Use arrow keys)
    • 今回は Puppeteer を選択しましょう
  • Where should logs, screenshots, and reports to be stored? (./output)
    • CodeceptJSでログの出力やスクリーンショットを撮影することができるのですが、そのファイルをどこに出力するかの設定
  • Would you like to extend the “I” object with custom steps?
    • CodeceptJS では “I” というオブジェクトをユーザーとして定義するのですが、そのユーザーオブジェクトをカスタマイズするかどうか?
  • Do you want to choose localization for tests? (Use arrow keys)
    • E2Eテストの地域設定
  • [Puppeteer] Base url of site to be tested (http://localhost)
    • Puppeteer でE2Eテストを行う対象のサイトURL

設定ファイルの作成に成功したら試しにテストファイルを作成してみましょう。

以下のコマンドを実行した後にファイル名を入れるとテストファイルが作成されます。

$ node node_modules/.bin/codeceptjs gt

< init_test.js >

Feature('Init test.js');

Scenario('test something', (I) => {

});

上記のファイルの Scenario の中にE2Eテストで実行したい内容を記載し、以下のコマンドを実行することでE2Eテストを実行できます。

$ node node_modules/.bin/codeceptjs run --steps

サイトへアクセス

対象のサイトへアクセス( I.amOnPage )し、特定の文字列が表示されているかをチェック( I.see )することでサイトが正常に表示されているかどうかのE2Eテストを行います。

< init_test.js >

Feature('Init test.js');

Scenario('サイトへアクセス', (I) => {
  I.amOnPage('https://hafilog.com/');
  I.see('HAFILOG');
});

このサイト(https://hafilog.com/)へアクセスし、HAFILOGという文字が表示されているかどうかをチェックしています。

上記で紹介したE2Eテストコマンドを実行し、以下のようにOKが表示されれば成功です!

サイトへログイン

ログイン機能のあるサイトでログインを行うには

  1. ログインボタンなどを押下
  2. ログインページへ遷移
  3. IDとパスワードを入力
  4. ログインボタンを押下

といった手順で操作を行うことが一般的だと思います。

そこで

  • ボタンをクリックする → I.click
  • フォームに値を入力する → I.fillField

を追加で利用しながら GitHub のサイトにログインするE2Eテストを実行してみます。

(今回は処理簡略化のため、ログインページにアクセスした状態からスタートします)

< init_test.js >

…

Scenario('GitHubにログイン', (I) => {
  const username = process.env.E2E_USERNAME;
  const password = process.env.E2E_PASSWORD;
  if (!username || !password) throw new Error('環境変数にE2E_USERNAMEかE2E_PASSWORD、または両方が設定されていません')

  I.amOnPage('https://github.com/login');
  I.see('Sign in to GitHub', 'h1');
  I.fillField('Username or email address', username);
  I.fillField('Password', password);
  I.click('Sign in');
  I.dontSee('Incorrect username or password.', '.flash-error');
});

順を追って説明していきます。

まず、 GitHubのログインには username と password が必要なのですが、これらをコードに直接記入してしまうと今回のように GitHub にコードを公開する場合などに情報が漏洩してしまうので、今回は環境変数に設定した値を用います。

そのため、E2Eテストを実行する前に

$ export E2E_USERNAME=[GitHubのusername]
$ export E2E_PASSWORD=[GitHubのpassword]

を実行して環境変数を設定しておきましょう。

(設定していないと以下のようにE2Eテスト実行時にエラーが表示されます)

環境変数が取得できたらE2Eテストを行なっていきます。

I.amOnPage('https://github.com/login');
I.see('Sign in to GitHub', 'h1');

先ほども利用したこれらの処理を使ってログインページにアクセスし、アクセスできたことを確認します。

I.fillField('Username or email address', username);
I.fillField('Password', password);

続いてこれらの処理によって Username or email address と書かれたフォームに username を、 Password と書かれたフォームに password をそれぞれ入力します。

I.click('Sign in');
I.dontSee('Incorrect username or password.', '.flash-error');

最後に Sign in ボタンをクリックし、ログインに失敗した時に表示されるエラーが表示されていないことを確認したらログイン処理のE2Eテストの成功です。

I.dontSee : 対象が表示されていない場合に成功(I.see の否定版)

なお、最後のログインが成功したかどうかを確認する部分に関して、以下のような実装でもチェック可能です。

I.click('Sign in');
I.waitUrlEquals('https://github.com/');

I.waitUrlEquals は対象のサイトへの遷移を待つ処理なので、これを用いて Sign in ボタンを押下後に https://github.com/ へ遷移したら成功とみなすことで判断が可能です。

まとめ

今回は初歩的な処理しか触れませんでしたが、他にも色々なメソッドがCodeceptJS には用意されているので、以下のドキュメントなどを参考に自分が実現したいE2Eテストを実装してみてください。

https://codecept.io/acceptance

投稿者: はふぃ

若手のWEBフロントエンジニア。最近はバレーボールにハマってます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA