Submit Search
Upload
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
•
5 likes
•
16,069 views
O
Osamu Shimoda
Follow
OSC東京2015 Fall ライトニングトーク資料
Read less
Read more
Technology
Report
Share
Report
Share
1 of 47
Download now
Download to read offline
Recommended
アーキテクチャとアジャイルプロジェクトをまともに進めるための両輪について-DevLOVE関西 #DevKan
アーキテクチャとアジャイルプロジェクトをまともに進めるための両輪について-DevLOVE関西 #DevKan
Yusuke Suzuki
実録Blue-Green Deployment導入記
実録Blue-Green Deployment導入記
Hiroyuki Ohnaka
Akkaで分散システム入門
Akkaで分散システム入門
Shingo Omura
MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"
MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"
Kentaro Yoshida
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化
JustSystems Corporation
分散システムについて語らせてくれ
分散システムについて語らせてくれ
Kumazaki Hiroki
Amazon EKS によるスマホゲームのバックエンド運用事例
Amazon EKS によるスマホゲームのバックエンド運用事例
gree_tech
[社内勉強会]ELBとALBと数万スパイク負荷テスト
[社内勉強会]ELBとALBと数万スパイク負荷テスト
Takahiro Moteki
Recommended
アーキテクチャとアジャイルプロジェクトをまともに進めるための両輪について-DevLOVE関西 #DevKan
アーキテクチャとアジャイルプロジェクトをまともに進めるための両輪について-DevLOVE関西 #DevKan
Yusuke Suzuki
実録Blue-Green Deployment導入記
実録Blue-Green Deployment導入記
Hiroyuki Ohnaka
Akkaで分散システム入門
Akkaで分散システム入門
Shingo Omura
MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"
MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"
Kentaro Yoshida
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化
JustSystems Corporation
分散システムについて語らせてくれ
分散システムについて語らせてくれ
Kumazaki Hiroki
Amazon EKS によるスマホゲームのバックエンド運用事例
Amazon EKS によるスマホゲームのバックエンド運用事例
gree_tech
[社内勉強会]ELBとALBと数万スパイク負荷テスト
[社内勉強会]ELBとALBと数万スパイク負荷テスト
Takahiro Moteki
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
Yahoo!デベロッパーネットワーク
5分で出来る!イケてるconfluenceページ
5分で出来る!イケてるconfluenceページ
CLARA ONLINE, Inc.
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
Trainocate Japan, Ltd.
AWS re:Inforce2019 re:Cap LT
AWS re:Inforce2019 re:Cap LT
Hibino Hisashi
[SAPPORO CEDEC] サービスの効果を高めるグリー内製ツールの技術と紹介
[SAPPORO CEDEC] サービスの効果を高めるグリー内製ツールの技術と紹介
gree_tech
SQL大量発行処理をいかにして高速化するか
SQL大量発行処理をいかにして高速化するか
Shogo Wakayama
Fluentdのお勧めシステム構成パターン
Fluentdのお勧めシステム構成パターン
Kentaro Yoshida
Hatena::Letの式年遷宮
Hatena::Letの式年遷宮
Takafumi ONAKA
仮想化環境の設計手法 〜プロのテクニック教えます〜
仮想化環境の設計手法 〜プロのテクニック教えます〜
VirtualTech Japan Inc.
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
NTT DATA Technology & Innovation
JiraとConfluenceのTips集
JiraとConfluenceのTips集
Hiroshi Ohnuki
Concourseで快適な自動化の旅
Concourseで快適な自動化の旅
Kazuto Kusama
マイクロサービス化デザインパターン - #AWSDevDay Tokyo 2018
マイクロサービス化デザインパターン - #AWSDevDay Tokyo 2018
Yusuke Suzuki
BuildKitによる高速でセキュアなイメージビルド
BuildKitによる高速でセキュアなイメージビルド
Akihiro Suda
RHEL on Azure、初めの一歩
RHEL on Azure、初めの一歩
Ryo Fujita
現場からみた Azure リファレンスアーキテクチャ答え合わせ
現場からみた Azure リファレンスアーキテクチャ答え合わせ
Kuniteru Asami
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
Kuberneteの運用を支えるGitOps
Kuberneteの運用を支えるGitOps
shunki fujiwara
Ingress on Azure Kubernetes Service
Ingress on Azure Kubernetes Service
Toru Makabe
SQLアンチパターン メンター用資料
SQLアンチパターン メンター用資料
Hironori Miura
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
Osamu Shimoda
SeleniumConf16 UK参加報告
SeleniumConf16 UK参加報告
Osamu Shimoda
More Related Content
What's hot
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
Yahoo!デベロッパーネットワーク
5分で出来る!イケてるconfluenceページ
5分で出来る!イケてるconfluenceページ
CLARA ONLINE, Inc.
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
Trainocate Japan, Ltd.
AWS re:Inforce2019 re:Cap LT
AWS re:Inforce2019 re:Cap LT
Hibino Hisashi
[SAPPORO CEDEC] サービスの効果を高めるグリー内製ツールの技術と紹介
[SAPPORO CEDEC] サービスの効果を高めるグリー内製ツールの技術と紹介
gree_tech
SQL大量発行処理をいかにして高速化するか
SQL大量発行処理をいかにして高速化するか
Shogo Wakayama
Fluentdのお勧めシステム構成パターン
Fluentdのお勧めシステム構成パターン
Kentaro Yoshida
Hatena::Letの式年遷宮
Hatena::Letの式年遷宮
Takafumi ONAKA
仮想化環境の設計手法 〜プロのテクニック教えます〜
仮想化環境の設計手法 〜プロのテクニック教えます〜
VirtualTech Japan Inc.
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
NTT DATA Technology & Innovation
JiraとConfluenceのTips集
JiraとConfluenceのTips集
Hiroshi Ohnuki
Concourseで快適な自動化の旅
Concourseで快適な自動化の旅
Kazuto Kusama
マイクロサービス化デザインパターン - #AWSDevDay Tokyo 2018
マイクロサービス化デザインパターン - #AWSDevDay Tokyo 2018
Yusuke Suzuki
BuildKitによる高速でセキュアなイメージビルド
BuildKitによる高速でセキュアなイメージビルド
Akihiro Suda
RHEL on Azure、初めの一歩
RHEL on Azure、初めの一歩
Ryo Fujita
現場からみた Azure リファレンスアーキテクチャ答え合わせ
現場からみた Azure リファレンスアーキテクチャ答え合わせ
Kuniteru Asami
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
Kuberneteの運用を支えるGitOps
Kuberneteの運用を支えるGitOps
shunki fujiwara
Ingress on Azure Kubernetes Service
Ingress on Azure Kubernetes Service
Toru Makabe
SQLアンチパターン メンター用資料
SQLアンチパターン メンター用資料
Hironori Miura
What's hot
(20)
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
At least onceってぶっちゃけ問題の先送りだったよね #kafkajp
5分で出来る!イケてるconfluenceページ
5分で出来る!イケてるconfluenceページ
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
AWS re:Inforce2019 re:Cap LT
AWS re:Inforce2019 re:Cap LT
[SAPPORO CEDEC] サービスの効果を高めるグリー内製ツールの技術と紹介
[SAPPORO CEDEC] サービスの効果を高めるグリー内製ツールの技術と紹介
SQL大量発行処理をいかにして高速化するか
SQL大量発行処理をいかにして高速化するか
Fluentdのお勧めシステム構成パターン
Fluentdのお勧めシステム構成パターン
Hatena::Letの式年遷宮
Hatena::Letの式年遷宮
仮想化環境の設計手法 〜プロのテクニック教えます〜
仮想化環境の設計手法 〜プロのテクニック教えます〜
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
JiraとConfluenceのTips集
JiraとConfluenceのTips集
Concourseで快適な自動化の旅
Concourseで快適な自動化の旅
マイクロサービス化デザインパターン - #AWSDevDay Tokyo 2018
マイクロサービス化デザインパターン - #AWSDevDay Tokyo 2018
BuildKitによる高速でセキュアなイメージビルド
BuildKitによる高速でセキュアなイメージビルド
RHEL on Azure、初めの一歩
RHEL on Azure、初めの一歩
現場からみた Azure リファレンスアーキテクチャ答え合わせ
現場からみた Azure リファレンスアーキテクチャ答え合わせ
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
Kuberneteの運用を支えるGitOps
Kuberneteの運用を支えるGitOps
Ingress on Azure Kubernetes Service
Ingress on Azure Kubernetes Service
SQLアンチパターン メンター用資料
SQLアンチパターン メンター用資料
Similar to 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
Osamu Shimoda
SeleniumConf16 UK参加報告
SeleniumConf16 UK参加報告
Osamu Shimoda
Pull request時の画面差分取得の自動化
Pull request時の画面差分取得の自動化
Shunsuke Maeda
20170704 Pitaliumの新機能
20170704 Pitaliumの新機能
Osamu Shimoda
Adobe Primetime & Adobe Marketing Cloud: オールスクリーン対応のプレミアム動画事業収益化ソリューション
Adobe Primetime & Adobe Marketing Cloud: オールスクリーン対応のプレミアム動画事業収益化ソリューション
Teiichi Ota
OSC京都 2015 LT 「テスト自動化の闇と向き合う」
OSC京都 2015 LT 「テスト自動化の闇と向き合う」
Osamu Shimoda
Windows 8 Developers カンファレンス
Windows 8 Developers カンファレンス
Kaoru NAKAMURA
[GrapeCity Web TECH FORUM 2018]レガシーからの移行 - 株式会社日本プロテック
[GrapeCity Web TECH FORUM 2018]レガシーからの移行 - 株式会社日本プロテック
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
Voicepic@FukuiMASeminar
Voicepic@FukuiMASeminar
Manabu Shimobe
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
Kentaro Matsumae
技術選択とアーキテクトの役割 (要約版)
技術選択とアーキテクトの役割 (要約版)
Toru Yamaguchi
iOSアプリ開発のテスト環境 - テストをはじめる最初の一歩 -
iOSアプリ開発のテスト環境 - テストをはじめる最初の一歩 -
Toshiyuki Hirata
Developer summit continuous deliveryとjenkins
Developer summit continuous deliveryとjenkins
Kohsuke Kawaguchi
自前でcloud foundryを構築してgooのビッグサービスをカットオーバーした話
自前でcloud foundryを構築してgooのビッグサービスをカットオーバーした話
和也 大木
アプリリリース後に後悔しないための20のこと
アプリリリース後に後悔しないための20のこと
leverages_event
Wankuma0402
Wankuma0402
c-mitsuba
5分でわかるVISUAL TESTING FOR HTML5
5分でわかるVISUAL TESTING FOR HTML5
Osamu Shimoda
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
SEGADevTech
STFとAppiumをもちいたAndroidアプリの自動テスト
STFとAppiumをもちいたAndroidアプリの自動テスト
Toshiyuki Hirata
第5回業開中心会議
第5回業開中心会議
Kaoru NAKAMURA
Similar to 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
(20)
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
SeleniumConf16 UK参加報告
SeleniumConf16 UK参加報告
Pull request時の画面差分取得の自動化
Pull request時の画面差分取得の自動化
20170704 Pitaliumの新機能
20170704 Pitaliumの新機能
Adobe Primetime & Adobe Marketing Cloud: オールスクリーン対応のプレミアム動画事業収益化ソリューション
Adobe Primetime & Adobe Marketing Cloud: オールスクリーン対応のプレミアム動画事業収益化ソリューション
OSC京都 2015 LT 「テスト自動化の闇と向き合う」
OSC京都 2015 LT 「テスト自動化の闇と向き合う」
Windows 8 Developers カンファレンス
Windows 8 Developers カンファレンス
[GrapeCity Web TECH FORUM 2018]レガシーからの移行 - 株式会社日本プロテック
[GrapeCity Web TECH FORUM 2018]レガシーからの移行 - 株式会社日本プロテック
Voicepic@FukuiMASeminar
Voicepic@FukuiMASeminar
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
技術選択とアーキテクトの役割 (要約版)
技術選択とアーキテクトの役割 (要約版)
iOSアプリ開発のテスト環境 - テストをはじめる最初の一歩 -
iOSアプリ開発のテスト環境 - テストをはじめる最初の一歩 -
Developer summit continuous deliveryとjenkins
Developer summit continuous deliveryとjenkins
自前でcloud foundryを構築してgooのビッグサービスをカットオーバーした話
自前でcloud foundryを構築してgooのビッグサービスをカットオーバーした話
アプリリリース後に後悔しないための20のこと
アプリリリース後に後悔しないための20のこと
Wankuma0402
Wankuma0402
5分でわかるVISUAL TESTING FOR HTML5
5分でわかるVISUAL TESTING FOR HTML5
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
STFとAppiumをもちいたAndroidアプリの自動テスト
STFとAppiumをもちいたAndroidアプリの自動テスト
第5回業開中心会議
第5回業開中心会議
More from Osamu Shimoda
hifiveで実現するエンタープライズHTML5システム開発
hifiveで実現するエンタープライズHTML5システム開発
Osamu Shimoda
HTML5時代のUIテスト自動化
HTML5時代のUIテスト自動化
Osamu Shimoda
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
Osamu Shimoda
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
Osamu Shimoda
JISAAwards2013講演会資料(hifive)
JISAAwards2013講演会資料(hifive)
Osamu Shimoda
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5
Osamu Shimoda
More from Osamu Shimoda
(6)
hifiveで実現するエンタープライズHTML5システム開発
hifiveで実現するエンタープライズHTML5システム開発
HTML5時代のUIテスト自動化
HTML5時代のUIテスト自動化
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
JISAAwards2013講演会資料(hifive)
JISAAwards2013講演会資料(hifive)
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
1.
私がSeleniumを使って スクリーンショット を撮るまでに出会っ た闇の全て 新日鉄住金ソリューションズ 石川 真也 (Selenium歴11ヶ月) Copyright
© 2015 NS Solutions Corporation, All rights reserved. 1
2.
End to End(E2E)テスト Copyright
© 2015 NS Solutions Corporation, All rights reserved. 2
3.
E2Eテスト • アプリケーションの 「最初から最後まで」の動作を たしかめるテスト • ブラウザなどを使う Copyright
© 2015 NS Solutions Corporation, All rights reserved. 3
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
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.
目標 Seleniumを使って スクリーンショットを撮ろう! Copyright © 2015
NS Solutions Corporation, All rights reserved. 12
13.
目標 Seleniumを使って スクリーンショットを撮ろう! Copyright © 2015
NS Solutions Corporation, All rights reserved. 13
14.
以下、 Copyright © 2015
NS Solutions Corporation, All rights reserved. 14
15.
Seleniumでスクリーンショットを 撮ろうとした時の 闇(はまりどころ)を紹介 Copyright © 2015
NS Solutions Corporation, All rights reserved. 15
16.
の闇ブラウザ依存 Copyright © 2015
NS Solutions Corporation, All rights reserved. 16
17.
File screenshotFile =
((Screenshot)driver).getScreenshotAs(file); Copyright © 2015 NS Solutions Corporation, All rights reserved. 17
18.
可視範囲のみ いろんなバー映り込む Copyright © 2015
NS Solutions Corporation, All rights reserved. 18 Internet Explorer Google Chrome Safari(iOS)
19.
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. 19
20.
TakesScreenshot interface(意訳) 実装するときは下記の順でどれか返してくれればいいよ。 ブラウザによってベストエフォートで実装してね。 • ページ全体 •
現在のウインドウ • 現在のフレームの可視範囲 • ブラウザも含むディスプレイ全体 http://selenium.googlecode.com/git/docs/api/java/org/openqa/selenium/TakesScreenshot.html Copyright © 2015 NS Solutions Corporation, All rights reserved. 20
21.
闇が深い 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 アクセスするたびに内容が変わる ウィジェット →スクリーンショットは撮るが 差分検知のときは無視する スクロールに追従する要素 →スクリーンショットを撮るときに 隠す(hidden)
25.
サブピクセルの闇 Copyright © 2015
NS Solutions Corporation, All rights reserved. 25
26.
部分スクリーンショット取得時 身に覚えのないdiff Copyright © 2015
NS Solutions Corporation, All rights reserved. 26
27.
よく調べると Copyright © 2015
NS Solutions Corporation, All rights reserved. 27 要素A 要素A top: 200px left: 100px top: 300.5px left: 100px 要素Aの位置が変わっただけで 中身が変わるもよう
28.
原因→サブピクセルレンダリング • ブラウザ上の要素の座標は実数 • 小数点以下の値を正確に扱おう と試みた結果、微妙な差が出る Copyright
© 2015 NS Solutions Corporation, All rights reserved. 28
29.
ブラウザ毎の座標の扱いと レンダリング ブラウザ名 状態 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. 29
30.
闇が深い Copyright © 2015
NS Solutions Corporation, All rights reserved. 30
31.
対策 Copyright © 2015
NS Solutions Corporation, All rights reserved. 31 要素A 要素A top: 200px left: 100px top: 300.5px left: 100px 要素の座標が同じなら、 描画結果は同じになるはず…
32.
対策 Copyright © 2015
NS Solutions Corporation, All rights reserved. 32 要素A 要素A top: 0px left: 0px top: 0px left: 0px 要素Aのスクリーンショットを 撮る間だけ、固定座標に移動
33.
なぜかブラウザで開いている 画面と取得したスクリーン ショットが違うの闇 Copyright © 2015
NS Solutions Corporation, All rights reserved. 33
34.
IE8でスクリーンショット取得時 Copyright © 2015
NS Solutions Corporation, All rights reserved. 34 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 ○○のページ スクリーンショットにすると ほんの少しだけ幅が狭い…??
35.
ウィンドウサイズを勝手に変えて いるのは誰? Copyright © 2015
NS Solutions Corporation, All rights reserved. 35 Selenium クライアント ドライバ ブラウザ スクリーンショット 撮って! どうぞ(画像) Json wire protocol ブラウザ拡張機能 OSのネイティブ機能 ウインドウサイズ 変えます
36.
対策 Copyright © 2015
NS Solutions Corporation, All rights reserved. 36 Selenium クライアント ドライバ ブラウザ 改修(C++)
37.
闇が深い Copyright © 2015
NS Solutions Corporation, All rights reserved. 37
38.
もうたくさんだ… Copyright © 2015
NS Solutions Corporation, All rights reserved. 38
39.
私はただ (きれいな)スクリーンショット を撮りたいだけなのに!!!! Copyright © 2015
NS Solutions Corporation, All rights reserved. 39
40.
これからSeleniumを使う人たちに 同じ闇を味わってほしくない Copyright © 2015
NS Solutions Corporation, All rights reserved. 40
41.
そこで Copyright © 2015
NS Solutions Corporation, All rights reserved. 41
42.
作りました。 Copyright © 2015
NS Solutions Corporation, All rights reserved. 42
43.
Copyright © 2015
NS Solutions Corporation, All rights reserved. 43 Apache2.0 License
44.
Copyright © 2015
NS Solutions Corporation, All rights reserved. 44 IE Safari Chrome テスト スクリプト Pitalium 対象 ブラウザ ・IE ・Chrome ・Safari
45.
テスト自動化の闇テスト自動化の闇と向き合う Copyright © 2015
NS Solutions Corporation, All rights reserved. 45
46.
まとめ Copyright © 2015
NS Solutions Corporation, All rights reserved. 46 • マルチデバイス対応の闇は深い • スクリーンショット取得が特に 深い • そんな闇を祓うツール Pitaliumをよろしくお願いします
47.
続きはWeb(or 展示ブース)で! https://www.htmlhifive.com/ Copyright ©
2015 NS Solutions Corporation, All rights reserved. 47 ・ NS Solutions、NS(ロゴ)、NSSOLは、新日鉄住金ソリューションズ株式会社の登録商標です。 ・ hifive、hifive(ロゴ)は、新日鉄住金ソリューションズ株式会社の登録商標です。 ・ Pitalium、Pitalium(ロゴ)は、新日鉄住金ソリューションズ株式会社の商標です。 ・ Javaは、米国ORACLE Corp.の登録商標です。 ・ HTML5 Logo by W3C ・ その他本文記載の会社名及び製品名は、それぞれ各社の商標又は登録商標です。 Pitaliumのデモも あるよ!
Download now