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;