20151201...

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

新日鉄住金ソリューションズ

石川真也

（Selenium歴1年）Copyright © 2015 NS Solutions Corporation, All rights reserved. 1

End to End（E2E）テスト

Copyright © 2015 NS Solutions Corporation, All rights reserved. 2

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)

課題：対象ブラウザが増えた


Edge IE11 IE9 Chrome FF Safari iOS Android Android Android











2015/09/03(rev.1)











2015/09/17(rev.2)











2015/10/01(rev.3)











2015/10/03(rev.4)

課題：テスト頻度が増した

開発スピードに追いつかない

テスト自動化



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);


2015/09/03(rev.1)

2015/09/17(rev.2)

IE11



スクリーンショットで差分検知

Seleniumを使って

スクリーンショットを撮ろう！

目標



Copyright © 2015 NS Solutions Corporation, All rights reserved.Copyright © 2015 NS Solutions Corporation, All rights reserved. 13

目標




以下、


Seleniumでスクリーンショットを撮ろうとした時の

闇（はまりどころ）を紹介


の闇ブラウザ依存


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


メソッドはある。しかし…

可視範囲のみ

いろんなバー映り込む


Internet Explorer Google Chrome Safari(iOS)

TakesScreenshot interfaceFor 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.htmlCopyright © 2015 NS Solutions Corporation, All rights reserved. 20

TakesScreenshot interface(意訳)実装するときは下記の順でどれか返してくれればいいよ。ブラウザによってベストエフォートで実装してね。

• ページ全体

• 現在のウインドウ

• 現在のフレームの可視範囲

• ブラウザも含むディスプレイ全体

http://selenium.googlecode.com/git/docs/api/java/org/openqa/selenium/TakesScreenshot.htmlCopyright © 2015 NS Solutions Corporation, All rights reserved. 21

闇が深い


対策

地道にブラウザ依存の処理を

吸収する


対策



スクロールに追従する要素アクセスするたびに内容が変わるウィジェット

対策


アクセスするたびに内容が変わるウィジェット→スクリーンショットは撮るが差分検知のときは無視する

スクロールに追従する要素→スクリーンショットを撮るときに隠す（hidden）

サブピクセルの闇


部分スクリーンショット取得時

身に覚えのないdiff


よく調べると


要素A

要素A

top: 200pxleft: 100px

top: 300.5pxleft: 100px

要素Aの位置が変わっただけで

中身がほんの少し変わるもよう

原因→サブピクセルレンダリング

• ブラウザ上の要素の座標は実数

• ブラウザが小数点以下の値を正確に扱おうと試みた結果、微妙な差が出る


ブラウザ毎の座標の扱いとレンダリングブラウザ名状態

Internet Explorer 7 小数点以下の座標を持たない

Internet Explorer 8内部的に小数点以下の座標を持つが、取得できる値は整数のみ。横方向はレンダリングに影響するが縦方向は影響しない。

Internet Explorer 9内部的に小数点以下の座標を持つが、取得できる値は整数のみ。縦横両方向のレンダリングに影響する。

Internet Explorer 10 , 11Mozilla FirefoxGoogle Chrome

内部的に小数点以下の座標を持ち、取得される値も小数点を含む。縦横両方向のレンダリングに影響する。


闇が深い


対策


要素A

要素A

top: 200pxleft: 100px

top: 300.5pxleft: 100px

要素の座標が同じなら、

描画結果は同じになるはず…

対策


要素A 要素Atop: 0pxleft: 0px

top: 0pxleft: 0px

要素Aのスクリーンショットを

撮る間だけ、固定座標に移動

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


IE8でスクリーンショット取得時


Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod temporincididunt

○○のページ

Lorem ipsum dolor sit amet, consecteturadipisicing elit, seddo eiusmod temporincididunt

○○のページ

スクリーンショットにすると

ほんの少しだけ幅が狭い…？？

行が折り返してしまう

ウィンドウサイズを勝手に変えているのは誰？


Seleniumクライアント

WebDriver ブラウザ

スクリーンショット撮って！

どうぞ（画像）

Json wire protocolブラウザ拡張機能OSのネイティブ機能

対策…


Seleniumクライアント

ドライバブラウザ

改修（C++）

もうたくさんだ…


私はただ

（きれいな）スクリーンショット

を撮りたいだけなのに！！！


なぜC++を書いているんだ


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


そこで



Apache2.0License

Version 1.0.2開発中！


IE

Safari

Chrome

テストスクリプト

Pitalium

対象ブラウザ・IE・Chrome・Safari

V1.0.2更新内容（抜粋）

• 横スクロール対応

• Pitalium Explorerを使ったアドホック比較• 任意のスクリーンショットの比較が可能に


Pitalium

テスト結果ビューア：Pitalium Explorer


・テスト結果 / スクリーンショット差分の確認

Demo: 新旧テスト結果の比較


2015/09/03(rev.1)

2015/09/17(rev.2)

InternetExplorer 11

Chrome Firefox

Demo: 異なるブラウザ間の結果比較


2015/09/03(rev.1)

2015/09/17(rev.2)

InternetExplorer 11

Chrome Firefox

Copyright © 2015 NS Solutions Corporation, All rights reserved. 50Copyright © 2015 NS Solutions Corporation, All rights reserved. 50

開発中にスクリーンショットを確認する

CI環境と組み合わせてリグレッションテストに使う

仕様変更時に新旧の画面を比較する

OK！ OK！

driver.findElement(By.name("shop_id")).clear();

NG！

利用シナリオ例

ちゃんと変わっている！

Jenkins project: http://jenkins-ci.org/

http://jenkins-ci.org/

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


まとめ


• マルチデバイス対応の闇は深い• スクリーンショット周り特に深い

• そんな闇を祓うツールPitaliumをよろしくお願いします

明けない闇はない。


・ NS Solutions、NS（ロゴ）、NSSOLは、新日鉄住金ソリューションズ株式会社の登録商標です。

・ hifive、hifive(ロゴ)は、新日鉄住金ソリューションズ株式会社の登録商標です。

・ Pitaliumは、新日鉄住金ソリューションズ株式会社の商標です。

・ Javaは､米国ORACLE Corp.の登録商標です｡

・その他本文記載の会社名及び製品名は、それぞれ各社の商標又は登録商標です。

20151201...

Technology

Transcript of 20151201...