私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て

私がSeleniumを使って
スクリーンショット
を撮るまでに出会っ
た闇の全て新日鉄住金ソリューションズ
石川真也
（Selenium歴11ヶ月）
Copyright © 2015 NS Solutions Corporation, All rights reserved. 1

End to End（E2E）テスト

E2Eテスト
• アプリケーションの
「最初から最後まで」の動作を
たしかめるテスト
• ブラウザなどを使う

Internet Explorer 7
Internet Explorer 8
Internet Explorer 9
Internet Explorer 10
Internet Explorer 11
Microsoft Edge
Firefox
Google Chrome
Safari
Safari(iOS)
Google Chrome(Android)
・アプリにアクセス
・ログイン
・カートに商品を追加
・配送先を選択
・支払い方法を選択
・注文の確認
・購入完了
・ログイン
・注文の確認
・購入完了
・ログイン
・注文の確認
・購入完了
・ログイン
・注文の確認
・購入完了
・ログイン
・注文の確認
・購入完了
・ログイン
・注文の確認
・購入完了
・ログイン
・注文の確認
・購入完了
・ログイン
・注文の確認
・購入完了
・ログイン
・注文の確認
・購入完了
・ログイン
・注文の確認
・購入完了
複数の対象ブラウザで
同じテストを実行
（クロスブラウザテスト）
→負担大

そこで

テスト自動化

ブラウザ操作自動化ツール
Selenium

Selenium-特徴
 OSS（Apache2.0）
 様々なブラウザに対応
 豊富な言語バインディング
 Java, C#, Python, Ruby, JavaScript etc.
 豊富な支援ツール
 Selenium grid：テストの分散・並列実行
 Selenium IDE：画面操作の記録・再生
 Appium：iOS, Androidのテストが可能に
Microsoft Edgeにも！
→間口の広さ

Selenium-コード例
public class Example {
public static void main(String[] args) {
WebDriver driver = new HtmlUnitDriver();
driver.get("http://www.google.com");
WebElement element = driver.findElement(By.name("q"));
element.sendKeys("Cheese!");
element.submit();
System.out.println("Page title is: " + driver.getTitle());
driver.quit();
}
}
フォーム操作
ページリクエスト
値の取得

Selenium-こんなこともできる
• 任意のJavaScriptコードを実行できる
• 表示中のページのスクリーンショットを
取得できる

スクリーンショット取得機能
• レイアウト確認
• エビデンス取得
• 差分検知
• for リグレッションテスト
File screenshotFile = ((Screenshot)driver).getScreenshotAs(file);

目標
Seleniumを使って
スクリーンショットを撮ろう！

以下、

Seleniumでスクリーンショットを
撮ろうとした時の
闇（はまりどころ）を紹介

の闇ブラウザ依存

File screenshotFile = ((Screenshot)driver).getScreenshotAs(file);

可視範囲のみ
いろんなバー映り込む
Internet Explorer Google Chrome Safari(iOS)

TakesScreenshot interface
For WebDriver extending TakesScreenshot, this makes a best effort
depending on the browser to return the following in order of
preference:
• Entire page
• Current window
• Visible portion of the current frame
• The screenshot of the entire display containing the browser
http://selenium.googlecode.com/git/docs/api/java/org/openqa/selenium/TakesScreenshot.html

TakesScreenshot interface(意訳)
実装するときは下記の順でどれか返してくれればいいよ。
ブラウザによってベストエフォートで実装してね。
• ページ全体
• 現在のウインドウ
• 現在のフレームの可視範囲
• ブラウザも含むディスプレイ全体
http://selenium.googlecode.com/git/docs/api/java/org/openqa/selenium/TakesScreenshot.html

闇が深い

対策
地道にブラウザ依存の処理を
吸収する

対策
スクロールしながら撮る
撮った画像を繋ぐ

対策
アクセスするたびに内容が変わる
ウィジェット
→スクリーンショットは撮るが
差分検知のときは無視する
スクロールに追従する要素
→スクリーンショットを撮るときに
隠す（hidden）

サブピクセルの闇

部分スクリーンショット取得時
身に覚えのないdiff

よく調べると
要素A
要素A
top: 200px
left: 100px
top: 300.5px
left: 100px
要素Aの位置が変わっただけで
中身が変わるもよう

原因→サブピクセルレンダリング
• ブラウザ上の要素の座標は実数
• 小数点以下の値を正確に扱おう
と試みた結果、微妙な差が出る

ブラウザ毎の座標の扱いと
レンダリング
ブラウザ名状態
Internet Explorer 7 小数点以下の座標を持たない
Internet Explorer 8
内部的に小数点以下の座標を持つが取得できる値は整数のみ。
横方向はレンダリングに影響するが縦方向は影響しない。
Internet Explorer 9
内部的に小数点以下の座標を持つが取得できる値は整数のみ。
縦横両方向のレンダリングに影響する。
Internet Explorer 10 , 11
Mozilla Firefox
Google Chrome
内部的に小数点以下の座標を持ち、取得される値も小数点を含む。
縦横両方向のレンダリングに影響する。

闇が深い

対策
要素A
要素A
top: 200px
left: 100px
top: 300.5px
left: 100px
要素の座標が同じなら、
描画結果は同じになるはず…

対策
要素A 要素A
top: 0px
left: 0px
top: 0px
left: 0px
要素Aのスクリーンショットを
撮る間だけ、固定座標に移動

なぜかブラウザで開いている
画面と取得したスクリーン
ショットが違うの闇

IE8でスクリーンショット取得時
Lorem ipsum dolor sit
amet, consectetur
adipisicing elit, sed do
eiusmod tempor
incididunt
○○のページ
Lorem ipsum dolor
sit amet,
consectetur
adipisicing elit, sed
do eiusmod tempor
incididunt
○○のページ
スクリーンショットにすると
ほんの少しだけ幅が狭い…？？

ウィンドウサイズを勝手に変えて
いるのは誰？
Selenium
クライアント
ドライバブラウザ
スクリーンショット
撮って！
どうぞ（画像）
Json wire protocol
ブラウザ拡張機能
OSのネイティブ機能
ウインドウサイズ
変えます

対策
Selenium
クライアント
ドライバブラウザ
改修（C++）

闇が深い

もうたくさんだ…

私はただ
（きれいな）スクリーンショット
を撮りたいだけなのに！！！！

これからSeleniumを使う人たちに
同じ闇を味わってほしくない

そこで

作りました。

Apache2.0
License

IE
Safari
Chrome
テスト
スクリプト
Pitalium
対象
ブラウザ
・IE
・Chrome
・Safari

テスト自動化の闇テスト自動化の闇と向き合う

まとめ
• マルチデバイス対応の闇は深い
• スクリーンショット取得が特に
深い
• そんな闇を祓うツール
Pitaliumをよろしくお願いします

続きはWeb（or 展示ブース）で！
https://www.htmlhifive.com/
・ NS Solutions、NS（ロゴ）、NSSOLは、新日鉄住金ソリューションズ株式会社の登録商標です。
・ hifive、hifive（ロゴ）は、新日鉄住金ソリューションズ株式会社の登録商標です。
・ Pitalium、Pitalium（ロゴ）は、新日鉄住金ソリューションズ株式会社の商標です。
・ Javaは､米国ORACLE Corp.の登録商標です｡
・ HTML5 Logo by W3C
・その他本文記載の会社名及び製品名は、それぞれ各社の商標又は登録商標です。
Pitaliumのデモも
あるよ！

私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て

Semelhante a 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て (20)

Mais de Osamu Shimoda

Mais de Osamu Shimoda (6)

Último

Último (11)

私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て