はじめに

E2EテストをSelenideで実装していたので、簡単に使い方のメモを残しておきます。

Selenideとは

WebページをUIテストのためのSeleniumをWrapperしたJavaライブラリ
ブラウザの設定などはライブラリ内でデフォルトを設定している
公式サイト(http://selenide.org/)

UIテストの流れ

UIテストの大まかな流れとしては以下の順番になります。

ページを表示
画面操作
結果を確認

UIテストの流れをSelenideでコード化すると以下の通り

    Selenide.open("URL");  // ページを表示
    Selenide.$("#textarea").setValue("Hello World");  // テキストエリアに文字を挿入
    Selenide.$("#button").click();  // ボタンをクリック
    Selenide.$("#result")shouldHave(text("Success!")); // 結果を確認

とりあえず動かしてみる

実装環境
- IntelliJ Idea15
- Java8
事前準備
- gradle.dependenciesにSelenideライブラリを追加
```
dependencies {
  testCompile 'com.codeborne:selenide:4.1'
}
```
SeleniumやWebDriverなどの依存関係があるライブラリもインストールされる。
サンプルソース

    import com.codeborne.selenide.Selenide;


    public class SampleTest {
        public void test() {
            Selenide.open("http://example.com");
            Selenide.$("input[type=textarea]").setValue("Hello World!");
            Selenide.$("input[type=button]").click();
        }
    }

実行してみると、Firefoxが起動され、Selenide.open("URL")で指定したWebページにアクセスされました。

他に画面操作に関するAPI

Selenide.refresh();
Selenide.close();
Selenide.doubleClick();
Selenide.hover();
Selenide.submit();

テストコード

Selenideでアサーション用のメソッドも提供されている。

    import com.codeborne.selenide.Selenide;
    import com.codeborne.selenide.Condition;


    public class AssertionTest {
        public void test() {
            Selenide.open("URL");
            Selenide.$("input[type=textarea]").setValue("Hello World!");
            Selenide.$("input[type=button]").click();
            Selenide.$("img").should(Condition.disappear);
            $("#message").shouldHave(text("Hello World!"));
        }
    }

JUnitでもアサーションをすることが可能

    import com.codeborne.selenide.Selenide;
    import org.junit.Test;

    import static org.hamcrest.CoreMatchers.is;
    import static org.junit.Assert.assertThat;

　　　　　　　　＠Test
    public class AssertionTest {
        public void test() {
            Selenide.open("URL");
            String browserTitle = Selenide.title();
            assertThat(browserTitle, is("Title"));
   
            Selenide.$("input[type=textarea]").getText();
            assertThat(textArea, is(""));
            Selenide.$("input[type=textarea]").setValue("Hello World!");

            Selenide.$("input[type=button]").click();
            Selenide.$("img").should(Condition.disappear);

            $("input[type=textarea]").shouldHave(text("Hello World!"));
        }
    }

実装中にハマったこと

あるWebページから呼び出した子ウィンドウ内のCSS要素を取得できなかった

→ Selenide.open()から別ウィンドウを呼び出す際にSelenide.switchTo.window(index) で操作対象のウィンドウを切り替える必要があった。
UIテストで使用するブラウザに対するオプション設定がSelenide内ではできなかった

→ 自分でWebDriverを用意して、DesiredCapabilitiesからオプション項目を設定し、WebDriverを起動する必要があった。(このあたりは調べきれていないので、正しいかどうか不明)

感想

WebDriverの設定やブラウザの操作(テスト終了後に閉じる、接続のタイムアウト)などは、Selenide側の初期処理や設定値が適用されるので、実装時には考慮しなくて済み、テストコードの作成に注力できると感じました。
Selenium側で要素のxPathを取得してブラウザ操作するより、jQueryライクにCSSセレクタで要素を指定できるので、テストコードの作成は実装が楽でした。
まだまだ触りたてなので、間違ったやり方やよい実装方法などあれば教えてください。