Selenium + SpecFlow で「キャプションセレクタ」

※本稿は Selenium Advent Calendar 2013 の投稿記事です。

起 - Selenium

Selenium は言わずと知れた(?)、Webアプリケーションに対する自動化テストを実現するための様々なソフトウェア群。
とくにここでは、各種OS・各種プログラミング言語からWebブラウザを "自動操縦" する、一般に Selenium WebDriver と呼ばれる機能に焦点を当てた話題をとりあげる。

さてその Selenium。
自分の実際の業務においては、C# で記述した品質検査用プログラムが Web ブラウザを自動操縦するところで活用している。

承 - SpecFlow

しかしながら、品質検査用プログラム、すなわちテストコード、テストスクリプトは、生の C# コードでゴリゴリ書いてはいない。

C# でまずまずのボリュームの "部品" をそろえておく必要はあるのだが、それら "部品" を礎に、Gherkin 構文と呼ばれる文法によるテストシナリオ記述実装・技法を用いているのだ。

.NET Framework 環境では、このような仕組みを実現するために、「SpecFlow」というオープンソース製品を用いて品質検査用プログラムをビルドする。

具体的には、Gherkin 構文に則ったスクリプトを、下記サンプルのように、拡張子 .feature のテキストファイルとして保存しておく。
https://github.com/sample-by-jsakamoto/How-to-test-webapp-with-BJD/blob/master/BehaviorTest/SpecFlowFeature1.feature
尚、.feature ファイルに書く "手順" は日本語で記述するように実装することもできる。
下記のような具合。

Scenario: 参加者の登録

When URL http://localhost:49469/ を開く

And 要素 #Name に「bar」と入力

And 要素 #Email に「bar@example.com」と入力

And 要素 #Regist をクリック

その上で「SpecFlow」でこの .feature ファイルを "コンパイル" すると、MSTest や NUnit などをはじめとしたお好みのテストフレームワーク用の C# ソースコードに変換されて出力されるのだ。

x.feature -- SpecFlow --> x.feature.cs

Visual Studio の有償エディションである Professional 以上であれば、SpecFlow 用の Visual Studio アドインが使えるので、.feature ファイルを上書き保存するたびに、バックグランドで自動で C# ソースコードへの変換が行なわれる。

この Visual Studio 用 SpecFlow アドインは、さらに .feature ファイル編集時のインテリセンス機能も提供するため、仕事でバリバリ .feature ファイルを記述するなら、有償エディションの Visual Studio を購入しても十二分に元が取れるくらいだと思う。

※無償で利用可能な Visual Studio は、アドインをインストールできないという無償ならではの制限がある...。

承 - セレクタ指定

さて、そのように、Gherkin 構文による .feature ファイルにて、
「あの要素をクリックせよ」
「この要素に 15 と入力せよ」
「あの要素には FizzBuzz と表示されているか点検せよ」
といった "命令" を並べていく。

ということで、当然、「あの要素」「この要素」を指定するための "セレクタ" 構文を .feature ファイルに記述せざるをえなくなる。

しかし、Selenium Driver の API を直接たたいているわけではなく、先に書いたように、.feature ファイルに書かれた1行1行は、C# でかかれたメソッドに対応づけられ、その C# メソッドの呼び出しとして実行される。

すなわち、

.feature ファイルに記述された処理
　↓
自作の C# コード
　↓
Selenium WebDriver API

という構造になっている。

このため、
独自のセレクタ構文を編み出して、.feature ファイルにてその独自セレクタ構文を記述
するようにできるのだ。

これを活かして、以下のような .feature 構文を書けるようにしてある。

When 要素 #id をクリック

When 要素 .cssClassName をクリック

ご推察いただけると思うが前者は要素の id 属性値をもとに要素を特定する ID セレクタ、後者は CSS クラス名をもとに要素を特定するクラスセレクタとしての構文だ。

前者は最終的に FindElemet(By.Id(x)) に、後者は FindElement(By.ClassName(x)) にたどり着くように、中間の自作 C# コードをあつらえてある。


だがしかし、である。

IDセレクタやクラスセレクタだけでは、正直、.feature ファイルを量産しにくい。

とくにシステムテスト、結合テストとして、上記で紹介したような自動化テストを実践する場合は、基本的にテスト対象の Web アプリはブラックボックスなのが大抵である。

「あのボタンをクリックする処理を .feature ファイルに書きたい」となると、
いちいちブラウザの開発者ツールを開いて、DOMインスペクタで目的のボタンの ID 値を調べなくてはならない。

おまけに、せっかく .feature ファイルは日本語で記述でき、流し読みできるようになっているのに、いきなり ID 値や CSS クラス名がでてくるわけで、いったい何をクリックしたかったのか、一見してわかりにくいという面もある。

キャプションセレクタを発明

そこで。

「キャプションセレクタ」というのを発明(?)した。

なにかというと、
ブラウザの表示上に見えている文言で要素を選択
するのだ。

具体定期には、[caption] と書いたら、以下のどれかの条件に該当する要素を特定するのである。

• value 属性値が　"caption" であるinput:submit 要素
• innerText 値が "caption" である a 要素
• innerText 値が "caption" である button 要素
• innerText 値が "caption" である label 要素、の for 属性値によって id セレクトされる要素

とくにいちばん後者が便利である。

実装時の協力も必要だが、

<label for="co-operator">協力者氏名</for>

<input id="co-operator" name="co_operator" type="text"/>

というようにビューを実装しておけば、.feature ファイルには、

When 要素 [協力者氏名] に「太郎」と入力

というように記述できるのだ。

これでいちいち開発者ツールを広げたり要素の ID 値を調べたりすることなく、テスト対象の Web アプリ画面を横目に、.feature ファイルを記述していける。

結

SpecFlow を用いることで、生の Selenium WebDriver API の上に、Gherkin 構文用の追加レイヤーを C# で記述することになる。
その独自の C# コードのレイヤー上に独自のセレクタ構文を編み出すことができ、そして "キャプションセレクタ" はなかなか便利だという話であった。

ちなみに、この仕組みのせいかどうかははっきりしないが、今のところ「ページオブジェクトパターン」は用いていないけれども、書きためたテストコードの保守にあたって、要素の id 値や name 値の変更で大変な目に遭った、という経験が未だない。

ひとつご参考まで。