はじめに

前回はkarateを使用してREST APIのテストを書きました。次はWebUIのテストの書き方をまとめます。REST APIの書き方とほとんど同じなので、前回と今回の2つを合わせるとkarateの魅力を感じられると思います。

環境

IntelliJ：2020.1.3
Java:11
Gradle:7.0

環境作成

前回の環境作成と同じなので、そちらを確認してください。

テストソースの作成

前回と同様karateを使用するので、必要なものはJavaファイルとfeatureファイルの2つで変わりません。

Javaファイルの作成

Javaファイルは前回とほとんど同じです。ただ、今回はテスト前に環境変数をリセットするようにしていますが、あまり関係ないです。（最終的には設定ファイルで設定するはずです）

package com.karate.ui;
import com.intuit.karate.junit5.Karate;
import org.junit.jupiter.api.BeforeEach;

public class LoginPage {
    @BeforeEach
    public void beforeClass() {
        // 環境変数をリセットする
        System.setProperty("karate.env", "mock");
    }
    @Karate.Test
    Karate loginPageTest() {
        // loginPage.featureを読み取るように定義
        return Karate.run("loginPage").relativeTo(getClass());
    }
}

featureファイルの作成

次にfeatureファイルを作成します。ここが、前回と最も違うところです。

Webブラウザの設定

WebUIをテストするので、ブラウザを開くための設定をconfigure driverにします。下の例ではchromeを使用すること以外は設定していないのですが、{ type: 'chrome', headless: true }と設定するとヘッドレスモードで起動します。他にも様々な設定があるので公式を見てみてください。

Feature: UI操作
  # driverの設定. chromeを設定
  Background:
    * configure driver = { type: 'chrome' }

テストシナリオの作成

ブラウザの設定が出来たので次はテストシナリオを描いていきます。書き方としては、前回と同様Gherkin形式で記載していきます。違う点はdriverにURLを指定する点、それぞれの処理をWebUI用の関数経由を使用する点の2つです。

Feature: UI操作
  # driverの設定. chromeを設定
  Background:
    * configure driver = { type: 'chrome' }

  Scenario: loginPage start
    # URLを入力
    Given driver 'http://localhost:3000'

    # テキスト入力
    And input('#my-account', 'dummy')
    And input('#my-password', 'dummy')
    # select選択（material-uiを使用しているので、karateのselectは使用できない）
    And mouse('#simple-select').click()
    # selectが開いた状態で下ボタンとエンターを押す。（bodyは特に対象を指定せずにWeb画面全体をさす）
    And input('body', [Key.DOWN, Key.ENTER])
    # クリックする
    When mouse('[name=commit]').click()
    # 画面遷移後にメッセージ文字列が表示されるかチェックする
    Then match text('.MuiInputLabel-root') contains 'メッセージ'

テストの実行

テストの実行方法は前回と同じです。

テスト結果

実行するとブラウザが開いて自動的にWeb操作が行われます。
全ての結果がOKならこのようにpassedとなります。

seleniumとの比較

それぞれのソースコード

selenium

例で書いたのはユーザ名とパスワードを入力して画面遷移するソースを書きました。

package sample.selenium.test;

import java.io.File;
import java.io.IOException;
import java.nio.file.Files;

import org.junit.AfterClass;
import org.junit.Before;
import org.junit.BeforeClass;
import org.junit.Rule;
import org.junit.Test;
import org.mockserver.client.MockServerClient;
import org.mockserver.junit.MockServerRule;
import org.mockserver.model.Header;
import org.mockserver.model.HttpRequest;
import org.mockserver.model.HttpResponse;
import org.openqa.selenium.Alert;
import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
public class TestProfile {
    private static WebDriver driver = null;

    @BeforeClass
       public static void setUpBeforeClass() throws Exception {
        System.setProperty("webdriver.chrome.driver", "driver/chromedriver.exe");

        ChromeOptions options = new ChromeOptions();
        driver = new ChromeDriver(options);
    }

    @Before
       public void setUpBefore() throws Exception {
        driver.get("http://localhost:3000");
    }

    @AfterClass
       public static void tearDownAfterClass() throws Exception {
        driver.close();
    }

    @Test
    public void loginCheck() {
        WebElement myAccount = driver.findElement(By.id("my-account"));
        myAccount.sendKeys("user");
        WebElement myPassword = driver.findElement(By.id("my-password"));
        myPassword.sendKeys("pass");
        WebElement buttonElement = driver.findElement(By.id("input-button"));
        buttonElement.sendKeys(Keys.ENTER);
        String url = driver.getCurrentUrl();
        assert(url).contains("http://localhost:3000/message");
    }
}

karate