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(ジョージア工科大学, アメリカ)
Muk...
X-PERT: Accurate Identification of
Cross-Browser Issues in Web Applications
研究領域
ブラウザ間互換性問題 の自動検出
(Cross-Browser Incompati...
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
文字の装...
XBIの実態調査: 100のWebサイト
調査手法
外部サービス*を利用してランダムなURLを取得
Firefox, Internet Explorerを用いて5分間探索

× 100

1.
2.

発見
 23のWebサイトで,合計27の...
XBIの実態調査: 100のWebサイト
調査手法
1.
2.

外部サービス*を利用してランダムなURLを取得
Firefox, Internet Explorerを用いて5分間探索

× 100

発見
 23のWebサイトで,合計27の...
関連研究
著者たちは既にこの分野で多くの貢献
ツール名

手法

会議

WEBDIFF

DOMおよびスクリーンショットの比較

ICSM’10

CROSST

自動クローリングにより,動的な振舞いの違いを検出 ICSE’11

CROSS...
提案ツール: X-PERT(Cross Platform Error ReporTer)
X-PERT
Web
アプリ
(URL)

モデル
獲得器
(クローラー)

グラフ比較
振舞いXBI
画面遷移グラフ

要素比較
DOM要素
対応付け
...
1. 画面遷移グラフ及び各画面の取得
X-PERT
Web
アプリ
(URL)

モデル
獲得器
(クローラー)

グラフ比較
振舞いXBI
画面遷移グラフ

Crawljax[2]を利用してWebアプリをクロール,
要素比較
各ページの状態・...
2.1. 画面遷移グラフ比較
X-PERT
Web
アプリ
(URL)

モデル
獲得器
(クローラー)

グラフ比較
振舞いXBI

複数ブラウザから得られたグラフを比較
画面遷移グラフ
対応するノード/エッジがなければ振舞いXBI
要素比較...
2.2. 対応する要素を特定
X-PERT
Web
アプリ
(URL)

モデル
獲得器
1. (クローラー)
Xpath(要素の位置)
2. 属性値(フォントサイズ等)
3. 子ノードの情報 画面遷移グラフ
を元に対応するノードを特定[5,6...
2.3. 対応する要素の比較
X-PERT
Web
アプリ
(URL)

モデル
対応する要素の比較
グラフ比較
獲得器
1. テキストを比較 [6]
(クローラー)
2. スクリーンショットの色情報を元に比較振舞いXBI
比較自体は[6]と同...
2.4. 対応する要素のレイアウト比較
X-PERT
Web
アプリ
(URL)

モデル
獲得器
(クローラー)

グラフ比較
振舞いXBI
画面遷移グラフ

要素比較
Text内容XBI
本研究の主要な貢献
Visual内容XBI
DOM要...
相対的位置XBI検出: Alignmentグラフの定義
Alignmentグラフを定義: 要素間の視覚的な位置関係(親子・兄弟)を表現
親子関係
兄弟関係

定義
e1, e2: 要素, L(e1), L(e2): 要素の表示領域

定義1(c...
相対的位置XBI検出: Alignmentグラフ構築・比較

DOMツリーおよびスクリーンショットをもとに
Alignmentグラフを構築できる (論文Algorithm 2)

複数のAlignment グラフを比較することで
レイアウトに関...
実験
研究課題
1. X-PERTは実際にXBIを発見出来るか?

また,相対的位置XBI検出アルゴリズムは有用か?

2.

X-PERTのXBI検出能力は既存研究と比べて有効か?
実際にX-PERTを適用,既存研究と比較

14のWebサイ...
RQ1: X-PERTの性能
対象
アプリ

アプリ別・種類別XBI発見数 (true positive, false positive)

振舞い
TP FP

構造

TP

FP

内容(Text)
TP
FP

内容(Visual)
T...
RQ1: X-PERTの性能
対象
アプリ

アプリ別・種類別XBI発見数 (true positive, false positive)

振舞い
TP FP

構造

TP

FP

内容(Text)
TP
FP

Organizer

1...
RQ2: CROSSCHECK+との比較
対象
XBI
アプリ 総数

X-PERTとCROSSCHECK+(最先端ツール)との性能比較

TP

X-PERT
FP
Recall

重複

TP

CROSSCHECK+
FP
Recall
...
RQ2: CROSSCHECK+との比較
対象
XBI
アプリ 総数

X-PERTとCROSSCHECK+(最先端ツール)との性能比較

TP

X-PERT
FP
Recall

重複

TP

CROSSCHECK+
FP
Recall
...
まとめ
XBIは重要な問題 (23%のWebサイトに存在)



100のWebサイトを調査しXBIsを分類
分類した種別ごとに以下をうまく融合したツールX-PERT*
最先端の既存手法
 レイアウト(構造) XBIに特化した新手法

...
私見
○ 現実のWebアプリを評価して解くべき問題の裏付け
(XBIは広く起こっている問題,構造XBIが最も多い)
○ 既存のすごいツール+1つのアイディアでよりすごいツールに

△ 関連研究が著者のものばかりでチート感
× 性能向上の理由がど...
アブスト和訳
Webアプリが普及し,それらが動作するブラウザやプラットフォー
ムも増えている今日,クロスブラウザ互換性問題(XBIs)は重大な関
心事となっている.現在までにXBI検出手法がいろいろ開発されて
きたが,手動のものは人間が誤りを入...
X-PERTおよびCROSSCHECKのアーキテクチャ比較

X-PERT

26

CROSSCHECK
スライドで言及した関連研究
[2] A. Mesbah and M. R. Prasad, “Automated cross-browser compatibility
testing,” in Proceeding of the 33rd I...
XBIの例とその原因
原因となるコード 原因

1

#button_bar { width:
225px; } (CSS)

3

デフォルトのボーダー・
パディング幅が違うため,
固定幅に2つめのボタンが
入ったり,2行目になった
り

2...
関連資料
著者によるスライド
http://www.slideshare.net/alexorso/xpert
ICSE’13勉強会で用いられた,九州大学の方のスライド
http://qwik.jp/se-reading/9.files/W.p...
Upcoming SlideShare
Loading in …5
×

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

425 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
425
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

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

×