Edited at

Katalon StudioでVisual Testingを実現した


はじめに

わたしはWebアプリケーションのUIをテストとする作業をソフトウェアで自動化する技術に関心があります。2018年1月以来わたしは Katalon Studio というソフトウェアに注目しています。「Katalon Studioとはどんなソフトウエアか」で概要を紹介しました。

前回 「Katalon Studio+MaterialsでWebサイトのスクリーンショットを整然と保存する」で、Materialsという自作ライブラリを紹介しました。Katalon StudioにMaterials

のjarを組み込んで、Webサイトの本番環境と開発環境とにアクセスしてスクリーンショットをたくさん撮ってローカルディスクに保存する、そして保存されたファイルの一覧を表示するHTMLを生成するという自動化テストを実現することができました。これを足がかりにして今回は一歩前へ進みます。本番と開発と2つの環境の画像ファイルを比較し重大な差異を見つけたらテストがFAILする、そういう自動化テストが目標です。今回はこの自動化テストを紹介します。

以下の文章はGitHubレポジトリ VisualTestingInKatalonStudio のREADMEを日本語で書き直したものです。


出力サンプル

ある日ある時にツールを実行して作成されたindex.htmlをネットにアップロードしたサンプルがあります。

- http://vtprojects.kazurayam.com/VisualTestingInKatalonStudio/Materials/index.html


解決すべき問題

Katalon StudioでVisual Testingを実現したい。

Visual Testingって何のことか?画面確認を自動化することです。下記のようなことをわたしは実現したいとおもっていて、それを実現する手法のことをVisual Testingと呼ぶことにします。


  1. わたしはブラウザでWebサイトを見に行く。しょっちゅう見に行く。わたしはそのWebの開発者かもしれない、デザイナかもしれない、テスト担当者かもしれないし、ただのファンかもしれない。

  2. そのWebサイトのページをできるだけ多く目で見て確認したい。システムになんらか不具合が発生した時どこに顕在化するか予測できない。だからひとつふたつページを選んで見るのでは駄目。広く目配りすることが重要。

  3. Webページ全体のスクリーンショットを撮ってファイルに保存したい。証拠(evidence)として残したい。

  4. Webサイトの2つの環境の画面を目で見比べるように、2つの環境のスクリーンショット画像に差異があるかどうかをチェックしたい。

  5. 差異の大きさをfussyに判定したい。軽微な差異ならやり過ごすが重大な差異があればテストがFAILして人に通知するようにしたい。

  6. このテストを自動実行したい

Webサイトに100ページもあったらスクリーンショットを撮るのにどれぐらい時間がかかるでしょうか。人手でやったら1時間以上かかるだろう。しんどくて退屈な作業だ。そんなの毎日やれない。でも仕事でやらねばならないこともある。だから自動化することが重要です。Visual TestingをCIサーバで毎日実行する準備を整えておけば本番環境と開発環境のあいだに予期せざる差異が生じた時にすぐに気づくことができるでしょう。

わたしはVisual Testingツールが2つの環境の画面を見比べて重大な差異があればそれに気づかせてくれることだけを望んでいます。Visual Testingツールに本格的なデバッグ機能を求めない。ただし無償で利用可能であってほしい。

Katalon Studioでテスト・スクリプトを書き始めてすぐ以下の問題に気づきました。


画像ファイルを整理整頓するのが面倒だという問題

わたしは本番環境と開発環境と2つの環境のスクリーンショットをたくさん撮ってローカルディスクにいったん保存し、あとで再利用したいと考えた。あるスクリプトがファイルのPathを決めてWRITEする。べつのスクリプトがファイルのPathを発見してREADする。そうするためにはスクリーンショットのファイルのPathをどうするか仕様を決めて2つのスクリプトがその仕様に基づいて動作するようにしなければならない。むずかしくはないが面倒くさいコードを書く必要がありました。


ページ全体のスクリーンショットが撮れないという問題

Selenium WebDriverのAPIに org.openqa.selenium.TakesScreenshot#getScreenshotAs(output)がある。これを使えばWebページのスクリーンショットを撮ることができる。しかし実際にやってみるとページ全体ではなくて目に見えている部分(View Port)だけが撮影されてしまう。これでは画面の状態をチェックするのに不十分だ。


ふたつの画像を比較したいという問題

開発環境のWebページを本番環境のそれと見比べたい、違いがあったら気づきたい。スクリーンショットを撮ってPNGファイルにするところまではできたが、その先どうすればいいのか?


解決方法

ファイルのPathにかんする問題についてわたしは下記のような解決方法を見出しました。

このGitHubレポジトリのREAMDE(英文)を日本語で書き直したのがこれです:

UsingMaterialsInKatalonStudioプロジェクトはあるWebサイトの2つの環境にアクセスしてスクリーンショットをたくさん撮りPNGファイルにしてローカルディスクに保存したうえでそれらを一覧するHTMLを生成します。このプロジェクトは下記のプロジェクトが生成する jarファイルを利用します。

このプロジェクトは MaterialRepository 実現します。Katalon Studioのプロジェクトのディレクトリに Materials ディレクトリを作り、その下に整理整頓されたファイル・ツリーを構築します。そしてファイルにアクセスするためのメソッドを提供します。

ページ全体のスクリーンショットが撮れないという問題を aShot が解決してくれました。aShotをKatalon Studioで使ってみようとデモを作成し下記のGitHubレポジトリにアップしまし。

ふたつの画像ファイルを比較したいという問題にたいして aShot の ImageDiff が解決してくれました。ImageDiff をKatalon Studioのなかで使うために、わたしはもうひとつKatalon Studioプロジェクトを作ってGitHubで公開しました。

このプロジェクトのなかにはカスタム・キーワード com.kazurayam.ksbackyard.ScreenshotDriver が含まれています。これはaShotをラップしてKatalon Studioから呼び出しやすくするものです。また./Materialsディレクトリのなかから比較すべきファイルのリストを取り出したり、2つの画像ファイルの隔たりの大きさを示す数値を算出するなどのメソッドを備えています。

これらの外部リソースを統合して VisualTestingInKatalonStudio プロジェクトを仕上げました。これは冒頭わたしが「Visual Testingとはこういうもの」と述べた要件を満たすものになっています。


Visual Testing in Katalon Studioの始め方

Releases ページにZIPファイルが公開されています。これをダウンロードして解凍してください。


テストをどうやって実行するか



  1. Katalon Studioを起動し、VisualTestingInKatalonStudioプロジェクトを開く

  2. Tests ExplorerペインのなかにTest Suitesアイコンがあるのを選び、Executeアイコンをダブルクリックして開く。Executeはテストスイートコレクションである。


  3. ExecuteはFirefoxブラウザがあなたのPCにインストール済みで使用可能であることを暗黙に前提している。もしなかったらFirefoxをインストールしてください。

  4. テストスイートコレクション Execute の定義画面の中に緑色の矢印つきで Execute というボタンがあるのでそれを押して実行します。Execute.png

  5. 終わるまでに2分ぐらいかかります。


  6. VisualTestingInKatalonStudio/Materials/index.htmlというファイルができます。これをWebブラウザで開いて見てください。

残念ながら <projectDir>/Materials ディレクトリとそのなかのファイルをKatalon StudioのGUIで開くことはできません。Webブラウザに /Materials/index.html をブックマークしてインデックス画面を手早く開けうりょう準備してしておくことをおすすめします。


デモ Execute の説明

テストスイートコレクション Execute が何をするのか、概要を説明します。


入力

テストスイートコレクション Execute はテストスイート Test Suites/Main/TS1 を二度実行します。最初は本番環境に向けて。二度目は開発環境に向けて。下記ふたつのURLにアクセスします。


処理内容

テストスイート Test Suites/Main/TS1 は指定されたURLを訪問し、順番にページをたどってスクリーンショットを撮ります。./Materials/Main.TS1/yyyyMMdd_hhmmss/Main.Basic というディレクトリが2つ作られて中にPNGファイルが5つ保存されます。

続いてテストスイートコレクション Execute はテストスイート Test Suites/ImageDiff を実行します。テストスイート Test Suites/ImageDiff はその直前に Main/TS1 によって作られた2つのディレクトリのなかのPNGファイル群をREADして、同じ画面どおし比較して、差分画像を生成します。生成した差分画像を ./Materials/ImageDiff/yyyyMMdd_hhmmss/ImageDiff というディレクトリに保存します。

比較された2つの画面に差異があれば差分画像のなかに下記のような赤く塗られた領域ができます。ひと目見れば「あれ、なんか違っているぞ!」とわかりますね。

下記がシーケンス図です。

sequence-diagram.png


差分画像のファイル名の形式

差分画像ファイルのファイル名は下記のようなフォーマットに従います。例をあげますと:

CURA_Homepage.20180920_165543_product-20180920_165544_develop.(6.30)FAILED.png

ファイル名の最初の部分 CURA_Homepage は比較の元になったファイル名 CURA_Homepage.png からコピった名前です。

真ん中の yyyyMMdd_hhmmss_PPPPPPP の部分の前半は、テストスイート Main/TS1 が実行された時のタイムスタンプです。PPPPPPP はテストスイート Main/TS1 が実行されたときに適用されたプロファイルの名前です。

差分ファイルのファイル名の末尾にある (6.30) をわたしは diff% と呼びますが、定義は

diff % := number of RED pixcels(differences) / (width * hight of page) * 100 です。つまり画面全体の広さを100としたときに赤く塗られた差分領域の広さがどれだけあるかを示すパーセンテージです。本番環境と開発環境とが完璧に一致していれば diff% はゼロでが、diff%が>0になることがしばしばあります。diff%>0になる原因はさまざまです。

差分ファイルのファイル名の末尾に FAILED という文字があったり無かったりします。FAILEDのマークの有無がどうやって決まるか?それを理解するには Test Cases/ImageDiff のコードを見る必要があります。すなわち:

CustomKeywords.'com.kazurayam.ksbackyard.ScreenshotDriver.makeDiffs'('product', 'develop', 'Main/TS1', 3.68)

makeDiffsメソッド呼び出しの第4引数に 3.68 という数値が指定されています。これをわたしは criteria% と呼びます。criteriaとは「目安」のこと。差分画像のdiff%が6.30であるならばcriteria%の3.68より大きい、だからこの差分は重要であると判断されて、FAILED とマークがつけられます。FAILEDがあればそれは要注意という意味です。


出力

ある日ある時にツールを実行して作成されたindex.htmlをネットにアップロードしたサンプルがあります。

- http://vtprojects.kazurayam.com/VisualTestingInKatalonStudio/Materials/index.html

本番環境のページを撮影したのがこれ:

Production_CURA_Homepage.png

開発環境のページを撮影したのがこれ:

Development_CURA_Homepage.png

ファイル一覧画面 index.html がこれ:

Materials_index.png

FAILEDとマークされた差分画像ファイルのバーの背景色が紫色で強調表示されることに注意。ただしdiff%の数値が0.12とかでcriteria%の数値(たとえば3.68)より小さければその差分は重要でないとみなされFAILEDマークがつきません。だからindex画面上も強調されません。

さいごに差分画像がこれ:

ImageDiff_CURA_Homepage.png

差分画像のファイル名が CURA_Homepage.20180920_165543_product-20180920_165544_develop.(6.30)FAILED.png である場合、(6.30)がdiff%すなわち画像全体の面積にたいして赤い差分領域の占める割合を%で表した数値です。またファイル名のなかに FAILED とあるのは、diff%が所定の境界値を越えていた場合に目印としてつけられた文字です。境界値として 3.00% を指定してテストスイート ImageDiff を実行したとき、この差分画像のdiff%が6.30であれば、6.30 > 3.00 ですからこの差分画像はFAILEDとマークされます。


外部依存性について


jarファイルへの依存

VisualTestingInKatalonStudioプロジェクトは下記のjarファイルに依存しています。

2つのjarが <projectDir>/Drivers/ のなかにあらかじめ組み込んであります。

外部のjarをKatalon Studioに組み込む方法がドキュメント "External Libraries" で説明されています。この操作をしてMaterialsやaShotをアップグレードすることができます。


カスタム・キーワードの依存性

VisualTestingInKatalonStudioプロジェクトは下記の外部プロジェクトで開発されたCustom Keywordのソースコードをimportして再利用しています。

KatalonのドキュメントImport/Export Keywords に他ブロジェクトからカスタム・キーワードを取り込む方法が説明されています。Import from local folderというやり方とImport from Gitというやり方の二通りが説明されています。しかしわたしが試したところImport from Gitには問題がありました。Import from local folderのやり方が現実的です。

ksbackyardプロジェクトのReleasesページからZIPをダウンロードし、任意の場所で解凍します。あなたのKatalon StudioでVisualTestingInKatalonStudioプロジェクトを開き、Keywords > Import > Folder を選択します。

Keywords_Import_Folder.png

File Chooserのダイアログが開きますから、解凍された ksbackyard プロジェクトの Keywords フォルダのなかの com フォルダひとつを選択します。

Keywords_Import_Folder_dialog.png

これで com.kazurayam.ksbackyardパッケージをはじめいくつかのGroovyソースファイルがksbackyardプロジェクトから VisualTestingInKatalonStudioプロジェクトへコピーされます。


補足


画面のサイズについて

Katalon Studioで WebUI.setViewPortSize(width, height) を使ってブラウザを開いたときのウインドウのサイズを大きくも小さくもすることができます。わたしは1600x900, 1024x768, 375x677 (つまりiPhone6 と同じ)の3通りでテストして成功しました。


まとめ

VisualTestingInKatalonStudio が提案する手法はさまざまなWebサイトに広く応用可能です。わたしも自分が職務として関わっているWebサイトに応用しました。開発環境と本番環境の画面を片っ端から比較して、もし違いがあれば教えてくれるテストを作ることができました。