Javaで簡単にUIテストを書けるSelenideを使おう～Selenideの概要とテストの保守性を上げるPage Objectパターンの紹介

手順[2]

画面の要素取得

　画面上の要素の取得方法は、基本的には実際に画面に遷移したのち、ブラウザの開発者ツールにて対象部分を選択し、IDを取得するのが一般的です。今回対象となった画面もすべてIDが振られているのでこの方法を使います。

　Selenideで要素取得を行うメソッドで一番一般的なものは com.codeborne.selenide.Selenide.$で、引数でjQueryと同様のCSSセレクタを文字列表現でとります。

　ここではID指定なので必ず1件返ってきますが、クラス指定などで複数件返る場合はcom.codeborne.selenide.Selenide.$$を使います。どちらもCSSセレクタ以外の引数でも使えるのですが、詳細はJavaDocを参照してください。これらのメソッドの戻り値は単数の場合がcom.codeborne.selenide.SelenideElement、複数の場合がcom.codeborne.selenide.ElementsCollectionで、要素をラップしたもので要素に対する操作メソッドを持っています。また、ここからさらに検索や絞り込みを行うことも可能です。

　selenideでは以下のクラスの静的メソッドをstatic importすることでDSLのような表現が可能となります。

• 要素の検索やURLを開くなど基本的な操作を行う：com.codeborne.selenide.Selenide
• セレクタの条件を表現する：com.codeborne.selenide.Selectors
• 要素の状態を表現する：com.codeborne.selenide.Condition

　入力画面での要素選択部分を実際に書いてみると以下のようになります。

package com.example.selenide.page.base;

import com.codeborne.selenide.SelenideElement;

import static com.codeborne.selenide.Selenide.*;
import static com.codeborne.selenide.Selectors.*;
import static com.codeborne.selenide.Condition.*;

public abstract class InputPageBase {

    protected SelenideElement ReserveYear() {
        return $("#reserve_year");
    }

    protected SelenideElement ReserveMonth() {
        return $("#reserve_month");
    }

    // 中略

    protected SelenideElement PlanB() {
        return $("#plan_b");
    }

    protected SelenideElement GuestName() {
        return $("#guestname");
    }

    protected SelenideElement GotoNext() {
        return $("#goto_next");
    }
}

　ここでメソッドの可視性をprotectedにしたのは、テストクラスからこれらの要素取得の直接操作を防ぐためです。

　確認画面、完了画面も同じように実装していきます。

要素への操作

　先ほど作成したのは要素の取得部分だけなので、次に要素に対する操作を記述していきます。

　入力フィールドには設定および必要に応じて取得、チェックボックスのチェックやラジオボタンの選択などが一般的な操作になります。

　先ほどの要素取得実装時に、戻り値をSelenideElementとしましたが、振る舞いに対応した代表的なメソッドは以下のようなものがあります。

• 入力フォームなどへの値の設定：val(String)
• 入力フォームなどからの値の取得：val()
• テキスト要素：text()
• ボタン押下：click()

　これ以外にも、さまざまなものがあるのでJavaDocをご参照ください。

　ボタンを押下することで画面遷移が発生する場合、遷移先のPage Objectが必要になります。そのため、ボタン押下の振る舞いメソッド内でPage Objectの生成も記述します。生成方法はcom.codeborne.selenide.Selenide#page(java.lang.Class<PageObjectClass>)を呼び出します。

　これらをもとにして入力画面については以下のようになります。

package com.example.selenide.page;

import com.example.selenide.page.base.InputPageBase;

import static com.codeborne.selenide.Selenide.*;
import static com.codeborne.selenide.Selectors.*;
import static com.codeborne.selenide.Condition.*;


public class InputPage extends InputPageBase {

    public String getReserveYear() {
        return ReserveYear().val();
    }

    public void setReserveYear(String year) {
        ReserveYear().val(year);
    }

    // 中略

    public boolean isBreakfastOn() {
        return BreakfastOn().is(selected);
    }

    public void setBreakfastOn() {
        BreakfastOn().click();
    }

    public boolean isBreakfastOff() {
        return BreakfastOff().is(selected);
    }

    public void setBreakfastOff() {
        BreakfastOff().click();
    }

    public boolean isPlanA() {
        return PlanA().is(selected);
    }

    public void setPlanA(boolean check) {
        PlanA().setSelected(check);
    }

    // 中略

    public String getGuestName() {
        return GuestName().val();
    }

    public void setGuestName(String name) {
        GuestName().val(name);
    }

    public CheckInfoPage clickGotoNext() {
        GotoNext().click();
        return oepn(CheckInfoPage.class);
    }

}