Selenideでテストコードを書いてみた

はじめに

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

Selenideとは

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

UIテストの流れ

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

1. ページを表示
2. 画面操作
3. 結果を確認

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セレクタで要素を指定できるので、テストコードの作成は実装が楽でした。
まだまだ触りたてなので、間違ったやり方やよい実装方法などあれば教えてください。