Edited at

GUIテストの自動化と結果の可視化


GUIテストの自動化と結果の可視化

本稿では、GUIテストが実行し、その結果をキレイに可視化するような環境の構築法を紹介する。あくまで環境構築の手順のみ紹介し、各ライブラリの詳細な利用方法についての詳しい説明は省く。

Allureによるテスト結果の可視化はこんな感じ


対象者


  • テスト自動化をしたことがない人

  • テスト結果をグラフなどで可視化したい人

  • Javaの知識がある人


セットアップ環境

Windows10


必要なソフトウェアのインストールと設定

たくさんある。


JDK8

Javaプログラムの開発に必要。Oracle製を使う。インストーラーでインストール。バージョンは執筆時の最新版を使用している。

JDK8のダウンロードページ

以下にインストール。

C:\Program Files\Java\jdk1.8.0_201

以下にPathを通す。

C:\Program Files\Java\jdk1.8.0_201\bin

環境変数JAVA_HOMEを以下のように設定する。

C:\Program Files\Java\jdk1.8.0_201

ここまで出来たら以下のコマンドで確認。


cmd

C:\>java -version

java version "1.8.0_201"
Java(TM) SE Runtime Environment (build 1.8.0_201-b09)
Java HotSpot(TM) 64-Bit Server VM (build 25.201-b09, mixed mode)


Maven

Java用のビルドツール。パッケージのダウンロードや依存性解決を自動で行ってくれる。以下のサイトからZIPをダウンロード。今回はバージョン3.6.0を使う。

Mavenのダウンロードページ

ダウンロード後、解凍したものを以下に配置。

C:\Program Files\apache-maven-3.6.0

以下にPathを通す。

C:\Program Files\apache-maven-3.6.0\bin

ここまで出来たら以下のコマンドで確認。


cmd

c:\>mvn --version

c:\
Apache Maven 3.6.0 (97c98ec64a1fdfee7767ce5ffb20918da4f719f3; 2018-10-25T03:41:47+09:00)
Maven home: C:\Program Files\apache-maven-3.6.0\bin\..
Java version: 1.8.0_201, vendor: Oracle Corporation, runtime: C:\Program Files\Java\jdk1.8.0_201\jre
Default locale: ja_JP, platform encoding: MS932
OS name: "windows 10", version: "10.0", arch: "amd64", family: "windows"

次にローカルリポジトリを設定する。ここにMavenがダウンロードしたパッケージが配置される。

まず、ローカルリポジトリ用のフォルダを作成する。


cmd

c:\>mkdir "c:\Program Files\apache-maven-3.6.0\local-repository"


次に設定ファイルC:\Program Files\apache-maven-3.6.0\conf\settings.xmlに以下を追記する。

<localRepository>C:\Program Files\apache-maven-3.6.0\local-repository</localRepository>

なお、デフォルトのローカルリポジトリは${user.home}\.m2\repositoryである。デフォルトのままでもいい。

プロキシ下で環境構築する場合はこのsettings.xmlにproxyの設定を必ず行う。

<proxies>

<proxy>
<id>http_proxy</id>
<active>true</active>
<protocol>http</protocol>
<username>proxyuser</username>
<password>proxypasswd</password>
<host>proxy.example.com</host>
<port>8080</port>
</proxy>
<proxy>
<id>https_proxy</id>
<active>true</active>
<protocol>https</protocol>
<username>proxyuser</username>
<password>proxypasswd</password>
<host>proxy.example.com</host>
<port>8080</port>
</proxy>
</proxies>


Allure

テスト結果をグラフなどで可視化するツール。以下のサイトからZIPをダウンロード("Links"->"Download")。今回はバージョン2.10.0を使う。

Allureのダウンロードページ

ダウンロード後、解凍したものを以下に配置。

C:\Program Files\allure-2.10.0

以下にPathを通す。

C:\Program Files\allure-2.10.0\bin

以下のコマンドで確認。


cmd

c:\>allure --version

2.10.0


IntelliJ IDEA

主にJavaの開発で使用するIDE。Community版を使う。以下のサイトからインストーラーをダウンロードして実行。

IntelliJ IDEAのダウンロードページ

ひとまず、以上でダウンロードは終わり。


IntelliJでCucumberテストコード作成

Cucumberはテストを自然言語風に記述できるようにするフレームワークである。featureファイルにテストの流れを記述し、ステップ定義に実際の処理を書く。

まず、Cucumberを使って実際にテストを書いてみる。次に、Selenideを使ったGUIテストを書いてみる。


プロジェクトの作成

左ペインで"Maven"を選択し、Nextをクリック。"Create from archetype"にはチェックを入れない。

1.png

以下のように設定し、Nextをクリック。ここの入力欄は何でもよい。

2.png

そのまま"Finish"をクリック。プロジェクトが作成される。

3.png


文字コードの設定

"File"->"Settings"->"Editor"->"File Encodings"


  • Global Encoding: UTF-8

  • Project Encoding: ShiftJIS

Project EncodingはShiftJISにしないと、コンソールへの日本語出力が文字化けする。

5.png


フォントの設定

"File"->"Settings"->"Editor"->"Font"

日本語対応フォントを選ぶ。ここではMeiryo UIを選択した。この設定をしないと日本語が文字化けする可能性がある。

4.png


Mavenの設定

"File"->"Settings"->"Maven"

先ほどインストールしたMavenの場所を"Maven home directory"に設定する。

6.png


pom.xmlの編集

pom.xmlを以下のようにする。<properties><dependencies>を追加する。

各パッケージのバージョンはそれぞれの依存関係を考慮して設定する。依存関係は例えばここで調べられる。


pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>sandbox</groupId>
<artifactId>test</artifactId>
<version>1.0-SNAPSHOT</version>

<properties>
<!-- java8で書く -->
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>

<!-- 文字コードはUTF-8 -->
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

<!-- バージョン指定 -->
<cucumber.version>4.2.5</cucumber.version>
<selenide.version>5.1.0</selenide.version>
<allure.version>2.10.0</allure.version>
<junit.version>4.12</junit.version>
</properties>

<dependencies>
<!-- Java用Cucumber -->
<dependency>
<groupId>io.cucumber</groupId>
<artifactId>cucumber-java</artifactId>
<version>${cucumber.version}</version>
<scope>test</scope>
</dependency>

<!-- JUnitでCucumberを使うためのパッケージ -->
<dependency>
<groupId>io.cucumber</groupId>
<artifactId>cucumber-junit</artifactId>
<version>${cucumber.version}</version>
<scope>test</scope>
</dependency>

<!-- Selenide -->
<dependency>
<groupId>com.codeborne</groupId>
<artifactId>selenide</artifactId>
<version>${selenide.version}</version>
<scope>test</scope>
</dependency>

<!-- AllureでCucumberテストをうまく出力するためのパッケージ -->
<dependency>
<groupId>io.qameta.allure</groupId>
<artifactId>allure-cucumber4-jvm</artifactId>
<version>${allure.version}</version>
<scope>test</scope>
</dependency>

<!-- AllureでSelenideテストをうまく出力するためのパッケージ -->
<dependency>
<groupId>io.qameta.allure</groupId>
<artifactId>allure-selenide</artifactId>
<version>${allure.version}</version>
<scope>test</scope>
</dependency>
</dependencies>
</project>


追加したら、autotestプロジェクトを右クリック->"Maven"->"Reimport"

Mavenがパッケージのダウンロードを開始する。

7.png


Cucumberプラグインのインストール

IntelliJにCucumberプラグインをインストールすることによってfeatureファイルの編集が容易になる。

"File"->"Settings"->"Plugins"->"Marketplace"

検索窓に"Cucumber"を入力して"Cucumber for Java"を見つける。そのまま"Install"をクリック。終わったらIDEを再起動する。

8.png


featureファイルの追加


featureファイルとは

featureファイルは機能ごとにテストの流れを記述するファイルである。自然言語風であり、非技術者でも読みやすい。Gherkinという言語で記述される。なお、ここではGherkinの文法を解説しない。

featureファイルの例を以下に示す。この例では1つの機能に対して3つのシナリオが存在する。ここではどのシナリオも4つのステップから成る。最後のシナリオはテンプレート化されているため、テストケースは全部で5つとなる。


example.feature

#language: ja

機能: ログイン

@正常系
シナリオ:ログインに成功する
前提 ログインページにアクセスする
もし 正しいIDを入力する
かつ 正しいパスワードを入力する
ならば ログインに成功する

@異常系
シナリオ: ログインに失敗する
前提 ログインページにアクセスする
もし 正しいIDを入力する
かつ 間違ったパスワードを入力する
ならば ログインに失敗する

@正常系
シナリオテンプレート: ログインAPI
もし <id>のIDを設定する
かつ <pass>のパスワードを設定する
かつ API実行する
ならば ログインに成功する

サンプル:
| id | pass|
|"hoge"|"hogepass"|
|"fuga"|"fugapass"|
|"piyo"|"piyopass"|



featureファイルの作成

autotest\src\test\resources動作試験.featureを作成する(フォルダを右クリック->"New"->"File")。resourcesフォルダがなければ作成する。内容は以下のようにする。

3つのステップから成るシナリオが1つだけ存在している。


動作試験.feature

# language: ja

機能: 動作確認
シナリオ: テストシナリオ
前提 ここは地球である
もし 今日も日が昇る
ならば 明日も日が昇る


ステップ定義の追加

autotest\src\test\javaStepdefs.javaファイルを作成する。内容は以下のようにする。

これは動作試験.featureで記述した3つのステップの実装である。


Stepdefs.java

import cucumber.api.java.ja.ならば;

import cucumber.api.java.ja.もし;
import cucumber.api.java.ja.前提;

public class Stepdefs {
@前提("ここは地球である")
public void ここは地球である() {
System.out.println("ここは水の星、地球である");
}

@もし("今日も日が昇る")
public void 今日も日が昇る() {
System.out.println("今日もいつものように日が昇る");
}

@ならば("明日も日が昇る")
public void 明日も日が昇る() {
System.out.println("望まずとも、明日も日が昇るだろう");
}
}


ここでは簡単のため、標準出力するだけの実装とする。実際はアサーションコ―ドなどを記述する。


エントリポイントの作成

JUnitテストとして実行するので、エントリポイントを作成する。autotest\src\test\javaRunCucumberTest.javaファイルを作成する。内容は以下。


RunCucumberTest.java

import cucumber.api.CucumberOptions;

import cucumber.api.junit.Cucumber;
import org.junit.runner.RunWith;

@RunWith(Cucumber.class)
@CucumberOptions(features="src/test/resources", plugin = {"pretty"}, monochrome = true)
public class RunCucumberTest {
}



Cucumberテストの実行

プロジェクトルート(pom.xmlのあるディレクトリ)上でmvn testを実行。または右の"Maven"タブを展開して"test"をダブルクリックする。

9.png

実行結果は以下のようになる。

-------------------------------------------------------

T E S T S
-------------------------------------------------------
Running RunCucumberTest
ここは水の星、地球である
今日もいつものように日が昇る
望まずとも、明日も日が昇るだろう
機能: 動作確認

シナリオ: テストシナリオ # src/test/resources/動作確認.feature:3
前提ここは地球である # Stepdefs.ここは地球である()
もし今日も日が昇る # Stepdefs.今日も日が昇る()
ならば明日も日が昇る # Stepdefs.明日も日が昇る()

1 Scenarios (1 passed)
3 Steps (3 passed)
0m0.179s

Tests run: 1, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0.531 sec

Results :

Tests run: 1, Failures: 0, Errors: 0, Skipped: 0


Selenideの導入

SelenideはGUIテストに特化したウェブブラウザ操作ライブラリである。Seleniumのラッパー。

今回はGoogleのページを開いて、検索機能を使うデモを書く。ブラウザはGoogle Chromeを使用する。


Webdriverのダウンロード

ブラウザの操作にはWebDriverが必要である。以下よりChrome用をダウンロードする。インストールされているChromeのバージョンにあったものを選ぶ。

ChromeのWebdriverのダウンロードページ

ダウンロードしたらchromedriver.exeを、autotest\driver以下に配置。

Selenideのバージョンによっては、テスト実行時にWebDriverのダウンロードを自動で行ってくれる。しかし、インストールされているChromeのバージョンに合わないことがあるため、手動でダウンロードする。


プロジェクトのファイルを編集

以下の3ファイルを編集する。


動作試験.feature

# language: ja

機能: 動作確認
シナリオ: テストシナリオ
前提 Googleのページを開く
ならば ネコで検索する


Stepdef.java

import com.codeborne.selenide.Selenide;

import cucumber.api.java.ja.ならば;
import cucumber.api.java.ja.前提;

public class Stepdefs {
@前提("Googleのページを開く")
public void googleのページを開く() {
// Googleのページを開く
Selenide.open("https://www.google.com/");
}

@ならば("ネコで検索する")
public void ネコで検索する() {
// 検索窓に"ネコ"と入力して検索
Selenide.$("input[name=q]").setValue("ネコ").pressEnter();
}
}



RunCucumberTest.java

import com.codeborne.selenide.Configuration;

import com.codeborne.selenide.WebDriverRunner;
import cucumber.api.CucumberOptions;
import cucumber.api.junit.Cucumber;
import org.junit.BeforeClass;
import org.junit.runner.RunWith;

@RunWith(Cucumber.class)
@CucumberOptions(features="src/test/resources", plugin = {"pretty"}, monochrome = true)
public class RunCucumberTest {
// テスト前に一度だけ行う処理
@BeforeClass
public static void setUp(){
// ブラウザをChromeに設定
Configuration.browser = WebDriverRunner.CHROME;

// ブラウザのサイズを1024x768に設定
Configuration.browserSize = "1024x768";

// webdriverの場所を指定
System.setProperty("webdriver.chrome.driver", "driver/chromedriver.exe");
}
}



Selenideテストの実行

先ほどと同様にmvn testで実行。ChromeでGoogleのページが開いて、"ネコ"が検索されれば成功。


Allureによる結果出力

Allureによる結果出力を行う。先ほどのSelenideのテストの結果を成型する。


Allure対応

RunCucumberTest.javaに以下の修正を加える。



  • @CucumberOptionspluginio.qameta.allure.cucumber4jvm.AllureCucumber4Jvmを追加。


  • SelenideLogger.addListener("AllureSelenide", new AllureSelenide().screenshots(true).savePageSource(false));setUp()メソッドの末尾に追加。


RunCucumberTest.java

import com.codeborne.selenide.Configuration;

import com.codeborne.selenide.WebDriverRunner;
import com.codeborne.selenide.logevents.SelenideLogger;
import cucumber.api.CucumberOptions;
import cucumber.api.junit.Cucumber;
import io.qameta.allure.selenide.AllureSelenide;
import org.junit.BeforeClass;
import org.junit.runner.RunWith;

@RunWith(Cucumber.class)
@CucumberOptions(features="src/test/resources", plugin = {"pretty", "io.qameta.allure.cucumber4jvm.AllureCucumber4Jvm"}, monochrome = true)
public class RunCucumberTest {
// テスト前に一度だけ行う処理
@BeforeClass
public static void setUp(){
// ブラウザをChromeに設定
Configuration.browser = WebDriverRunner.CHROME;

// ブラウザのサイズを1024x768に設定
Configuration.browserSize = "1024x768";

// webdriverの格納先を指定
System.setProperty("webdriver.chrome.driver", "driver/chromedriver.exe");

// テスト失敗時にスクリーンショットをレポートに添付する設定
SelenideLogger.addListener("AllureSelenide", new AllureSelenide().screenshots(true).savePageSource(false));
}
}


わざとテストを失敗させるため、Stepdef.javaネコで検索する()を書き換える。誤ったCSSセレクタを指定させる。


Stepdef.java

    @ならば("ネコで検索する")

public void ネコで検索する() {
// 検索窓に"ネコ"と入力して検索
// 誤ったセレクタを指定することで、テストを失敗させる
Selenide.$("#Bad-Selector").setValue("ネコ").pressEnter();
}

実行後、autotestフォルダにallure-resultsがあることを確認する。


Allureレポートの閲覧

コマンドプロンプトでautotestフォルダに移動して、以下のコマンドを実行。


cmd

allure serve -h localhost -p 8080`


うまくいけばブラウザが立ち上がり、成形された結果を閲覧できる。Selenideのテスト失敗時にはスクリーンショットの確認も可能となっている。

Generating report to temp directory...

Report successfully generated to C:\Users\<秘密>\AppData\Local\Temp\771554680061245798\allure-report
Starting web server...
2019-03-17 21:14:53.865:INFO::main: Logging initialized @8327ms to org.eclipse.jetty.util.log.StdErrLog
Server started at <http://localhost:8080/>. Press <Ctrl+C> to exit

10.png

以上で基本的なことは終了です。


最後に

本稿ではCucumberでテストシナリオを作成し、SelenideでWebブラウザの操作を行い、Allureで結果の可視化を行う手順を示した。各ライブラリについて詳細を知りたければ、それぞれの公式サイトが参考になる。

そのうち、以下についての記事も製作しようと思う。


  • Jenkinsを使ったAllureレポートの管理

  • Allureレポートへのファイルの添付

  • 各ステップ間のオブジェクト受け渡し