Enterprise HTML5 Seminar 2017レポート（3）「HTML5時代のUIテスト自動化」

先日行われましたEnterprise HTML5 Seminar 2017のセッション内容について紹介します。幾つかのセッションは非公開となっています。今回は新日鉄住金ソリューションズ システム研究開発センター hifive開発チーム 石川 真也による「HTML5時代のUIテスト自動化」の内容を紹介します。

HTML5によって多彩な表現が可能になりました。円グラフなどもHTML5だけで描けるようになっています。その一方で、ユーザにどう見えているのか、正しく見えているのかというテストが必須になっています。きちんと表示されているか、表示場所は正しいか、表示内容が正しいかどうかといった確認が必要です。さらにマウスを重ねた時の表示など、操作も合わせた表示確認が必要になります。

この表示に関するUIテストと呼んでいます。例えば以下の2つの画面があった時に、いいねボタンのあるなしが違います。これくらいの違いしかないと、目視確認では見落としがちです。

次に複数ブラウザ、デバイスの対応とテストという問題があります。HTML5はレスポンシブWebデザインによって一つのHTMLソースで複数のブラウザ、デバイスに対応可能になりました。デザイナーが楽になる一方、ブラウザ間の差異によるレイアウト崩れが起きることもあります。対応ブラウザ、デバイスすべてで表示を確認しなければなりません。今まではIEだけ対応していれば良かったのが、Google Chromeやスマートフォン、タブレットでもテストしなければならなくなりました。特にスマートフォンでのテストは負荷が大きいとよく聞きます。

さらに最近の開発体制の変化によって、短いサイクルでの開発、リリースへの需要が増えています。継続的インテグレーションが一般的になってきており、リリースの度に繰り返しテストを行う必要が出ています。UIテストについても自動化されていないとテストがボトルネックになってしまいます。

一回のテストであれば問題ありませんが、細かくリリースする度にテストをしていたのでは、掛け算的に負担が増えてしまいます。そこで自動化を考える必要があります。

しかしテスト自動化を阻む課題が存在します。まず自動化環境やスクリプトの作成、保守コストが大きいという問題があります。ブラウザ間の差異に対応するために同じテストに対してブラウザ毎に個別のスクリプトを書く場合もあります。さらに「画像が正しく表示されること」をどう定義、記述するかという問題があります。

この課題に対して私たちが行っているのがPitaliumというツールになります。テストスクリプトの作成を簡略化できます。さらにワンソースで複数ブラウザのテストができます。そしてレイアウトの確認も自動判定で処理できます。Pitaliumではスクリーンショットを比較することでテストの合否判定を行います。テストで取得したスクリーンショットと、予め用意しておいたスクリーンショットを比較してテストの合否判定に使います。最初の実行で保存されたスクリーンショットが正解として保存されます。二回目以降は正解と指定されている画像と比較することによってテストの合否を判定します。もし失敗した場合には正解と失敗の画像を比較して差分で確認できます。もし失敗した場合も正しい仕様変更によるものであれば、新しい画像を正解と定義し直すことができます。

スクリーンショット比較によるメリットとしては人間の目視による判定をなくし、負荷を大幅に減らすことができます。

本発表の資料はSlideShareでも公開されていますので、ご覧ください。