Gaugeを使ったWeb UI自動化テスト

# Gaugeを使ったWeb UI自動化
Gaugeというテスト自動化ツールを使ったWeb UI自動化手法について記載します。
GaugeとSeleniumを組み合わせてブラウザを自動操作し、テスト自動化とその結果をレポートすることができます。


# 環境
- Windows11
- VSCode
- Java17

# Gaugeのインストール
以下の公式サイトからgaugeをインストールします
https://docs.gauge.org/getting_started/installing-gauge?os=windows&language=java&ide=vscode

# Gaugeプロジェクトのセットアップ
VSCodeの拡張機能でGaugeを追加します。(拡張機能があるほかのIDEでも大丈夫です)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702573/89f5770a-0374-d658-f49d-20a9c725c959.png)

検索欄に「>gauge」と入力して一番上に出てくる「Gauge:Create a new gauge 」候補を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702573/3dfeef37-536b-0c58-0c6a-b71da297b26e.png)
言語を選択して、（今回はjava）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702573/d6ebb21f-d465-8444-fe64-f49f6a9987f0.png)
テスト用プロジェクトを生成するための任意のフォルダを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702573/ed9eda80-e76c-eab0-4e6a-74ec4fa114cc.png)

選択したフォルダの配下にgaugeのプロジェクトが展開されるので、VSCodeで開きます。

初期状態は以下のようなサンプルコードが用意されてます。（gaugeのバージョンによって内容は多少異なるかもしれないです）

#### Javaファイル（Path:src\test\java）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702573/3e95d51d-b990-089d-8561-ff5b9012daf9.png)

#### specファイル(Path:\test\specs)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702573/f7331c64-ef76-9e46-3813-afd5b662b492.png)

重要なのはこのspecファイルとjavaファイルです。
テストケースをspecファイルに記載し、実際のテスト処理をJavaファイルに記載していきます


## 必要なライブラリのダウンロードと設定
初期状態ではSeleniumの環境の用意がないです。
つまりブラウザの自動操作ができません。
そこで、必要なjarファイルをそれぞれダウンロードし、gauge\plugins\java\0.11.0\libs配下に設置します。

### 必要なライブラリ一覧
<dl>
  <dt>junit</dt>
  <dd>https://github.com/junit-team/junit4/wiki/Download-and-Install
にアクセスしてjarファイルを入手
</dd>
  <dt>webdrivermanager</dt>
  <dd>https://github.com/bonigarcia/webdrivermanager/releases　にアクセスしてjarファイルを入手
  </dd>
<dt>selenium</dt>
  <dd>https://www.selenium.dev/downloads/　にアクセスしてjava用のzipファイルを入手
  <br/>
  解凍して、
  selenium-api、　selenium-chrome-driver、　selenium-chromium-driver、　selenium-remote-driver、selenium-supportのそれぞれのjarファイルを入手
  </dd>
  <dt>httpclient</dt>
  <dd>https://mvnrepository.com/artifact/org.apache.httpcomponents.client5/httpclient5/5.2.1　にアクセスしてjarファイルを入手
  </dd>
</dl>

上記でダウンロードした各jarファイルをgauge\plugins\java\0.11.0\libs配下に設置します。


その後、.classpathに以下のように追記します。(黄色の枠線部分が追記箇所)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702573/dbe85351-728b-8253-8fda-bfbfb98d10bc.png)

# コーディング
specファイルは以下のようにテストケースを記載します。
gaugeの大きな特徴はテストケースを日本語で記載できることです。
日本語で表現できることによって読みやすい・わかりやすいことはもちろんのこと、非エンジニアでも理解できることがメリットです。
~~~test.spec
検索後のタイトル設定
=====================
     
成功ケース
----------------
* グーグルを開く
* 検索文字"テスト"で検索する
* タイトルに"テスト - Google 検索"が設定されていること
失敗ケース
----------------
* グーグルを開く
* 検索文字"テス"で検索する
* タイトルに"テスト - Google 検索"が設定されていること
~~~

Javaファイルは以下のようにします
~~~Test.java
import com.thoughtworks.gauge.AfterSuite;
import com.thoughtworks.gauge.BeforeSuite;
import com.thoughtworks.gauge.Step;
import io.github.bonigarcia.wdm.WebDriverManager;
import org.junit.Assert;
import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class Test {
    static String APPLICATION_URL = "https://google.com";
    static WebDriver webDriver;
    // テスト開始時にWEBドライバを初期化
    @BeforeSuite
    public void initDriver() {
        WebDriverManager.chromedriver().setup();
        webDriver = new ChromeDriver();
    }
    // テスト終了時にWEBドライバを閉じる
    @AfterSuite
    public void closeDriver() {
        webDriver.close();
    }
    @Step("グーグルを開く")
    public void openApplication() {
        webDriver.get(APPLICATION_URL);
    }
    @Step("検索文字<searchText>で検索する")
    public void searchText(String searchText){
        // googleの検索ボックスはName要素にqが設定されている
        WebElement searchBox = webDriver.findElement(By.name("q"));
        searchBox.sendKeys(searchText);
        searchBox.sendKeys(Keys.chord(Keys.ENTER));
    }
    @Step("タイトルに<title>が設定されていること")
    public void checkTitle(String title) {
        Assert.assertEquals(title, webDriver.getTitle());
    }
}

~~~


# テスト実行
実行時はGUIでもCUIでもどちらでも可能です。
GUIの場合VSCodeではspecファイルを開いて、左上に「Run Spec」とあり押すと実行されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702573/08f56fbc-49ca-8706-4718-76f4018baf98.png)

CUIの場合
~~~
gauge run  --hide-suggestion --simple-console <<specファイルのパス>>
~~~
で実行できます。

実行するとChromeが自動で起動し、自動でテストされ「\reports\html-report」配下にテストレポートのhtmlファイルが自動生成されるはずです。

![screencapture-file-C-Users-syake-Documents-WebUITest-gauge-test-reports-html-report-specs-test-html-2024-06-26-00_07_25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702573/50cea96e-d89d-2978-89d7-5e0c56478d64.png)


# 参考にさせていただいたサイト
https://www.cresco.co.jp/blog/entry/11543.html