技術・機能解説、ノウハウ｜DevOps
CodePipelineでWebUIテスト
こんにちは、この記事は三度の飯よりCI/CDが大好きなCTCの羽深（はぶか）がお送り致します。
ところで皆さんは普段WebUIのテストをどのように実施していますでしょうか？私はCLI/CUI/TUIが大好きで、GUIやWebUIのテストはなるべく手を抜きたいと常日頃考えて生きています。ですので「Excelで書かれた試験項目票に従って手作業でブラウザを操作し、ときには指差し確認、ときには喚呼し確認、そしてExcelの確認項目に日付と実施者と結果を記入して次の項目に進め」などという由緒正しきテストはどうしても辛さを感じてしまいます。
そこで本日はAWSのCodePipelineでWebUIのテストを自動化する方法をご紹介します。これを機に由緒正しきテストからDevOps時代のテストに移行される方が一人でも増えましたら幸いです。
1. 今回の全体構成
今回のCodePipelineでWebUIテストを自動化する構成の全体図を以下に示します。
パイプラインの流れは以下のようになっています。
- AWSのCodeCommitで管理しているWebアプリのコードに変更が加えられたことを検知
- リポジトリからコードを取り出し、ユニットテストと環境準備をCodeBuildで実施
- インスタンスにアプリケーションのデプロイをCodeDeployで実施
- Ghost Inspectorを用いてWebUIテストを実施
本来であれば3の手順でいきなり本番環境にデプロイせずにWebUIのテストを実施するためのインスタンスを別途起動しそちらでWebUIテストを実施します。テストに成功したらElasticIPを差し替える、もしくはELBの設定を変更してテストが通ったインスタンスのほうを本番環境としてリリースするようにするべきですが、ここでは紙面の関係で割愛します。
なお、WebUIのテストツールとしてはSeleniumが有名ですが、今回はGhost Inspectorというサービスを使用してみました。このサービスはWebUIの操作をブラウザで行い記録することで、その記録からWebUIのテストシナリオを作成し、テストにかかる手間を省力化/自動化するサービスです。
Freeプランがあるので気軽にアカウントの作成ができます。
https://ghostinspector.com/
2. サンプルWebアプリ
今回は弊社のサービス「Ignite」で作成されるデモ環境をWebアプリのテストで使用します。
※Igniteは、アプリケーションのリリースプロセスを効率化するCI/CD環境です。
詳細はこちら
https://www.ignite.ci/
まず最初に、Ghost Inspectorの設定を変更し、ユーザーから見えているこの「Hello test」となっている部分を「This is test」に変更し、ツールでチェックできることを確認します。
次にWebアプリのコードとテストコードに存在する「Hello」の記述を「This is」に変更します。
- Contents/routes/index.js
- Contents/test/test.js
ソースコードの変更箇所は以下のようになります。
diff --git a/Contents/routes/index.js b/Contents/routes/index.js
index 5b318c1..1b442f5 100644
--- a/Contents/routes/index.js
+++ b/Contents/routes/index.js
@@ -2,7 +2,7 @@ var express = require('express');
var router = express.Router();
var os = require('os');
-router.hello = function(msg){return 'Hello '+ msg;};
+router.hello = function(msg){return 'This is '+ msg;};
ram = parseInt(os.freemem()/1024/1024);
router.freeram = function(ram){ return 'FreeRAM :'+ ram + ' MB';};
diff --git a/Contents/test/test.js b/Contents/test/test.js
index 7f7a11c..3fbedb6 100644
--- a/Contents/test/test.js
+++ b/Contents/test/test.js
@@ -3,9 +3,9 @@ var assert = require("assert")
describe('router', function(){
describe('get(/)', function(){
- it('Hello test', function(){
+ it('This is test', function(){
var msg = 'testmystrings';
- assert.equal('Hello ' + msg, router.hello(msg));
+ assert.equal('This is ' + msg, router.hello(msg));
})
})
})
変更をコミットしてリポジトリに反映させます。
$ git commit -m "change 'Hello' to 'This is'" -a
[master 9bb80fd] change 'Hello' to 'This is'
2 files changed, 3 insertions(+), 3 deletions(-)
$ git push
Counting objects: 7, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (7/7), done.
Writing objects: 100% (7/7), 632 bytes | 0 bytes/s, done.
Total 7 (delta 4), reused 0 (delta 0)
To https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/Test-GhostInspector-2-Test-GhostInspector-2
0dabeef..9bb80fd master -> master
少し待つとCodePipelineがソースコードの変更を検知し、パイプラインの処理を回します。無事にテストが通ると以下のようになります。
Webアプリも以下のように変更が適用されていることが確認できます。
今まではWebUIのテストとなるといろいろと面倒なことが多くてつい後回しにしたり人力でテストすることで乗り切ることが少なくなかったと思いますが、このようにAWSのサービスと外部サービスを利用することで簡単にCIの一部として実施することが可能になりますので、みなさんもぜひこれを機に実践してみてください。
著者プロフィール
- 羽深修
- 伊藤忠テクノソリューションズ株式会社在職中｜1. 現在の担当業務 : 2017年6月にCTCに入社。CI環境のインテグレーションおよびIgniteの開発およびふらっとプリセールスの真似事｜2. これまでの担当業務 : 前職では世界で一番有名なクラウドソフトウェア「Eucalyptus」をお客様環境に勝手に導入したり、会社コラムで「ハブカくん」を担当｜3. 最近の想い・考えていること : ハインラインが「夏への扉」を書いた1956年からもう60年以上経つのに家事が劇的に楽になっていなくてもどかしい。
