きなこもち.net

.NET Framework × UiPath,Orchestrator × Azure × AWS × Angularなどの忘備録

AzureDevOps × Selenium × 自動UIテストをPiplineで実行してみた

この記事の目的

この記事は、
AzureDevOpsのPiplineで、自動UIテストを実行すること

を目的としています。

要約

WebアプリケーションのUIテストを自動化したい。
できれば、テストは仮想環境で実行して、あとから結果(スクショ)を確認したい。
仮想環境はコンテナを使って、マルチ実行を用意にできるようにしたい。
CI(継続的インテグレーション)に組み込みたい。

という考えのもと、SeleniumとDockerを使って環境を用意しました。
DockerFileの詳細↓
www.kinakomotitti.net

docker-compose.ymlの詳細
www.kinakomotitti.net

今回は、前回の結果を利用して、AzureDevOpsのPiplineに、
自動UIテストを実行するための設定を追加していきます。
具体的には、Azure DevOps上で、以下のフローを設定しました。

GithubからソースをClone
②テストプロジェクトのビルド
③Docker Imageのビルド
④Docker ImageのPush(docker hubを利用しています。)
⑤docker-composeの実行
⑥テスト結果のPublish
スクリーンショットをArtifactとしてPublish

前回同様、最終的なソリューションは以下のGithubに登録してあります。
github.com

本題

★〇〇とは

念のため、リンク張っときます。

★Piplineの処理イメージ

AzureDevOpsで定義したPipelineはこのようになっています。

f:id:kinakomotitti:20190704150344p:plain
Pipeline定義
それぞれの定義を利用した目的の詳細については、後程まとめます。


★Use .NET Core sdk

今回、UnitTestプロジェクトを利用するにあたり、
ターゲットフレームワークを【3.0.100-preview4-011223】に設定しました。

Pipelineのデフォルトでは、.NET Core 3.0のSDKがインストールされていないため、
何もしないとエラーが発生してしまいます。
そのため、まず最初に、Agentに.NET Coreをインストールします。

f:id:kinakomotitti:20190704144332p:plain
設定内容


dotnet build

Githubから取得したソリューションをビルドして、テストモジュールを作成します。

f:id:kinakomotitti:20190704144528p:plain
設定内容


★Run a docker compose

ローカルで実行するときと同じように、docker-compose.ymlを指定してupします。
docker-compose upした後、ローカルと同じように、docker buildが走った後、
それぞれのコンテナが起動されます。

Bash Script

ここでは、docker-composeしたあと、UIテストが完了するまで待機する処理を実行します。
なぜ必要になるかも含めて絵でまとめてみました。

f:id:kinakomotitti:20190704143624p:plain
Pipelineの全体処理フロー


スクリプト自体は以下のようにしました。

#debug用
ls UnitTestProject/UnitTestProject/mnt/result
docker ps 
docker network ls

while [ ! -e UnitTestProject/UnitTestProject/mnt/result/test-end.flag ] ; do
    if [ -e UnitTestProject/UnitTestProject/mnt/result/test-end.flag ] ; then
  #debug用
       echo test is end
       ls UnitTestProject/UnitTestProject/mnt/result/
  #debug用
       cat UnitTestProject/UnitTestProject/mnt/result/test_*
       break
    else
       echo test is not start
       sleep 10
    fi
done

テストが実行されることを確認しているので、無限ループにしていますが、
もしものことを考えたら、最大待ち時間とかを設定したほうが良いかもしれないです。

また、自分でフラグファイルを作って、そのファイルの存在有無で
テスト実行状態を判断しています。


★Publish Test Results

Agentのホストにマウントしたフォルダに[dotent vstest]の結果ファイルが出力されます。
このファイルはxml形式なので、パッと結果を見るのが大変です。

このファイルを可視化するために、Publish Test Resultを使います。

f:id:kinakomotitti:20190704152135p:plain
設定内容

テストが1件なのであまり大したことがありませんが、こんな形で、Testsタブの中に結果がまとめられます。

f:id:kinakomotitti:20190704152224p:plain
テスト結果を可視化した結果



★Publish Pipeline Artifact

UIテストを実行するので、実行中の状態も確認できるようにする必要があります。
今回は、Resultファイルと同様に、Agentのディレクトリにスクリーンショット用のフォルダにスクリーンショットを出力するように設定しています。

何もしないと、Pipeline終了時に一緒に消されてしまうため、Artifactとして退避しておく必要があります。
そのため、Pipeline Artifactを使ってスクリーンショット用フォルダを退避する設定を組み込んでいます。

f:id:kinakomotitti:20190704152852p:plain
設定内容


Artifactは、Summaryタブの中からダウンロードすることができます。

f:id:kinakomotitti:20190704152813p:plain
Artifactの確認方法


まとめ

途中、bashスクリプトを使って、良しなに待機する処理が必要となる部分ではまりましたが、
Dockerとdotent coreランタイム上で動くSeleniumクライアントを使って、
AzureDevOpsのPipellineに登録するところまでの動作確認ができました。

今回は、サンプルテストを実行しただけなので、
実際のWEBアプリケーションに対してのテストを設定してみて
改善が必要な個所は改善していこうと思います。