SlideShare a Scribd company logo
私が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テスト
• アプリケーションの
「最初から最後まで」の動作を
たしかめるテスト
• ブラウザなどを使う
Copyright © 2015 NS Solutions Corporation, All rights reserved. 3
Copyright © 2015 NS Solutions Corporation, All rights reserved. 4
・アプリにアクセス
・ログイン
・カートに商品を追加
・配送先を選択
・支払い方法を選択
・注文の確認
・購入完了
・アプリにアクセス
・ログイン
・カートに商品を追加
・配送先を選択
・支払い方法を選択
・注文の確認
・購入完了
・アプリにアクセス
・ログイン
・カートに商品を追加
・配送先を選択
・支払い方法を選択
・注文の確認
・購入完了
・アプリにアクセス
・ログイン
・カートに商品を追加
・配送先を選択
・支払い方法を選択
・注文の確認
・購入完了
・アプリにアクセス
・ログイン
・カートに商品を追加
・配送先を選択
・支払い方法を選択
・注文の確認
・購入完了
・アプリにアクセス
・ログイン
・カートに商品を追加
・配送先を選択
・支払い方法を選択
・注文の確認
・購入完了
・アプリにアクセス
・ログイン
・カートに商品を追加
・配送先を選択
・支払い方法を選択
・注文の確認
・購入完了
・アプリにアクセス
・ログイン
・カートに商品を追加
・配送先を選択
・支払い方法を選択
・注文の確認
・購入完了
・アプリにアクセス
・ログイン
・カートに商品を追加
・配送先を選択
・支払い方法を選択
・注文の確認
・購入完了
・アプリにアクセス
・ログイン
・カートに商品を追加
・配送先を選択
・支払い方法を選択
・注文の確認
・購入完了
複数のブラウザで
同じテストを実行
↓
負担大
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)
課題:対象ブラウザが増えた
Copyright © 2015 NS Solutions Corporation, All rights reserved. 5
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)
課題:テスト頻度が増した
開発スピードに追いつかない
テスト自動化
Copyright © 2015 NS Solutions Corporation, All rights reserved. 6
Copyright © 2015 NS Solutions Corporation, All rights reserved. 7
Selenium
Selenium-特徴
 OSS(Apache2.0)
 様々なブラウザに対応
 豊富な言語バインディング
 Java, C#, Python, Ruby, JavaScript etc.
 豊富な支援ツール
 Selenium grid:並列実行
 Selenium IDE:画面操作の記録
 Appium:iOS, Androidのテスト
Microsoft Edgeにも!
Copyright © 2015 NS Solutions Corporation, All rights reserved. 8
→間口の広さ
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();
}
}
フォーム操作
ページリクエスト
値の取得
Copyright © 2015 NS Solutions Corporation, All rights reserved. 9
Selenium-こんなこともできる
Copyright © 2015 NS Solutions Corporation, All rights reserved. 10
• 任意のJavaScriptコードを実行できる
• 表示中のページのスクリーンショットを
取得できる
スクリーンショット取得機能
• レイアウト確認
• エビデンス取得
• 差分検知
• for リグレッションテスト
Copyright © 2015 NS Solutions Corporation, All rights reserved. 11
File screenshotFile = ((Screenshot)driver).getScreenshotAs(file);
Copyright © 2015 NS Solutions Corporation, All rights reserved. 12
2015/09/03(rev.1)
2015/09/17(rev.2)
IE11
・アプリにアクセス
・ログイン
・カートに商品を追加
・配送先を選択
・支払い方法を選択
・注文の確認
・購入完了
・アプリにアクセス
・ログイン
・カートに商品を追加
・配送先を選択
・支払い方法を選択
・注文の確認
・購入完了
スクリーンショットで差分検知
Seleniumを使って
スクリーンショットを撮ろう!
目標
Seleniumを使って
スクリーンショットを撮ろう!
Copyright © 2015 NS Solutions Corporation, All rights reserved.Copyright © 2015 NS Solutions Corporation, All rights reserved. 13
目標
Seleniumを使って
スクリーンショットを撮ろう!
Copyright © 2015 NS Solutions Corporation, All rights reserved. 14
以下、
Copyright © 2015 NS Solutions Corporation, All rights reserved. 15
Seleniumでスクリーンショットを
撮ろうとした時の
闇(はまりどころ)を紹介
Copyright © 2015 NS Solutions Corporation, All rights reserved. 16
の闇ブラウザ依存
Copyright © 2015 NS Solutions Corporation, All rights reserved. 17
File screenshotFile = ((Screenshot)driver).getScreenshotAs(file);
Copyright © 2015 NS Solutions Corporation, All rights reserved. 18
メソッドはある。しかし…
可視範囲のみ
いろんなバー映り込む
Copyright © 2015 NS Solutions Corporation, All rights reserved. 19
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
Copyright © 2015 NS Solutions Corporation, All rights reserved. 20
TakesScreenshot interface(意訳)
実装するときは下記の順でどれか返してくれればいいよ。
ブラウザによってベストエフォートで実装してね。
• ページ全体
• 現在のウインドウ
• 現在のフレームの可視範囲
• ブラウザも含むディスプレイ全体
http://selenium.googlecode.com/git/docs/api/java/org/openqa/selenium/TakesScreenshot.html
Copyright © 2015 NS Solutions Corporation, All rights reserved. 21
闇が深い
Copyright © 2015 NS Solutions Corporation, All rights reserved. 22
対策
地道にブラウザ依存の処理を
吸収する
Copyright © 2015 NS Solutions Corporation, All rights reserved. 23
対策
Copyright © 2015 NS Solutions Corporation, All rights reserved. 24
Copyright © 2015 NS Solutions Corporation, All rights reserved. 25
スクロールに追従する要素アクセスするたびに内容が変わる
ウィジェット
対策
Copyright © 2015 NS Solutions Corporation, All rights reserved. 26
アクセスするたびに内容が変わる
ウィジェット
→スクリーンショットは撮るが
差分検知のときは無視する
スクロールに追従する要素
→スクリーンショットを撮るときに
隠す(hidden)
サブピクセルの闇
Copyright © 2015 NS Solutions Corporation, All rights reserved. 27
部分スクリーンショット取得時
身に覚えのないdiff
Copyright © 2015 NS Solutions Corporation, All rights reserved. 28
よく調べると
Copyright © 2015 NS Solutions Corporation, All rights reserved. 29
要素A
要素A
top: 200px
left: 100px
top: 300.5px
left: 100px
要素Aの位置が変わっただけで
中身がほんの少し変わるもよう
原因→サブピクセルレンダリング
• ブラウザ上の要素の座標は実数
• ブラウザが小数点以下の値を
正確に扱おうと試みた結果、
微妙な差が出る
Copyright © 2015 NS Solutions Corporation, All rights reserved. 30
ブラウザ毎の座標の扱いと
レンダリング
ブラウザ名 状態
Internet Explorer 7 小数点以下の座標を持たない
Internet Explorer 8
内部的に小数点以下の座標を持つが、取得できる値は整数のみ。
横方向はレンダリングに影響するが縦方向は影響しない。
Internet Explorer 9
内部的に小数点以下の座標を持つが、取得できる値は整数のみ。
縦横両方向のレンダリングに影響する。
Internet Explorer 10 , 11
Mozilla Firefox
Google Chrome
内部的に小数点以下の座標を持ち、取得される値も小数点を含む。
縦横両方向のレンダリングに影響する。
Copyright © 2015 NS Solutions Corporation, All rights reserved. 31
闇が深い
Copyright © 2015 NS Solutions Corporation, All rights reserved. 32
対策
Copyright © 2015 NS Solutions Corporation, All rights reserved. 33
要素A
要素A
top: 200px
left: 100px
top: 300.5px
left: 100px
要素の座標が同じなら、
描画結果は同じになるはず…
対策
Copyright © 2015 NS Solutions Corporation, All rights reserved. 34
要素A 要素A
top: 0px
left: 0px
top: 0px
left: 0px
要素Aのスクリーンショットを
撮る間だけ、固定座標に移動
なぜかブラウザで開いている
画面と取得したスクリーン
ショットが違うの闇
Copyright © 2015 NS Solutions Corporation, All rights reserved. 35
IE8でスクリーンショット取得時
Copyright © 2015 NS Solutions Corporation, All rights reserved. 36
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
○○のページ
スクリーンショットにすると
ほんの少しだけ幅が狭い…??
行が折り返して
しまう
ウィンドウサイズを勝手に変えて
いるのは誰?
Copyright © 2015 NS Solutions Corporation, All rights reserved. 37
Selenium
クライアント
WebDriver ブラウザ
スクリーンショット
撮って!
どうぞ(画像)
Json wire protocol
ブラウザ拡張機能
OSのネイティブ機能
対策…
Copyright © 2015 NS Solutions Corporation, All rights reserved. 38
Selenium
クライアント
ドライバ ブラウザ
改修(C++)
もうたくさんだ…
Copyright © 2015 NS Solutions Corporation, All rights reserved. 39
私はただ
(きれいな)スクリーンショット
を撮りたいだけなのに!!!
Copyright © 2015 NS Solutions Corporation, All rights reserved. 40
なぜC++を書いているんだ
Copyright © 2015 NS Solutions Corporation, All rights reserved. 41
これからSeleniumを使う人たちに
同じ闇を味わってほしくない
Copyright © 2015 NS Solutions Corporation, All rights reserved. 42
そこで
Copyright © 2015 NS Solutions Corporation, All rights reserved. 43
Copyright © 2015 NS Solutions Corporation, All rights reserved. 44
Apache2.0
License
Version 1.0.2
開発中!
Copyright © 2015 NS Solutions Corporation, All rights reserved. 45
IE
Safari
Chrome
テスト
スクリプト
Pitalium
対象
ブラウザ
・IE
・Chrome
・Safari
V1.0.2更新内容(抜粋)
• 横スクロール対応
• Pitalium Explorerを使った
アドホック比較
• 任意のスクリーンショットの
比較が可能に
Copyright © 2015 NS Solutions Corporation, All rights reserved. 46
Pitalium
テスト結果ビューア:Pitalium Explorer
Copyright © 2015 NS Solutions Corporation, All rights reserved. 47
・テスト結果 / スクリーンショット差分の確認
Demo: 新旧テスト結果の比較
Copyright © 2015 NS Solutions Corporation, All rights reserved. 48
2015/09/03(rev.1)
2015/09/17(rev.2)
Internet
Explorer 11
Chrome Firefox
Demo: 異なるブラウザ間の結果比較
Copyright © 2015 NS Solutions Corporation, All rights reserved. 49
2015/09/03(rev.1)
2015/09/17(rev.2)
Internet
Explorer 11
Chrome Firefox
Copyright © 2015 NS Solutions Corporation, All rights reserved. 50
Copyright © 2015 NS Solutions Corporation, All rights reserved. 50
開発中に
スクリーンショットを確認する
CI環境と組み合わせて
リグレッションテストに使う
仕様変更時に
新旧の画面を比較する
OK! OK!
driver.find
Element(By
.name("sh
op_id")).cl
ear();
NG!
利用シナリオ例
ちゃんと変わっている!
Jenkins project: http://jenkins-ci.org/
テスト自動化の闇テスト自動化の闇と向き合う
Copyright © 2015 NS Solutions Corporation, All rights reserved. 51
まとめ
Copyright © 2015 NS Solutions Corporation, All rights reserved. 52
• マルチデバイス対応の闇は深い
• スクリーンショット周り特に深い
• そんな闇を祓うツール
Pitaliumをよろしくお願いします
明けない闇はない。
Copyright © 2015 NS Solutions Corporation, All rights reserved. 53
・ NS Solutions、NS(ロゴ)、NSSOLは、新日鉄住金ソリューションズ株式会社の登録商標です。
・ hifive、hifive(ロゴ)は、新日鉄住金ソリューションズ株式会社の登録商標です。
・ Pitaliumは、新日鉄住金ソリューションズ株式会社の商標です。
・ Javaは、米国ORACLE Corp.の登録商標です。
・ その他本文記載の会社名及び製品名は、それぞれ各社の商標又は登録商標です。

More Related Content

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

  • 2. End to End(E2E)テスト Copyright © 2015 NS Solutions Corporation, All rights reserved. 2
  • 4. Copyright © 2015 NS Solutions Corporation, All rights reserved. 4 ・アプリにアクセス ・ログイン ・カートに商品を追加 ・配送先を選択 ・支払い方法を選択 ・注文の確認 ・購入完了 ・アプリにアクセス ・ログイン ・カートに商品を追加 ・配送先を選択 ・支払い方法を選択 ・注文の確認 ・購入完了 ・アプリにアクセス ・ログイン ・カートに商品を追加 ・配送先を選択 ・支払い方法を選択 ・注文の確認 ・購入完了 ・アプリにアクセス ・ログイン ・カートに商品を追加 ・配送先を選択 ・支払い方法を選択 ・注文の確認 ・購入完了 ・アプリにアクセス ・ログイン ・カートに商品を追加 ・配送先を選択 ・支払い方法を選択 ・注文の確認 ・購入完了 ・アプリにアクセス ・ログイン ・カートに商品を追加 ・配送先を選択 ・支払い方法を選択 ・注文の確認 ・購入完了 ・アプリにアクセス ・ログイン ・カートに商品を追加 ・配送先を選択 ・支払い方法を選択 ・注文の確認 ・購入完了 ・アプリにアクセス ・ログイン ・カートに商品を追加 ・配送先を選択 ・支払い方法を選択 ・注文の確認 ・購入完了 ・アプリにアクセス ・ログイン ・カートに商品を追加 ・配送先を選択 ・支払い方法を選択 ・注文の確認 ・購入完了 ・アプリにアクセス ・ログイン ・カートに商品を追加 ・配送先を選択 ・支払い方法を選択 ・注文の確認 ・購入完了 複数のブラウザで 同じテストを実行 ↓ 負担大 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) 課題:対象ブラウザが増えた
  • 5. Copyright © 2015 NS Solutions Corporation, All rights reserved. 5 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) 課題:テスト頻度が増した 開発スピードに追いつかない
  • 6. テスト自動化 Copyright © 2015 NS Solutions Corporation, All rights reserved. 6
  • 7. Copyright © 2015 NS Solutions Corporation, All rights reserved. 7 Selenium
  • 8. Selenium-特徴  OSS(Apache2.0)  様々なブラウザに対応  豊富な言語バインディング  Java, C#, Python, Ruby, JavaScript etc.  豊富な支援ツール  Selenium grid:並列実行  Selenium IDE:画面操作の記録  Appium:iOS, Androidのテスト Microsoft Edgeにも! Copyright © 2015 NS Solutions Corporation, All rights reserved. 8 →間口の広さ
  • 9. 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(); } } フォーム操作 ページリクエスト 値の取得 Copyright © 2015 NS Solutions Corporation, All rights reserved. 9
  • 10. Selenium-こんなこともできる Copyright © 2015 NS Solutions Corporation, All rights reserved. 10 • 任意のJavaScriptコードを実行できる • 表示中のページのスクリーンショットを 取得できる
  • 11. スクリーンショット取得機能 • レイアウト確認 • エビデンス取得 • 差分検知 • for リグレッションテスト Copyright © 2015 NS Solutions Corporation, All rights reserved. 11 File screenshotFile = ((Screenshot)driver).getScreenshotAs(file);
  • 12. Copyright © 2015 NS Solutions Corporation, All rights reserved. 12 2015/09/03(rev.1) 2015/09/17(rev.2) IE11 ・アプリにアクセス ・ログイン ・カートに商品を追加 ・配送先を選択 ・支払い方法を選択 ・注文の確認 ・購入完了 ・アプリにアクセス ・ログイン ・カートに商品を追加 ・配送先を選択 ・支払い方法を選択 ・注文の確認 ・購入完了 スクリーンショットで差分検知
  • 13. Seleniumを使って スクリーンショットを撮ろう! 目標 Seleniumを使って スクリーンショットを撮ろう! Copyright © 2015 NS Solutions Corporation, All rights reserved.Copyright © 2015 NS Solutions Corporation, All rights reserved. 13
  • 15. 以下、 Copyright © 2015 NS Solutions Corporation, All rights reserved. 15
  • 17. の闇ブラウザ依存 Copyright © 2015 NS Solutions Corporation, All rights reserved. 17
  • 18. File screenshotFile = ((Screenshot)driver).getScreenshotAs(file); Copyright © 2015 NS Solutions Corporation, All rights reserved. 18 メソッドはある。しかし…
  • 19. 可視範囲のみ いろんなバー映り込む Copyright © 2015 NS Solutions Corporation, All rights reserved. 19 Internet Explorer Google Chrome Safari(iOS)
  • 20. 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 Copyright © 2015 NS Solutions Corporation, All rights reserved. 20
  • 21. TakesScreenshot interface(意訳) 実装するときは下記の順でどれか返してくれればいいよ。 ブラウザによってベストエフォートで実装してね。 • ページ全体 • 現在のウインドウ • 現在のフレームの可視範囲 • ブラウザも含むディスプレイ全体 http://selenium.googlecode.com/git/docs/api/java/org/openqa/selenium/TakesScreenshot.html Copyright © 2015 NS Solutions Corporation, All rights reserved. 21
  • 22. 闇が深い Copyright © 2015 NS Solutions Corporation, All rights reserved. 22
  • 23. 対策 地道にブラウザ依存の処理を 吸収する Copyright © 2015 NS Solutions Corporation, All rights reserved. 23
  • 24. 対策 Copyright © 2015 NS Solutions Corporation, All rights reserved. 24
  • 25. Copyright © 2015 NS Solutions Corporation, All rights reserved. 25 スクロールに追従する要素アクセスするたびに内容が変わる ウィジェット
  • 26. 対策 Copyright © 2015 NS Solutions Corporation, All rights reserved. 26 アクセスするたびに内容が変わる ウィジェット →スクリーンショットは撮るが 差分検知のときは無視する スクロールに追従する要素 →スクリーンショットを撮るときに 隠す(hidden)
  • 27. サブピクセルの闇 Copyright © 2015 NS Solutions Corporation, All rights reserved. 27
  • 29. よく調べると Copyright © 2015 NS Solutions Corporation, All rights reserved. 29 要素A 要素A top: 200px left: 100px top: 300.5px left: 100px 要素Aの位置が変わっただけで 中身がほんの少し変わるもよう
  • 31. ブラウザ毎の座標の扱いと レンダリング ブラウザ名 状態 Internet Explorer 7 小数点以下の座標を持たない Internet Explorer 8 内部的に小数点以下の座標を持つが、取得できる値は整数のみ。 横方向はレンダリングに影響するが縦方向は影響しない。 Internet Explorer 9 内部的に小数点以下の座標を持つが、取得できる値は整数のみ。 縦横両方向のレンダリングに影響する。 Internet Explorer 10 , 11 Mozilla Firefox Google Chrome 内部的に小数点以下の座標を持ち、取得される値も小数点を含む。 縦横両方向のレンダリングに影響する。 Copyright © 2015 NS Solutions Corporation, All rights reserved. 31
  • 32. 闇が深い Copyright © 2015 NS Solutions Corporation, All rights reserved. 32
  • 33. 対策 Copyright © 2015 NS Solutions Corporation, All rights reserved. 33 要素A 要素A top: 200px left: 100px top: 300.5px left: 100px 要素の座標が同じなら、 描画結果は同じになるはず…
  • 34. 対策 Copyright © 2015 NS Solutions Corporation, All rights reserved. 34 要素A 要素A top: 0px left: 0px top: 0px left: 0px 要素Aのスクリーンショットを 撮る間だけ、固定座標に移動
  • 36. IE8でスクリーンショット取得時 Copyright © 2015 NS Solutions Corporation, All rights reserved. 36 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 ○○のページ スクリーンショットにすると ほんの少しだけ幅が狭い…?? 行が折り返して しまう
  • 37. ウィンドウサイズを勝手に変えて いるのは誰? Copyright © 2015 NS Solutions Corporation, All rights reserved. 37 Selenium クライアント WebDriver ブラウザ スクリーンショット 撮って! どうぞ(画像) Json wire protocol ブラウザ拡張機能 OSのネイティブ機能
  • 38. 対策… Copyright © 2015 NS Solutions Corporation, All rights reserved. 38 Selenium クライアント ドライバ ブラウザ 改修(C++)
  • 39. もうたくさんだ… Copyright © 2015 NS Solutions Corporation, All rights reserved. 39
  • 41. なぜC++を書いているんだ Copyright © 2015 NS Solutions Corporation, All rights reserved. 41
  • 43. そこで Copyright © 2015 NS Solutions Corporation, All rights reserved. 43
  • 44. Copyright © 2015 NS Solutions Corporation, All rights reserved. 44 Apache2.0 License Version 1.0.2 開発中!
  • 45. Copyright © 2015 NS Solutions Corporation, All rights reserved. 45 IE Safari Chrome テスト スクリプト Pitalium 対象 ブラウザ ・IE ・Chrome ・Safari
  • 46. V1.0.2更新内容(抜粋) • 横スクロール対応 • Pitalium Explorerを使った アドホック比較 • 任意のスクリーンショットの 比較が可能に Copyright © 2015 NS Solutions Corporation, All rights reserved. 46 Pitalium
  • 47. テスト結果ビューア:Pitalium Explorer Copyright © 2015 NS Solutions Corporation, All rights reserved. 47 ・テスト結果 / スクリーンショット差分の確認
  • 48. Demo: 新旧テスト結果の比較 Copyright © 2015 NS Solutions Corporation, All rights reserved. 48 2015/09/03(rev.1) 2015/09/17(rev.2) Internet Explorer 11 Chrome Firefox
  • 49. Demo: 異なるブラウザ間の結果比較 Copyright © 2015 NS Solutions Corporation, All rights reserved. 49 2015/09/03(rev.1) 2015/09/17(rev.2) Internet Explorer 11 Chrome Firefox
  • 50. Copyright © 2015 NS Solutions Corporation, All rights reserved. 50 Copyright © 2015 NS Solutions Corporation, All rights reserved. 50 開発中に スクリーンショットを確認する CI環境と組み合わせて リグレッションテストに使う 仕様変更時に 新旧の画面を比較する OK! OK! driver.find Element(By .name("sh op_id")).cl ear(); NG! 利用シナリオ例 ちゃんと変わっている! Jenkins project: http://jenkins-ci.org/
  • 52. まとめ Copyright © 2015 NS Solutions Corporation, All rights reserved. 52 • マルチデバイス対応の闇は深い • スクリーンショット周り特に深い • そんな闇を祓うツール Pitaliumをよろしくお願いします
  • 53. 明けない闇はない。 Copyright © 2015 NS Solutions Corporation, All rights reserved. 53 ・ NS Solutions、NS(ロゴ)、NSSOLは、新日鉄住金ソリューションズ株式会社の登録商標です。 ・ hifive、hifive(ロゴ)は、新日鉄住金ソリューションズ株式会社の登録商標です。 ・ Pitaliumは、新日鉄住金ソリューションズ株式会社の商標です。 ・ Javaは、米国ORACLE Corp.の登録商標です。 ・ その他本文記載の会社名及び製品名は、それぞれ各社の商標又は登録商標です。