C#、ASP.NET、TypeScript、Angular を中心にプログラミングに関した話題を諸々。
by @jsakamoto
検索
リンク
北海道のITコミュニティ - CLR/H 無聊を託つ
タグ
カテゴリ
最新の記事
ASP.NET Core で..
at 2019-07-06 23:02
Azure Storage ..
at 2019-06-09 13:15
node のバージョンあげた..
at 2019-05-24 19:43
.NET HTTP REPL..
at 2019-04-23 00:19
C# プログラムでの Exc..
at 2019-03-31 22:44
最新のコメント
同じ問題で悩んでいました..
by yonas at 12:32
Mac(Chrome)で..
by Macユーザー at 00:46
すみません、記事書きかけ..
by developer-adjust at 22:36
続きはないんですか?
by hanamo at 13:03
助かりました。ありがとう..
by あああ at 21:32
いえす、F#! F#! :)
by developer-adjust at 21:46
F#はAzure Not..
by 幻のK泉さん at 18:37
> 今、Setcronj..
by developer-adjust at 08:25
今、Setcronjob..
by Kibe at 03:23
Jichym 改め yi..
by yi at 23:00
記事ランキング
最新のトラックバック
Web API における..
from 松崎 剛 Blog
[Other]Code2..
from KatsuYuzuの日記
Developer @ ..
from .NET Clips
asp.netでrail..
from 4丁目より
F#でASP.NET M..
from ナオキにASP.NET(仮)
[B!] これはいい h..
from Twitter Mirror
[報告] Microso..
from .NET Clips
Developer @ ..
from .NET Clips
[F#]F# でブログア..
from 予定は未定Blog版
ASP.NET MVC ..
from ナオキにASP.NET(仮)
以前の記事
2019年 07月
2019年 06月
2019年 05月
2019年 04月
2019年 03月
2019年 02月
2019年 01月
2018年 12月
2018年 11月
2018年 10月
2018年 09月
2018年 08月
2018年 07月
2018年 06月
2018年 05月
2018年 04月
2018年 03月
2018年 02月
2018年 01月
2017年 12月
2017年 11月
2017年 10月
2017年 09月
2017年 08月
2017年 07月
2017年 06月
2017年 05月
2017年 04月
2017年 02月
2017年 01月
2016年 12月
2016年 11月
2016年 10月
2016年 09月
2016年 08月
2016年 07月
2016年 06月
2016年 05月
2016年 04月
2016年 03月
2016年 02月
2016年 01月
2015年 12月
2015年 11月
2015年 10月
2015年 09月
2015年 08月
2015年 07月
2015年 05月
2015年 04月
2015年 03月
2015年 02月
2015年 01月
2014年 12月
2014年 11月
2014年 10月
2014年 09月
2014年 08月
2014年 06月
2014年 04月
2014年 03月
2014年 02月
2014年 01月
2013年 12月
2013年 10月
2013年 09月
2013年 08月
2013年 07月
2013年 06月
2013年 05月
2013年 04月
2013年 03月
2013年 02月
2013年 01月
2012年 12月
2012年 11月
2012年 10月
2012年 09月
2012年 08月
2012年 07月
2012年 06月
2012年 05月
2012年 04月
2012年 03月
2012年 02月
2012年 01月
2011年 12月
2011年 11月
2011年 10月
2011年 09月
2011年 08月
2011年 07月
2011年 06月
2011年 05月
2011年 04月
2011年 03月
2011年 02月
2011年 01月
2010年 12月
2010年 11月
2010年 10月
2010年 09月
2010年 08月
2010年 07月
2010年 06月
2010年 05月
2010年 04月
2010年 03月
2010年 02月
2010年 01月
2009年 12月
2009年 10月
2009年 09月
2009年 07月
2009年 06月
2009年 05月
2009年 04月
2009年 03月
2009年 02月
2009年 01月
2008年 12月
2008年 11月
2008年 10月
2008年 09月
2008年 08月
2008年 07月
2008年 06月
2008年 05月
2008年 04月
2008年 03月
2008年 02月
2008年 01月
2007年 12月
2007年 11月
2007年 04月
2007年 03月
2007年 02月
2007年 01月
2006年 11月
2006年 10月
2006年 09月
2006年 08月
2006年 07月
ファン
ブログジャンル
画像一覧
2013年 12月 24日

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 値の変更で大変な目に遭った、という経験が未だない。

ひとつご参考まで。
 
by developer-adjust | 2013-12-24 23:01 | Selenium | Comments(0)
2013年 12月 17日

Selenium - 背景画像のチェックでブラウザ互換問題に遭遇

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


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

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

そんなある日、とある不具合にぶちあたった。

自動化テスト対象のとある Web アプリにおいて、しかるべき操作の結果、ある HTML 要素に対して CSS による背景画像が設定されたかどうかを点検するコードを実装していた。

具体的には、以下のようなコードで background-image CSS属性を取得し、その設定値(文字列)が「url("http://host/image.png")」であることをチェックしていた。
var val = webDriver
.FindElement(By.Id("target"))
.GetCssValue("background-color");
Assert.AerEqual("url(\"http://host/image.png\")", val);
ところが、この自動化テスト、ブラウザとして IE と FIrefox を使ったときには正しくパスするのに、
Google Chrome を使ったときはテストが失敗してしまう
のだ。

しかし改めて手動で操作してみてブラウザ上の表示を人の目で見てみるぶんには、Chrome でも正しく背景画像が表示されているように見える。

にもかかわらず、自動化テストコードは、Chrome で実行した場合に限り、「そんな背景画像は設定されていない」と判定されてしまうのだ。

待てよと思い直し、まずはブラウザに備え付けの F12 開発者ツールウィンドウを広げて、コンソール上から点検してみることにした。

そこで各ブラウザで以下の JavaScript を走らせてみたのだ。
$("#target").css("background-image")
するとなんということか、結果として返ってくる CSS スタイル文字列に相違があったのだ。

Chrome では以下のような文字列となっていた。
url(http://host/image.png)
しかし IE と Firefox では以下のように
画像の URL がダブルクォーテーションで囲われていた
のだ。
url("http://host/image.png")
自分が書いたテストコードは、IE で実行しながら完成したものであったため、それで IE と Firefox のときは成功し、しかしダブルクォーテーションを含まずに返す Chrome の場合は、ダブルクォーテーションを含む期待値と完全一致はしないため、不一致によるテスト失敗となっていたわけだ。

ということで、幸い、原因が究明できたため、background-image CSS 属性の値を検証するときは、正規表現ベースで値を確認しつつ、ダブルクォーテーションをなしに正規化してから一致比較するよう、テストコードの実装を改善した。
var m = Regex.Match(val, @"^url\(""?(?[^""\(\)]+)""?\)$");
val = m.Success ? "url(" + m.Groups["path"].Value ")" : val;

by developer-adjust | 2013-12-17 21:06 | Selenium | Comments(0)
2013年 12月 10日

Selenium - スクロール外でClickできないことがあった

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


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

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

そんなある日、とある不具合にぶちあたった。

自分の開発マシン上では正常に動作する Selenium 利用による自動化テストシナリオが、品質検査担当者の環境ではなぜか失敗するのだ。

ログを確認すると、シナリオの途中で "Webページ上のあるボタンをクリックせよ" というステップがあるのだが、そのボタンクリックが動作していないことがわかった。

自分の開発マシンでは正しくクリックされるのに、品質検査担当者による模擬環境ではクリックされない。

Selenium WebDriver による Web ページ上の要素のクリックなんぞは、あまりに基礎的な機能なだけに、どんな不具合が一体あるというのか想像も難しくしばし途方に暮れた。

と、ふと品質検査担当の模擬環境とで佇んでいるブラウザの様子に目を留めると...

クリック対象のボタンが、見えてはいるのだが、
半分くらいスクロール領域外にはみ出していた
のだ。

解像度が異なる自分の開発環境では、そのボタンは、きっちりクライアント領域内にすべて収まっていた。

まさか、まさか、
たった半分ほどスクロールアウトしていることが原因
なのか?

ということで、クリック処理を次のように書き換えてみた。
var element = webDriver.FindElement(By.Id(idOfElementToClick));
var remote = element as RemoteWebElement;
var hack = remote.LocationOnScreenOnceScrolledIntoView;
element.Click();
LocationOnScreenOnceScrolledIntoView プロパティを "参照" しているところがミソ。

LocationOnScreenOnceScrolledIntoView プロパティを参照することにより、対象の要素をスクロール領域内にまでスクロール位置を進めたうえで、その座標が取得できる。

要素の座標には興味はないが、
対象要素を確実にスクロール域内まで引き込んでくれる
のが狙い。
そのうえで要素のクリックを実行するわけだ。


結果、問題のボタンクリックが確実に動作するようになった。

なお、今回遭遇したこの問題は、すべてのブラウザに対して発生するかどうかは不明。
自分が掌握している限りでは、IE8 では発生していた。

いずれにせよ、これで誰の環境でも、以前より安定して Selenium による自動化テストが実行されるようになった。
 
by developer-adjust | 2013-12-10 00:07 | Selenium | Comments(0)
2013年 12月 03日

Selenium - ブラウザのズーム機能のせいで Click がうまくいかない

Selenium Advent Calendar 2013 への投稿。

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

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

そんなある日、とある不具合にぶちあたった。

自分の開発マシン上では正常に動作する Selenium 利用による自動化テストシナリオが、品質検査担当者の環境ではなぜか失敗するのだ。

ログを確認すると、シナリオの途中で "Webページ上のあるボタンをクリックせよ" というステップがあるのだが、そのボタンクリックが動作していないことがわかった。

自分の開発マシンでは正しくクリックされるのに、品質検査担当者による模擬環境ではクリックされない。

Selenium WebDriver による Web ページ上の要素のクリックなんぞは、あまりに基礎的な機能なだけに、どんな不具合が一体あるというのか想像も難しくしばし途方に暮れた。

と、ふと品質検査担当の模擬環境で佇んでいるブラウザのステータスバーに目を留めると...








d0079457_21540290.png

... ズーム倍率が 105% になっている!

人間が見た目には、ズーム倍率が 105% になっても、ページが拡大表示されているとはなかなか気づけない。

だがしかし、もしかしてこれが原因で、要素のクリックに失敗しているのではないかと推測し、ズーム倍率を 100% にリセットして自動化テストシナリオを実行したところ...

無事成功した!

ということで、以後、指定の URL にナビゲーションする際は、以下のコード (C#) によってキーボードからの「Ctrl + 0」押下をエミュレートし、ブラウザのズーム倍率を 100% にリセットする処理を常に実行するようにした。

webDriver
.FindElement(By.TagName("body"))
.SendKeys(Keys.Control + "0");

 これで誰の環境でも、以前より安定して Selenium による自動化テストが実行されるようになった。
by developer-adjust | 2013-12-03 08:04 | Selenium | Comments(0)
2013年 09月 24日

Selenium WebDriver - SendKeys で半角カナを入力する

Webブラウザを自動操縦する Selenium

Web ブラウザをプログラムから操作することができるようになる、WebアプリのUI層からの自動化テストを支援するオープンソースのライブラリ & 実行環境「Selenium」。

今回はとくにその二世代目に当たる「Selenium2」=「Selenium WebDriver」についての話題。

ちなみに「Selenium とは何か?」に関するネット上の参考情報としては、例えば下記などが参考になるだろうか。

@IT「iPhone/Android含むブラウザ自動テストの最終兵器Selenium WebDriverとは」
http://www.atmarkit.co.jp/ait/articles/1210/05/news104.html

Selenium がうまく動作しない問題領域、それは...

このようにUIの自動化テストを実現するための強力な武器となる Selenium なのだが、些細なことながら、うまく動作しないケースがあった。

半角カナが入力できない
のである。

Selenium WebDriver を使って、ブラウザ上から input 要素に文字列を入力する C# によるコード例は以下のようになる。
var driver = new InternetExplorerDriver();
driver.Navigate().GoToUrl(url);
var textbox1 = driver.FindElement(By.Id("textbox1"));
textbox1.SendKeys("Hello World");
ところがこのコードを次のように書き換えて実行すると、
var driver = new InternetExplorerDriver();
driver.Navigate().GoToUrl(url);
var textbox1 = driver.FindElement(By.Id("textbox1"));
textbox1.SendKeys("アイウエオ");
input 要素には、期待した「アイウエオ」ではなく「3e456」などとまったく見当違いな文字列が入力されてしまうのだ。

回避策はあるが完璧ではない...

回避策がまったくないわけではない。

下記ブログ記事では、Selenium WebDriver が備える JavaScript コードの注入/実行機能によって、input 要素の value 値を直接設定する方法が紹介されている。

好きなことを好きなぶんだけ - Selenium 2 (WebDriver) でinput項目に半角カナを入力する
http://ykmc09.blogspot.jp/2012/11/selenium-2-webdriver-input.html

しかしながら、value 属性値に直接値を設定してしまうのでは、マスク入力の挙動を確かめたいテストを実施するときには、この技法ではテストにならない。
(マスク入力を実装する JavaScript コードによるキーボードイベントハンドリングを完全に迂回してしまうので)

...fork!

ということで、ずっとこの「Selenium 半角カナ問題」には悩まされていた。

しかし Selenium はオープンソースであり、修正を受け付けている。
さらに GitHub にミラーまで用意されている。

ということでようやく重い腰を上げて、GitHub にある Selenium のソースコードミラーを fork した。

すべての WebDriver で対処したわけではないが、取り急ぎ、Windows OS における Internet Explorer Driver を修正できるか着手してみた。

するとどうやら、SendKeys API 呼び出しが紆余曲折を経てたどり着いたキーボード打鍵をエミュレートする箇所で、キーボードのスキャンコードの上位8bitを無視して下位8bitのみに削りとってしまっているのが原因であることはが判明。

SetKeyboadrState Win32 API を使って半角カナの入力をエミュレートする方法は、残念ながら自分にもわからなかった。
そこでとりあえず、スキャンコードの上位8bit中の特殊フラグ:「Hankaku Key Pressed」がゼロじゃないときは、IME を介した入力と同様の Windows メッセージによるエミュレート処理へ分岐するよう、分岐判断の処理を書き換えてビルド。

これで半角カナの入力が、少なくとも IE に対しては正しく再現できるようになった。

修正版 IEDriverServer.exe

ビルド済みの IEDriverServer.exe は下記からダウンロードできる。

[Pre-release] IEDriverServer - Halfwidth Katakana ready Edition
https://github.com/jsakamoto/selenium/releases

がんばって近日中に Pull Request を送る予定。

おまけ

Firefox Driver

なお、Firefox Driver on Windows OS でも半角カナが入力できない現象が再現している。
そして Firefox Driver on Windows OS の実装には、どうやら、上記 IE Driver と同様のコードが使われているようにも見える(コードの読み違いかもしれないのだが)。

自分は Firefox Driver のビルド環境がいまだに作れず、Firefox Driver の自分ビルドを達成できていない。
しかし上記修正の Pull Request の結果がもし採用されれば、広範に修正されて Firefox Driver での半角カナ入力も正常動作するようになるかもしれない。

Chrome Driver

あと、Chrome Driver on Windows OS だが、こちらもオープンソースではあるものの、Chromium のソースコードリポジトリに一括して収録されているそうで、しかしなぜか自分は Chromium のソースコードリポジトリにたどり着くことができず、こちらは挫折している。

他の OS やプロダクトでは、半角カナは大丈夫?

同じ Selenium Driver でも、ほかの OS であったり、あるいは Selenium と同じジャンルのプロダクト、例えば WatiN や Watir などでもこの「半角カナ」問題が再現するのかどうか、自分は情報を持ち合わせていない。

この修正がベストとは言えず...

あと、先に書いたとおり自分の修正方法は、半角カナの入力は、 KeyBoardState 関連の Win32 API ではなく、Windows メッセージ方式に分岐させている。

https://github.com/jsakamoto/selenium/commit/2ba187a197333bef4b2045b42e08f0795623c30a

しかし本来ならば KeyBoardState API を使った方がより望ましいのかもしれない。
お詳しい方による fork & commit & pull request もいただければ幸いである。
 
by developer-adjust | 2013-09-24 22:56 | Selenium | Comments(1)
2013年 08月 18日

beforeunloadイベントがハンドルされていると Selenium の Navigate().Back() から帰ってこない

ページを離れる前の確認メッセージボックスの表示

Webページによっては、ブラウザの「戻る」ボタンや「更新」(リロード)ボタンを押すなどして、そのページを離れてほかのページに遷移する際に、ページを離れてよいか確認するメッセージボックスを表示することがある。
d0079457_8423510.png
フォームになにか入力しかかりのまま、うっかりそのフォームのページを離れてしまう操作ミスを防ぐのに役立つ動作だ。

この動作は、その Web ページに仕掛けられた JavaScript コードによって、もともとブラウザが備えている、ページ遷移前の警告メッセージの表示機能を発動させることで実現されている。

具体的には、ブラウザ上の JavaScript における window オブジェクトの beforeunload イベントを捕捉し、任意の文字列を返す(ここで返された文字列がページ遷移の確認メッセージボックス上に表示される)ことで実装する。
window.onbeforeunload = function (event) {
event = event || window.event;
return event.returnValue = "Sure?";
};

Selenium WebDriver で自動化テストを実装

さて、このような Web ページに対し、
「ブラウザの [戻る] をクリックしたら、ページを離れていいかどうかの確認メッセージが表示されること」
を点検する自動化テストを実装してみることにしよう。

Selenium WebDriver を利用して、IE や Chroe、Firefox などといった実際のブラウザを自動操縦することでテストを行う。
自動化テストコードの実装は C# だ。

大体、次のようなコードで、ブラウザの [戻る] ボタンクリックを再現することだろう。
var driver = new IEDriver();
driver.Navigate().GoToUrl("http://foo/firstPage");
driver.FindElement(By.Id("gotoNextPage")).Click();
driver.Navigate().Back();
driver.SwitchTo().Alert().Accept();


ところがこれが一筋縄ではいかない。

Back() から帰ってこない!

ブラウザの種類、ないしはブラウザ種別ごとのDriver の実装によって若干挙動が変わるのだが(※1)、まず、Navigate().Back() の呼び出して InvalidOperationException が発生するケースがあった。

まぁ、このケースについては、Navigate().Back() 呼び出しを try~catch ブロックで囲って、発生した InvalidOperationException を握りつぶしてしまうことで回避は可能ではある(気持ち悪いが)。

しかし別のブラウザでは、そもそも Navigate().Back() 呼び出しの中に飛び込んだまま、帰ってこない現象となった。

どうやら、ページ遷移の確認ダイアログが閉じるまでが、Navigate().Back() の処理に含まれているようなのだ。

これはさすがに手の打ちようがない。

かといって、いくらオープンソースとはいえ、各Driverの実装を修正するのは、自分の技量と時間的に簡単とは言えない。
また、改善要望として報告し、対応されるとも限らないのを待つのもつらい。
いずれにせよ報告はしておくべきなのだが、解決がいつになるかが問題なわけだ。

JavaScript コードの活用で解決!

ということで、Navigation().Back() の使用はあきらめ、ブラウザ上の JavaScript でブラウザの [戻る] 機能を実現することにした。

Selenium WebDriver は、任意の JavaScript コード文字列を自動操縦中のブラウザに送り込んで実行する機能が用意されている。
この機能を利用するのだ。

ブラウザ上の JavaScript では、"history.back()" というコードで、[戻る] の動作を実現可能だ。

そこで、下記コードで Navigation().Back() の代わりとした。
driver.ExecuteScript("setTimeout(function(){history.back();},0);");
これで解決に至った。

なお、JavaScript の history.back() 呼び出しが、確認メッセージの終了待ちで帰ってこないブラウザがある。
WebDriver の Navigate().Back() と同じ現象だ。
よって、setTimeout による遅延実行にしないとせっかくの意味がなくなってしまうので注意。

ブラウザの [更新] についても、Navigation().Reload() では同様の現象が発生する。
同じく "location.reload()" の JavaScript をブラウザ上で(setTimeoutで包んで)実行することで回避可能だ。

2013/08/19 追記
※1 ... IE では Naviadtion().Back() から返ってこない / Chrome では InvalidOperationException 発生 / Firefox では Navigation().Back() からすんなり帰ってくる。

 
by developer-adjust | 2013-08-18 08:44 | Selenium | Comments(0)
2013年 07月 20日

Selenium の IE Driver で SendKeys したときに1文字ごとの入力が異様に遅い場合の対処

Selenium 2.0 "WebDriver" を使って、C# からブラウザを自動操縦する話。

下記 C# コードにて、Selenium WebDriver を使って IE を IE Driver 経由で起動し、所定の Web ページを開いたあと、ページ中の input 要素に "Hello World" と入力するとしょう。
var driver = new InternetExplorerDriver();
driver.Navigate().GoToUrl(url);
var textbox1 = driver.FindElement(By.Id("textbox1"));
textbox1.SendKeys("Hello World");
とりあえず動作はする。

動作はするが、自分の環境だと
1文字打鍵するのに5秒かかる
という異常事態が発生した。

この異常現象が発生したのは IE Driver の場合のみ。

Firefox や Chrome に切り替えて試したが、同じ現象は発生しなかった。

また、IE Driver 環境であっても、別の PC 上ではなんら問題なくサクサクと動作した。

原因は IE Driver の対象 bit 数

ネットで検索したところ、下記スレッドを発見。
http://stackoverflow.com/questions/8850211/why-is-selenium-internetexplorerdriver-webdriver-very-slow-in-debug-mode-visual

この異常現象が発生した環境だが、OS が Windows8 Pro 64bit 版だったので、IE Driver は 64bit 版をダウンロードして使っていた。

しかし OS の bit 数とは関係なく、どうも、C# 側コードが 32bit モードで動作していたためか、そのせいで処理速度が異常に遅くなっていたようだ。

改めて 32bit 版の IE Driver をダウンロードして導入し、再度試したところ、今度は正常に高速に実行された。
 
by developer-adjust | 2013-07-20 23:33 | Selenium | Comments(0)
2013年 07月 20日

jQuery Masked Input でマスク入力化したテキストボックスに、Selenium でテキスト入力できない場合の対処

Selenium 2.0 "WebDriver" を使って、C# からブラウザを自動操縦する話。

Selenium 2.0 を使ってブラウザを自動操縦、マスク入力を実行

jQuery Masked Input を使い、下記 JavaScript の初期実行によって id が textbox1 である input type=text 要素をマスク入力化している Web ページがあるとする。
$('#textbox1').mask('9999/99/99');
早速、C# による Selenium のクライアントライブラリを利用し、Webブラウザで上記 Web ページを開き、マスク入力化された input 要素へ "2013/07/21" という文字列を入力するとしよう。
例えばブラウザに IE を使うのであれば、下記のようなコードとなる。
var driver = new InternetExplorerDriver();
driver.Navigate().GoToUrl("http://localhost:29142/");
var textbox1 = driver.FindElement(By.Id("textbox1"));
textbox1.SendKeys("2013/07/21");

しかし動作しない!

ところが、これが動作しない。

IE と Firefox の場合は、対象 input 要素に "____/__/__" とマスク表示されたままになる。

Chrome の場合は "0130/72/12" というまったく見当違いな入力に化けてしまう。

対策

ネットで検索してみたがいい情報を見つけられず、いろいろ試行錯誤してしまったが、結局、下記のとおり、SendKeys で入力を開始する前に、Clear メソッドを呼び出すことで解決できた。
var driver = new InternetExplorerDriver();
driver.Navigate().GoToUrl("http://localhost:29142/");
var textbox1 = driver.FindElement(By.Id("textbox1"));
textbox1.Clear();
textbox1.SendKeys("2013/07/21");

by developer-adjust | 2013-07-20 23:01 | Selenium | Comments(0)
2008年 04月 15日

Selenium RC で Enter キー押下によるデフォルトボタンクリックを検証する

ASP.NET では、Form や asp:Panel コントロールの DefaultButton プロパティにボタンコントロールの ID を指定することで、そのページ(またはPanel)内での Enter キー押下時に、指定したボタンをクリックしたのと同じ動作となるようにできる。

マウスによる操作だけでなく、キーボードによる操作についてもその妥当性に気を遣っているため、この Enter キーによるデフォルトボタン押下も Selenium Remote Control (以下、Selenium RC) を使った自動機能テストに組み込むことにした。

さて、Selenium RC (テスター側はC#)を使って、Enter キー押下をエミュレートするにはどうしたらよいだろう?

ちょっと調べてみたところ、ISelenium.keyPress メソッドが使えそう。
"Enterキー" を指定するには引数に何を指定すればよいのかすぐにはわからなかったが、非文字キーを指定するには、バックスラッシュに続けてキーコードを10進数で記述すればよいらしい。

つまり、Enter キーであれば、"\13" ということだ(テスター側は C# なので、実際に C# ソースコード中ではエスケープシーケンスに気をつけて、"\\13" あるいは @"\13" と記述する必要がある)。

こうして作成したテストを実行してみたところ、Firefox 2 では期待どおりちゃんと動作が再現した。

ところが、IE6/7 ではうまくいかない。
ISelenium.keyPress メソッドで Enter キー押下を実行しても、IE 上ではなにも起こらないのだ。
ISelenium.keyDown や keyUp、およびこれらメソッドの組み合わせなどいろいろ試したが、結局、IE では何も起こらずじまい。

ISelenium.keyPress が最終的にどのような JavaScript コードの発動につながっているのか調べていないが、まぁ、本当に OS のキー押下をエミュレートしているわけではないので、この IE の挙動もわからないでもない。

とはいえ、これでは機能テストを自動化できない。

仕方がないので、ISelenium.keyPress に頼るのはやめ、WScript.Shell COM コンポーネントの SendKeys を利用することとした。

ただし WScript.Shell の SendKeys を使うなら、今度はフォーカスに注意しなくてはならない。
ISelenium にはウィンドウ単位でしかフォーカスを指定するメソッドがないようなので、ここは自作。

テスト対象の Web アプリは、Selenium のテストハーネスの IFRAME に埋め込まれている。
この IFRAME 要素の name は "myiframe" なので、これを手がかりに、指定の要素にフォーカスを与える JavaScript コードを ISelenium 経由で実行することにする。
コードは次のような感じ。

selenium.GetEval("frames('myiframe').focus();");
selenium.GetEval("frames('myiframe').document.getElementById('" + elementId + "').focus();");

もっとも、ここまで手を尽くしても、テスト実行時にアクティブウィンドウをブラウザ以外に切り替えてしまうと破綻してしまう(そのときアクティブな、おそらくはテスト中のブラウザではないウィンドウに SendKeys でキーストロークが送信されてしまう)。
その気になれば、アクティブウィンドウを必ずテスト中のブラウザに矯正するコードを足すこともできると思うが、実用上・実際上は重要な問題にはならないので、これで解決とした。
by developer-adjust | 2008-04-15 10:28 | Selenium | Comments(0)