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

  • 17
    いいね
  • 0
    コメント

はじめに

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