![1. 画面遷移グラフ及び各画面の取得
X-PERT
Web
アプリ
(URL)
モデル
獲得器
(クローラー)
グラフ比較
振舞いXBI
画面遷移グラフ
Crawljax[2]を利用してWebアプリをクロール,
要素比較
各ページの状態?画面遷移グラフを取得[6]
DOM要素
対応付け
対応するWebページ
Text内容XBI
Visual内容XBI
レイアウト比較
構造XBI
XBIレポート
11
11](https://image.slidesharecdn.com/slideshare-131031022731-phpapp01/85/X-PERT-Accurate-Identification-of-Cross-Browser-Issues-in-Web-Applications-ICSE-13-11-320.jpg)
![2.1. 画面遷移グラフ比較
X-PERT
Web
アプリ
(URL)
モデル
獲得器
(クローラー)
グラフ比較
振舞いXBI
複数ブラウザから得られたグラフを比較
画面遷移グラフ
対応するノード/エッジがなければ振舞いXBI
要素比較
先行研究の手法を踏襲[6]
DOM要素
対応付け
対応するWebページ
Text内容XBI
Visual内容XBI
レイアウト比較
構造XBI
XBIレポート
12](https://image.slidesharecdn.com/slideshare-131031022731-phpapp01/85/X-PERT-Accurate-Identification-of-Cross-Browser-Issues-in-Web-Applications-ICSE-13-12-320.jpg)
![2.2. 対応する要素を特定
X-PERT
Web
アプリ
(URL)
モデル
獲得器
1. (クローラー)
Xpath(要素の位置)
2. 属性値(フォントサイズ等)
3. 子ノードの情報 画面遷移グラフ
を元に対応するノードを特定[5,6]
DOM要素
対応付け
対応するWebページ
グラフ比較
振舞いXBI
要素比較
Text内容XBI
Visual内容XBI
レイアウト比較
構造XBI
XBIレポート
13
DOM: Webページの表現?操作のため，要素をツリー構造で扱う インタフェース](https://image.slidesharecdn.com/slideshare-131031022731-phpapp01/85/X-PERT-Accurate-Identification-of-Cross-Browser-Issues-in-Web-Applications-ICSE-13-13-320.jpg)
![2.3. 対応する要素の比較
X-PERT
Web
アプリ
(URL)
モデル
対応する要素の比較
グラフ比較
獲得器
1. テキストを比較 [6]
(クローラー)
2. スクリーンショットの色情報を元に比較振舞いXBI
比較自体は[6]と同様だが，DOMツリーにおけるリーフ
ノードだけを考慮することでfalse positiveを軽減
画面遷移グラフ
要素比較
DOM要素
対応付け
対応するWebページ
Text内容XBI
Visual内容XBI
レイアウト比較
構造XBI
XBIレポート
14](https://image.slidesharecdn.com/slideshare-131031022731-phpapp01/85/X-PERT-Accurate-Identification-of-Cross-Browser-Issues-in-Web-Applications-ICSE-13-14-320.jpg)
![実験
研究課題
1. X-PERTは実際にXBIを発見出来るか？
また，相対的位置XBI検出アルゴリズムは有用か？
2.
X-PERTのXBI検出能力は既存研究と比べて有効か？
実際にX-PERTを適用，既存研究と比較
14のWebサイト
?
?
?
?
[6]の評価に利用したもの6つ
本研究の動機付けの例
XBIの実態調査に利用したサイト3つ
ランダムURLサービス*で出てきた4つ
X-PERT
CROSSCHECK+
[6]を改良したもの
VER. 14.0.1
18
VER. 9.0.9
(*) http://www.uroulette.com/](https://image.slidesharecdn.com/slideshare-131031022731-phpapp01/85/X-PERT-Accurate-Identification-of-Cross-Browser-Issues-in-Web-Applications-ICSE-13-18-320.jpg)
![スライドで言及した関連研究
[2] A. Mesbah and M. R. Prasad, “Automated cross-browser compatibility
testing,” in Proceeding of the 33rd International Conference on Software
Engineering (ICSE). ACM, May 2011, pp. 561–570.
[5] S. Roy Choudhary, H. Versee, and A. Orso, “WebDiff: Automated
identification of cross-browser issues in web applications,” in Proceeding
of the 2010 IEEE International Conference on Software Maintenance
(ICSM). IEEE, September 2010, pp. 1–10.
[6] S. Roy Choudhary, M. R. Prasad, and A. Orso, “Crosscheck: Combining
crawling and differencing to better detect cross-browser
incompatibilities in web applications,” in Proceedings of the IEEE Fifth
International Conference on Software Testing, Verification, and Validation
(ICST). IEEE, April 2012, pp. 171–180.
27](https://image.slidesharecdn.com/slideshare-131031022731-phpapp01/85/X-PERT-Accurate-Identification-of-Cross-Browser-Issues-in-Web-Applications-ICSE-13-27-320.jpg)
X-PERT: Accurate Identification of Cross-Browser Issues in Web Applications (ICSE’13) 輪講用資料
- 1. X-PERT: Accurate Identification of Cross-Browser Issues in Web Applications (ICSE’13) 輪講用資料 1
- 2. X-PERT: Accurate Identification of Cross-Browser Issues in Web Applications 著者 Shauvik Roy Choudhary(ジョージア工科大学, アメリカ) Mukul R. Prasad (アメリカ富士通研) Alessandro Orso(ジョージア工科大学) 出典 The 35th International Conference on Software Engineering (ICSE 2013) Acceptance rate: 18.5% (85/461) 2
- 3. X-PERT: Accurate Identification of Cross-Browser Issues in Web Applications 研究領域 ブラウザ間互換性問題 の自動検出 (Cross-Browser Incompatibilities, XBI) 貢献 ? 100のWebサイトを調査しXBIを分類 ? 構造, 内容(Text, Visual), 挙動 ? レイアウト(構造) XBIに特化した新手法と既存手法を 融合させたX-PERTツール (http://gatech.github.io/xpert/) ? 実験的評価: 最先端の手法よりも高いXBI検出率 3
- 7. XBIの実態調査: 100のWebサイト 調査手法 外部サービス*を利用してランダムなURLを取得 Firefox, Internet Explorerを用いて5分間探索 × 100 1. 2. 発見 ? 23のWebサイトで，合計27のXBIを発見！ ? 大きく3つに分類できそう 分類 数 説明 構造 1 3 13 ページ上で要素の配置が異なる 2 5 内容 Visual 3 7 振舞い 4 2 Text 異なるテキストが表示される ある要素の見た目が異なる 機能的振舞いが異なる * http://random.yahoo.com/bin/ryl 1 4 2 7 7
- 8. XBIの実態調査: 100のWebサイト 調査手法 1. 2. 外部サービス*を利用してランダムなURLを取得 Firefox, Internet Explorerを用いて5分間探索 × 100 発見 ? 23のWebサイトで，合計27のXBIを発見！ XBIは広く世の中に存在する問題 ? 大きく3つに分類できそう ? 3種類の独立したXBI: それぞれ特化した検出手法を使えそう 3 ? 構造XBIが一番多い(13/23 = 53%)ので対策が必要 分類 数 説明 ? 構造 1 13 ページ上で要素の配置が異なる 2 5 内容 Visual 3 7 振舞い 4 2 Text 1 4 異なるテキストが表示される ある要素の見た目が異なる 機能的振舞いが異なる * http://random.yahoo.com/bin/ryl 2 8 8
- 9. 関連研究 著者たちは既にこの分野で多くの貢献 ツール名 手法 会議 WEBDIFF DOMおよびスクリーンショットの比較 ICSM’10 CROSST 自動クローリングにより，動的な振舞いの違いを検出 ICSE’11 CROSSCHECK 上記2つを融合 + 機械学習によって誤検出を軽減 ICST’12 その他の研究(JSTools’12)や一般のツール(Browsera, MogTest, etc…) もあるが，ヒューリスティックに基づいてたり，内部技術が不明瞭 本研究 最先端(著者らのツール)を発展させその性能を改善 WEBDIFF 単ページのXBI CROSST CROSSCHECK X-PERT 相対的位置XBI 振舞いの違い 著者らの研究の発展(ICSE’13以外は未読のため誤っている可能性有) 9
- 10. 提案ツール: X-PERT(Cross Platform Error ReporTer) X-PERT Web アプリ (URL) モデル 獲得器 (クローラー) グラフ比較 振舞いXBI 画面遷移グラフ 要素比較 DOM要素 対応付け 対応するWebページ Text内容XBI Visual内容XBI レイアウト比較 構造XBI XBIレポート 10
- 13. 2.2. 対応する要素を特定 X-PERT Web アプリ (URL) モデル 獲得器 1. (クローラー) Xpath(要素の位置) 2. 属性値(フォントサイズ等) 3. 子ノードの情報 画面遷移グラフ を元に対応するノードを特定[5,6] DOM要素 対応付け 対応するWebページ グラフ比較 振舞いXBI 要素比較 Text内容XBI Visual内容XBI レイアウト比較 構造XBI XBIレポート 13 DOM: Webページの表現?操作のため，要素をツリー構造で扱う インタフェース
- 14. 2.3. 対応する要素の比較 X-PERT Web アプリ (URL) モデル 対応する要素の比較 グラフ比較 獲得器 1. テキストを比較 [6] (クローラー) 2. スクリーンショットの色情報を元に比較振舞いXBI 比較自体は[6]と同様だが，DOMツリーにおけるリーフ ノードだけを考慮することでfalse positiveを軽減 画面遷移グラフ 要素比較 DOM要素 対応付け 対応するWebページ Text内容XBI Visual内容XBI レイアウト比較 構造XBI XBIレポート 14
- 16. 相対的位置XBI検出: Alignmentグラフの定義 Alignmentグラフを定義: 要素間の視覚的な位置関係(親子?兄弟)を表現 親子関係 兄弟関係 定義 e1, e2: 要素, L(e1), L(e2): 要素の表示領域 定義1(contain) 以下の1,2いずれかのときe1 contains e2 1. L(e1) が L(e2)を真に内包 2. L(e1) = L(e2)かつe1がDOM Tree上でe2の祖先 定義2(親) 以下の1,2が共に成立ならe1はe2の親 1. e1 contains e2 2. e1 contains e3かつe3 contains e2 となるe3が存在しない Motivating Exampleに対応する Alignment Graph (一部省略) 定義3(兄弟) 共通の親要素を持つ要素は兄弟 16
- 17. 相対的位置XBI検出: Alignmentグラフ構築?比較 DOMツリーおよびスクリーンショットをもとに Alignmentグラフを構築できる (論文Algorithm 2) 複数のAlignment グラフを比較することで レイアウトに関するXBIを検出可能 17
- 18. 実験 研究課題 1. X-PERTは実際にXBIを発見出来るか？ また，相対的位置XBI検出アルゴリズムは有用か？ 2. X-PERTのXBI検出能力は既存研究と比べて有効か？ 実際にX-PERTを適用，既存研究と比較 14のWebサイト ? ? ? ? [6]の評価に利用したもの6つ 本研究の動機付けの例 XBIの実態調査に利用したサイト3つ ランダムURLサービス*で出てきた4つ X-PERT CROSSCHECK+ [6]を改良したもの VER. 14.0.1 18 VER. 9.0.9 (*) http://www.uroulette.com/
- 19. RQ1: X-PERTの性能 対象 アプリ アプリ別?種類別XBI発見数 (true positive, false positive) 振舞い TP FP 構造 TP FP 内容(Text) TP FP 内容(Visual) TP FP 合計 TP FP 0 0 3 6 9 2 0 2 2 1 6 0 0 0 31 Organizer 1 0 9 0 0 0 0 0 GrantaBooks 16 0 11 0 0 0 0 0 DesignTrust 2 0 5 3 0 0 0 0 DivineLife 7 0 3 6 1 0 0 0 SaiBaba 2 0 2 9 0 0 0 0 Breakaway 0 0 10 2 0 0 0 0 Conference 2 0 3 0 1 0 1 0 Fisherman 1 0 3 1 0 1 1 0 Valleyforge 0 0 2 2 0 0 1 0 UniMelb 2 0 0 0 0 0 0 1 Konqueror 0 0 0 0 0 0 0 6 UBC 0 0 0 0 0 0 0 0 BMVBS 0 0 0 0 0 0 0 0 StarWars 0 0 12 0 0 0 0 0 10 27 7 11 4 10 7 5 3 2 0 0 0 12 60 23 2 1 3 7 98 合計 33 0 19
- 20. RQ1: X-PERTの性能 対象 アプリ アプリ別?種類別XBI発見数 (true positive, false positive) 振舞い TP FP 構造 TP FP 内容(Text) TP FP Organizer 1 0 9 0 0 GrantaBooks 16 0 11 0 0 DesignTrust 2 0 5 3 0 DivineLife 7 0 3 6 1 SaiBaba 2 0 2 9 0 Breakaway 0 0 10 2 0 Conference 2 0 3 0 1 Fisherman 1 0 3 1 0 Valleyforge 0 0 2 2 0 構造XBIを多く発見できた Konqueror 0 0 0 0 提案手法が有効に働いている UBC 0 0 0 0 UniMelb 2 0 0 0 0 0 0 BMVBS 0 0 0 0 0 StarWars 0 0 12 0 0 60 23 2 合計 33 0 内容(Visual) TP FP 合計 TP FP 10 0 0 0 0 27 0 0 0 0 7 3 0 0 0 11 6 0 0 0 4 9 0 0 0 10 2 0 1 0 7 0 1 1 0 5 2 0 1 0 3 2 0 0 1 2 XBIを正しく発見できた 1 0 0 6 0 6 (76% precision) 0 0 0 0 0 0 0 0 0 0 0 0 0 12 0 0 0 0 1 3 7 98 31 20
- 22. RQ2: CROSSCHECK+との比較 対象 XBI アプリ 総数 X-PERTとCROSSCHECK+(最先端ツール)との性能比較 TP X-PERT FP Recall 重複 TP CROSSCHECK+ FP Recall 重複 Organizer 10 10 0 100% 0 8 2 80% 13 GrantaBooks 27 27 0 100% 0 27 1 100% 0 DesignTrust 7 7 3 100% 0 6 122 86% 3 DivineLife 11 11 6 100% 0 10 24 91% 3 SaiBaba 5 4 9 80% 10 Breakaway 13 10 2 77% 0 4 53 少ないfalse positive80% Conference 7 7 0 Fisherman 5 5 2 Valleyforge 3 3 UniMelb 2 2 1 100% Konqueror 0 0 6 100% UBC 0 0 0 100% BMVBS 1 0 0 0% 0 0 2 0% 0 StarWars 12 12 0 100% 0 10 91 83% 3 合計 103 98 31 95% 1 86 389 83% 52 1 7 49 54% 12 100% 0 7 0 100% 0 100% 0 4 5 80% 8 1 1 33% 0 0 2 27 100% 0 0 0 11 100% 0 0 0 1 100% 少ない重複レポート 0 2 100% 0 高いRecall (発見率) 22
- 23. まとめ XBIは重要な問題 (23%のWebサイトに存在) ? ? 100のWebサイトを調査しXBIsを分類 分類した種別ごとに以下をうまく融合したツールX-PERT* 最先端の既存手法 ? レイアウト(構造) XBIに特化した新手法 ? ? 実験的評価: 最先端の手法より正確にXBI検出 (76% precision, 95% recall) Future work ? ? XBIsの自動fix Cross platform Incompatibilities (Desktop, web, mobile..)検出 23 (*) http://gatech.github.io/xpert/
- 24. 私見 ○ 現実のWebアプリを評価して解くべき問題の裏付け (XBIは広く起こっている問題，構造XBIが最も多い) ○ 既存のすごいツール＋１つのアイディアでよりすごいツールに △ 関連研究が著者のものばかりでチート感 × 性能向上の理由がどこにあるのか不明瞭 24
- 27. スライドで言及した関連研究 [2] A. Mesbah and M. R. Prasad, “Automated cross-browser compatibility testing,” in Proceeding of the 33rd International Conference on Software Engineering (ICSE). ACM, May 2011, pp. 561–570. [5] S. Roy Choudhary, H. Versee, and A. Orso, “WebDiff: Automated identification of cross-browser issues in web applications,” in Proceeding of the 2010 IEEE International Conference on Software Maintenance (ICSM). IEEE, September 2010, pp. 1–10. [6] S. Roy Choudhary, M. R. Prasad, and A. Orso, “Crosscheck: Combining crawling and differencing to better detect cross-browser incompatibilities in web applications,” in Proceedings of the IEEE Fifth International Conference on Software Testing, Verification, and Validation (ICST). IEEE, April 2012, pp. 171–180. 27
- 28. XBIの例とその原因 原因となるコード 原因 1 #button_bar { width: 225px; } (CSS) 3 デフォルトのボーダー? パディング幅が違うため， 固定幅に2つめのボタンが 入ったり，2行目になった り 2 $(“paperlist”).innerHTML = $(“paperlist”).childEleme ntCount + “ papers accepted”; (JavaScript) 3 IEではimgタグの onclick属性は未サ ポート H1 {text-shadow: 2px 2px 2px red}; (CSS) CSSのtext-shadowプ ロパティがIEでは未 サポート 2 childElementCountプ ロパティはIEでは未 サポート <img src=/slideshow/slideshare-27767262/27767262/“dates.png” onclick=“navigate(event) ” /> (HTML) 1 4 4 1 2 3 4 ボタンの配置が異なる 論文数がundefined 文字の装飾(影)が無い ボタンクリックで遷移しない 28