Seleniumの弱点を補うブラウザ自動テスト用フレームワーク「Selenide」とは（2/3 ページ）

Webアプリケーションのテスト自動化に特化したJava用のフレームワーク「Selenide」は、人気のある「Selenium」と比べて大きなアドバンテージがある。使い方やコードを交えて解説しよう。

[今泉俊幸，株式会社ビーブレイクシステムズ]

Selenideのテストコードの実装方法

　Selenideを使ったブラウザテストのコードの書き方を見ていきます。Selenideを使った自動テストの書き方は、以下のような手順です。

1. テスト対象のURLを開く
2. テスト対象の要素（ボタンやテキストボックスなど）を取得する
3. テスト対象の要素に対し操作（クリックやキー入力）を行う
4. 操作結果のアサーションを行う

　紹介するサンプルコードを含んだEclipseプロジェクトはこちらからダウンロードできます。サンプルプロジェクトを実行する際は幾つか準備することがあるため、プロジェクト内のREADMEファイルを参照してください。

【1】テスト対象のURLを開く

　まずは「ブラウザを起動し指定のページを開く」というコードを見てみます。ページを開くには、「com.codeborne.selenide.Selenide」クラスのstaticメソッドである「open」メソッドを利用します。以下のコードを実行すると、ブラウザが起動し「http://localhost:8080/calc.html」を開いた後、すぐにブラウザが閉じます。デフォルトでは利用されるブラウザはFirefoxです。

import static com.codeborne.selenide.Selenide.open;
 
import org.junit.Test;
 
public class OpenTest {
    @Test
    public void addTest() {
        open("http://localhost:8080/calc.html");
    }
}

指定のURLをブラウザで開くだけのコード

　利用するブラウザを変更したい場合、以下のように「com.codeborne.selenide.Configuration」クラスの「browser」フィールドの値を変更することで対応できます。

import com.codeborne.selenide.Configuration;
import com.codeborne.selenide.WebDriverRunner;
 
……
 
@BeforeClass
public static void setUp() {
    Configuration.browser = WebDriverRunner.CHROME;
}

　コードを修正せず、プログラムの実行時引数の指定でも利用するブラウザを変更することができます。メニューから「Run」→「Run Configurations…」を選択し、「Arguments」タブの「VM arguments」に以下を入力してください。

-Dselenide.browser=chrome

　指定するブラウザ名は「com.codeborne.selenide.WebDriverRunner」の定数の値を見ることで確認できます。

　もしここで実行時に何らかのエラーが出てしまった場合、「利用するブラウザ」と「対応するWebDriver」がどちらも最新バージョンであるか確認してみてください。ブラウザのバージョンとWebDriverのバージョンが一致していないと、エラーが出ることがあります。

　また上記の例では、テスト対象のURLを絶対パスで指定していますが、基準となるURLを設定し、そこからの相対パスで指定することも可能です。基準となるURLはデフォルトでは「http://localhost:8080」となっているため、openメソッドの引数を「/calc.html」としても、同じように動作します。

　基準となるURLの設定は、利用するブラウザを変更する際と同様に「Configurationの値を変更する」「実行時引数を指定する」ことで変更可能です。値を設定するプロパティ名は「baseUrl」です。実行時引数で指定する場合は「-Dselenide.baseUrl=http://example.com」のように値を設定します。ローカル環境でもテスト環境でも同じテストコードで動かせるよう、テスト対象のURLは絶対パスで記述するのではなく相対パスで書いておくといいでしょう。

【2】テスト対象の要素を取得する

　Webページ上から操作したい対象の要素を取得するためには、Selenideクラスのstaticメソッドである「$」メソッドを使います。このメソッドの引数に対し、「By」という要素の取得方法を表すクラスを渡すことで、返り値として対象の要素を表す「SelenideElement」クラスのインスタンスを取得できます。Byのインスタンスは「com.codeborne.selenide.Selectors」クラスのstaticメソッドを使って生成します。

• 要素の属性を指定した取得方法

　まずはHTML中の以下の要素を取得するコードの例を見てみます。

<input type="text" id="value1" class="ui-input" />

　上記の要素を取得するためには、IDを指定する「byId」メソッド、CSSのクラス名を指定して取得する「byClassName」メソッド、任意の属性の値を参照する「byAttribute」メソッドが利用できます。サンプルコードは以下の通りです。

import static com.codeborne.selenide.Selectors.byAttribute;
import static com.codeborne.selenide.Selectors.byClassName;
import static com.codeborne.selenide.Selectors.byId;
import static com.codeborne.selenide.Selenide.$;
 
import com.codeborne.selenide.SelenideElement;
 
……
 
@Test
public void selectorTest() {
    open("/simpleSelector.html");
 
    // ID指定で取得
    SelenideElement byIdElem = $(byId("value1"));
 
    // CSSのクラス名指定で取得
    SelenideElement byStyleElem = $(byClassName("ui-input"));
 
    // 任意の属性の値指定で取得
    SelenideElement byAttrElem = $(byAttribute("type", "text"));
}

　上記で利用したメソッド以外にも、以下のメソッドが要素の取得に利用できます。

メソッド名	意味
byText(String)	テキストが引数に完全一致する要素を取得する
withText(String)	テキストが引数に部分一致する要素を取得する
byValue(String)	valueが引数に一致する要素を取得する
byName(String)	nameが引数に一致する要素を取得する

• 構造を指定した要素の取得方法

　上記のように、IDや属性の値で一意に操作したい要素を取得できればいいのですが、「指定のIDを持つtableタグの中にある最初のtr要素」といったように、HTMLの構造を考慮して要素を取得したい場合もあります。この場合は、「CSSセレクタ」、もしくは「XPath」という形式を使って要素を指定できます。

　今回はCSSセレクタを使った例を紹介します。

• CSSセレクタを使った要素の取得

　CSSセレクタとは、CSSを適用する対象のHTML要素を選択するための記述方法です。基本的なCSSセレクタとしては、以下のようなものがあります。

セレクタの種類	記述例	意味
タイプセレクタ	input	「input」というタグ名の要素
クラスセレクタ	.classname	「classname」というclass属性の値を持つ要素
IDセレクタ	#userCode	「userCode」というIDを持つ要素
属性セレクタ	attr="value"	「attr」という属性の値がvalueである要素
コンビネータ	table input	tableタグの中にあるinputタグ

　また、上記のセレクタの後ろに、コロンとともに付けて条件を付与する「疑似クラス」という記述もあります。

疑似クラス名	記述例	意味
first-child	table td:first-child	tableタグの中で最初のtdタグ
nth-child()	table td:nth-child(2)	tableタグの中で2番目のtdタグ
checked	input[type=”radio”]:checked	チェックされているラジオボタン
focus	input:focus	フォーカスが当たっているinputタグ

　その他のCSSセレクタについてはこちらを参照してください。

　CSSセレクタを使って要素を取得するにはSelectorsクラスの「byCssSelector」メソッドを利用して「By」のインスタンスを作成します。また、「$」メソッドの引数に「By」ではなく、文字列でCSSセレクタを渡すことも可能です。

　下記HTMLの10行目のinputタグを、CSSセレクタを使って取得したいとしましょう。

<table id="employeeTable" class="editable-table">
  <thead>
    <tr>
      <th>社員番号</th>
      <th>名称</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input id="employeeCode1" type="text" class="ui-input" /></td> <!-- この行の要素を取得する -->
      <td><input id="employeeName1" type="text" class="ui-input" /></td>
    </tr>
    <tr>
      <td><input id="employeeCode2" type="text" class="ui-input" /></td>
      <td><input id="employeeName2" type="text" class="ui-input" /></td>
    </tr>
  </tbody>
</table>

サンプルHTML

　その実装例は以下のようになります。

@Test
public void selectorTest() {
    open("/structSelector.html");
 
    // IDがemployeeCode1である要素を取得
    SelenideElement cssSelectorElem = $("#employeeCode1");
  
    // 「editable-table」というスタイル名を持ったtableタグの中で最初のtdタグの中にあるinput要素を取得
    SelenideElement cssSelectorElem2 = $("table.editable-table td:first-child input");
  
    // 「employeeTable」というIDを持ったtableタグの中で、typeが「text」である最初のinput要素を取得
    SelenideElement cssSelectorElem3 = $("table#employeeTable input[type=\"text\"]:first-child");
}

サンプルコード

• XPathを使った要素の取得

　XPathを使って要素を取得したい場合はSelectorsクラスの「byXpath」メソッドの引数にXPathの文字列を渡すことで利用できます。XPathを利用する例はサンプルプロジェクトを参照してください。

　また、XPathの基本的な使い方についてはこちらを参照してください。