CodeceptJSとは
Node.jsで動作する、E2Eテスト用のテストフレームワーク。
以下は、「サインイン画面を開いてサインインする」シナリオのテストコードです。
I.amOnPage(`https://sample-system.com/signin`);
I.fillField('id', 'sampleId');
I.fillField('password', 'samplePassword');
I.click('=サインイン');
何かプログラムに日本語が入ってますね。
これは「サインインボタンを押下する」処理を行うコード部なのですが、このclick関数はパラメータに押下したいボタンに表示されている文字列を指定することが出来るんです。
勿論、IDやPasswordのようにname属性での指定等も可能です。
CodeceptJSについての詳細はここでは置いておきますが、とてもコーディングしやすいイメージを持っていただけたのではないでしょうか。
いざ自動化！！！の前に
手でテストするのが大変だ、ということでテスト自動化を検討し始めたのですが、自動化するにあたって幾つかの要望がありました。
それが以下の2点。
- 開発エンジニアがそのままテストコードを書けるよう、新たにスキル習得が必要でないものがいい。
- テスト仕様書とテストコードの二重管理は避けたい（テストコードにテスト仕様書相当の役割を持たせたい）。
1点目については、本体の開発をTypeScriptで行っていたので、「TypeScriptで書けること」が条件となりました。
2点目については、テスト仕様書のレビューアが難無く読める「テストコードの可読性が高いこと」が条件となりました。
これらを踏まえた結果、最初にご紹介したCodeceptJSを用いてテストを自動化することになりました。
自動化してみてどうだった？
結論から言うと、当初の目標達は80%ほど達成することが出来ました。
テストの省力化については、自動化したこともあってクリア。テストコードの書きやすさについても、参加した開発エンジニアがちょっとしたレクチャーのみで実装できるようになったのでクリアとしました。
テストコードの可読性については、開発エンジニア目線では問題無かったのですが、『テスト仕様書のレビューアが難無く読める』というのは十分に達成出来たとは言えませんでした。
更なる可読性向上を目指して
SigninPage.signin();
TopMenuPage.selectInsurance();
SearchInsurancePage.search('サンプル商品');
SearchInsurancePage.selectItem(1);
InsurancePage.Contract();
上記は、可読性がまだ足りていないサンプルコードです。
シナリオ部分のテストコードですが、レビューアが一目で何をやっているかを把握するにはやや難があります。
そこで考えました。
「もっと日本語ちっくにすればいいんじゃね？」
そして出来たテストコードがこちら。
サインイン画面.サインインする();
トップメニュー画面.保険画面に遷移する();
const 検索条件: 保険検索条件 = {
商品名: 'サンプル商品',
};
保険検索画面.検索する(検索条件);
const 選択条件: 保険選択条件 = {
明細インデックス: 1,
};
保険検索画面.保険を選択する(選択条件);
保険詳細画面.契約する();
どうでしょうか。
これなら、ぱっと見でも実行内容が分かるようになったと思います。
これで、テスト自動化による当初の目標・要望を全て達成出来ました。
まとめ
「コードを日本語化する」という一工夫を加えることでテストの自動化に成功しましたが、勿論コードの日本語化が万能の解決策というわけではありません。
私達のプロジェクトではメンバーが皆十分な日本語スキルを持っていたため、コードを日本語化しても特に問題ありませんでしたが、多種多様なエンジニアが参画するグローバルプロジェクトでは日本語化は悪手となります。
プロジェクト特性を見極め、それに適した対策を講じてこそテスト自動化も活きるという学びでした。