Edited at

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

More than 1 year has passed since last update.


はじめに

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セレクタで要素を指定できるので、テストコードの作成は実装が楽でした。

まだまだ触りたてなので、間違ったやり方やよい実装方法などあれば教えてください。