• Like
  • Save
X-PERT: Accurate Identification of Cross-Browser Issues in Web Applications (ICSE’13) 輪講用資料
Upcoming SlideShare
Loading in...5
×
 

X-PERT: Accurate Identification of Cross-Browser Issues in Web Applications (ICSE’13) 輪講用資料

on

  • 260 views

研究室輪講用資料です.

研究室輪講用資料です.
発表論文は「X-PERT: Accurate Identification of Cross-Browser Issues in Web Applications」で,ICSE2013に採択されています.

Statistics

Views

Total Views
260
Views on SlideShare
260
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    X-PERT: Accurate Identification of Cross-Browser Issues in Web Applications (ICSE’13) 輪講用資料 X-PERT: Accurate Identification of Cross-Browser Issues in Web Applications (ICSE’13) 輪講用資料 Presentation Transcript

    • 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 著者 Shauvik Roy Choudhary(ジョージア工科大学, アメリカ) Mukul R. Prasad (アメリカ富士通研) Alessandro Orso(ジョージア工科大学) 出典 The 35th International Conference on Software Engineering (ICSE 2013) Acceptance rate: 18.5% (85/461) 2
    • 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
    • XBIs(Cross-Browser Incompatibilities)の例 国際会議のWebサイト ホーム Developed on 重要な日時 採択論文一覧 4
    • XBIs(Cross-Browser Incompatibilities)の例 国際会議のWebサイト ホーム 重要な日時 採択論文一覧 5
    • XBIs(Cross-Browser Incompatibilities)の例 国際会議のWebサイト 3 ホーム 1 4 2 4 重要な日時 採択論文一覧 1 2 3 4 ボタンの配置が異なる 論文数がundefined 文字の装飾(影)が無い 6 ボタンクリックで遷移しない
    • 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
    • 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
    • 関連研究 著者たちは既にこの分野で多くの貢献 ツール名 手法 会議 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
    • 提案ツール: X-PERT(Cross Platform Error ReporTer) X-PERT Web アプリ (URL) モデル 獲得器 (クローラー) グラフ比較 振舞いXBI 画面遷移グラフ 要素比較 DOM要素 対応付け 対応するWebページ Text内容XBI Visual内容XBI レイアウト比較 構造XBI XBIレポート 10
    • 1. 画面遷移グラフ及び各画面の取得 X-PERT Web アプリ (URL) モデル 獲得器 (クローラー) グラフ比較 振舞いXBI 画面遷移グラフ Crawljax[2]を利用してWebアプリをクロール, 要素比較 各ページの状態・画面遷移グラフを取得[6] DOM要素 対応付け 対応するWebページ Text内容XBI Visual内容XBI レイアウト比較 構造XBI XBIレポート 11 11
    • 2.1. 画面遷移グラフ比較 X-PERT Web アプリ (URL) モデル 獲得器 (クローラー) グラフ比較 振舞いXBI 複数ブラウザから得られたグラフを比較 画面遷移グラフ 対応するノード/エッジがなければ振舞いXBI 要素比較 先行研究の手法を踏襲[6] DOM要素 対応付け 対応するWebページ Text内容XBI Visual内容XBI レイアウト比較 構造XBI XBIレポート 12
    • 2.2. 対応する要素を特定 X-PERT Web アプリ (URL) モデル 獲得器 1. (クローラー) Xpath(要素の位置) 2. 属性値(フォントサイズ等) 3. 子ノードの情報 画面遷移グラフ を元に対応するノードを特定[5,6] DOM要素 対応付け 対応するWebページ グラフ比較 振舞いXBI 要素比較 Text内容XBI Visual内容XBI レイアウト比較 構造XBI XBIレポート 13 DOM: Webページの表現・操作のため,要素をツリー構造で扱う インタフェース
    • 2.3. 対応する要素の比較 X-PERT Web アプリ (URL) モデル 対応する要素の比較 グラフ比較 獲得器 1. テキストを比較 [6] (クローラー) 2. スクリーンショットの色情報を元に比較振舞いXBI 比較自体は[6]と同様だが,DOMツリーにおけるリーフ ノードだけを考慮することでfalse positiveを軽減 画面遷移グラフ 要素比較 DOM要素 対応付け 対応するWebページ Text内容XBI Visual内容XBI レイアウト比較 構造XBI XBIレポート 14
    • 2.4. 対応する要素のレイアウト比較 X-PERT Web アプリ (URL) モデル 獲得器 (クローラー) グラフ比較 振舞いXBI 画面遷移グラフ 要素比較 Text内容XBI 本研究の主要な貢献 Visual内容XBI DOM要素 Alignmentグラフの構築・比較による手法 対応付け 対応するWebページ レイアウト比較 構造XBI XBIレポート 15
    • 相対的位置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
    • 相対的位置XBI検出: Alignmentグラフ構築・比較 DOMツリーおよびスクリーンショットをもとに Alignmentグラフを構築できる (論文Algorithm 2) 複数のAlignment グラフを比較することで レイアウトに関するXBIを検出可能 17
    • 実験 研究課題 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/
    • 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
    • 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
    • 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% 0 4 53 80% 10 Breakaway 13 10 2 77% 1 7 49 54% 12 Conference 7 7 0 100% 0 7 0 100% 0 Fisherman 5 5 2 100% 0 4 5 80% 8 Valleyforge 3 3 2 100% 0 1 1 33% 0 UniMelb 2 2 1 100% 0 2 27 100% 0 Konqueror 0 0 6 100% 0 0 11 100% 0 UBC 0 0 0 100% 0 0 1 100% 0 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 21
    • 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
    • まとめ 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/
    • 私見 ○ 現実のWebアプリを評価して解くべき問題の裏付け (XBIは広く起こっている問題,構造XBIが最も多い) ○ 既存のすごいツール+1つのアイディアでよりすごいツールに △ 関連研究が著者のものばかりでチート感 × 性能向上の理由がどこにあるのか不明瞭 24
    • アブスト和訳 Webアプリが普及し,それらが動作するブラウザやプラットフォー ムも増えている今日,クロスブラウザ互換性問題(XBIs)は重大な関 心事となっている.現在までにXBI検出手法がいろいろ開発されて きたが,手動のものは人間が誤りを入れてしまったり時間がかかり すぎたりするし,自動のものは不正確だったり部分的にしかうまく いかずfalse positiveやfalse negativeを生み出しがちである.既存手法 のこれらの欠点を克服するため,我々は自動,正確,包括的なXBI 検出ツールX-PERTを開発した.X-PERTはいくつかの既存手法と新し い手法を組み合わせたものであり,我々が実世界のWebアプリケー ションに対して行った調査結果を元に構築されたツールである.提 案法の主な強みは,Webアプリケーションの様々な特性について, それぞれ適した異なるXBI検出技法を用いた点である.実験の結果, X-PERTは実世界のXBIを検出する能力において最先端の手法を上回 り,また,XBIの診断において開発者を助けるものであった. 25
    • X-PERTおよびCROSSCHECKのアーキテクチャ比較 X-PERT 26 CROSSCHECK
    • スライドで言及した関連研究 [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
    • 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=“dates.png” onclick=“navigate(event) ” /> (HTML) 1 4 4 1 2 3 4 ボタンの配置が異なる 論文数がundefined 文字の装飾(影)が無い ボタンクリックで遷移しない 28
    • 関連資料 著者によるスライド http://www.slideshare.net/alexorso/xpert ICSE’13勉強会で用いられた,九州大学の方のスライド http://qwik.jp/se-reading/9.files/W.pdf 29