1

X-PERT: Accurate Identification of Cross-Browser Issues in Web Applications (ICSE’13)

輪講用資料

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

3

貢献 100のWebサイトを調査しXBIを分類

構造, 内容(Text, Visual), 挙動

レイアウト(構造) XBIに特化した新手法と既存手法を融合させたX-PERTツール (http://gatech.github.io/xpert/)

実験的評価: 最先端の手法よりも高いXBI検出率

研究領域

ブラウザ間互換性問題 の自動検出

(Cross-Browser Incompatibilities, XBI)

X-PERT: Accurate Identification of Cross-Browser Issues in Web Applications

4

国際会議のWebサイト

XBIs(Cross-Browser Incompatibilities)の例

ホーム

重要な日時 採択論文一覧

Developed on

5

国際会議のWebサイト

XBIs(Cross-Browser Incompatibilities)の例

ホーム

重要な日時 採択論文一覧

6

国際会議のWebサイト

3

1

2

ボタンの配置が異なる

論文数がundefined

文字の装飾(影)が無い

ボタンクリックで遷移しない

1

2

3

4

4

XBIs(Cross-Browser Incompatibilities)の例

ホーム

重要な日時 採択論文一覧

4

7

XBIの実態調査: 100のWebサイト

発見

調査手法

1. 外部サービス*を利用してランダムなURLを取得

2. Firefox, Internet Explorerを用いて5分間探索

× 100

* http://random.yahoo.com/bin/ryl

分類 数 説明

構造 13 ページ上で要素の配置が異なる

内容 Text 5 異なるテキストが表示される

Visual 7 ある要素の見た目が異なる

振舞い 2 機能的振舞いが異なる

23のWebサイトで，合計27のXBIを発見！

大きく3つに分類できそう

1

2

3

4

1

2

3

4

7

8

XBIの実態調査: 100のWebサイト

発見

調査手法

1. 外部サービス*を利用してランダムなURLを取得

2. Firefox, Internet Explorerを用いて5分間探索

× 100

* http://random.yahoo.com/bin/ryl

分類 数 説明

構造 13 ページ上で要素の配置が異なる

内容 Text 5 異なるテキストが表示される

Visual 7 ある要素の見た目が異なる

振舞い 2 機能的振舞いが異なる

23のWebサイトで，合計27のXBIを発見！

大きく3つに分類できそう

1

2

3

4

1

2

3

4

8

XBIは広く世の中に存在する問題

3種類の独立したXBI: それぞれ特化した検出手法を使えそう

構造XBIが一番多い(13/23 = 53%)ので対策が必要

著者たちは既にこの分野で多くの貢献

9

関連研究

ツール名 手法 会議

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

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

CROSSCHECK 上記2つを融合 + 機械学習によって誤検出を軽減 ICST’12

その他の研究(JSTools’12)や一般のツール(Browsera, MogTest, etc…)

もあるが，ヒューリスティックに基づいてたり，内部技術が不明瞭

最先端(著者らのツール)を発展させその性能を改善

WEBDIFF

CROSST

CROSSCHECK X-PERT

振舞いの違い

単ページのXBI

相対的位置XBI

著者らの研究の発展(ICSE’13以外は未読のため誤っている可能性有)

本研究

提案ツール: X-PERT(Cross Platform Error ReporTer)

モデル 獲得器

(クローラー)

グラフ比較

DOM要素 対応付け

要素比較

画面遷移グラフ

振舞いXBI

Text内容XBI

対応するWebページ

Visual内容XBI

Web アプリ

(URL)

X-PERT

XBIレポート

レイアウト比較

構造XBI

10

11

モデル 獲得器

(クローラー)

グラフ比較

DOM要素 対応付け

要素比較

画面遷移グラフ

振舞いXBI

Text内容XBI

対応するWebページ

Visual内容XBI

Web アプリ

(URL)

X-PERT

XBIレポート

レイアウト比較

構造XBI

1. 画面遷移グラフ及び各画面の取得

Crawljax[2]を利用してWebアプリをクロール, 各ページの状態・画面遷移グラフを取得[6]

11

12

モデル 獲得器

(クローラー)

グラフ比較

DOM要素 対応付け

要素比較

画面遷移グラフ

振舞いXBI

Text内容XBI

対応するWebページ

Visual内容XBI

Web アプリ

(URL)

XBIレポート

レイアウト比較

構造XBI

2.1. 画面遷移グラフ比較

複数ブラウザから得られたグラフを比較 対応するノード/エッジがなければ振舞いXBI 先行研究の手法を踏襲[6]

X-PERT

13

モデル 獲得器

(クローラー)

グラフ比較

DOM要素 対応付け

要素比較

画面遷移グラフ

振舞いXBI

Text内容XBI

Visual内容XBI

Web アプリ

(URL)

XBIレポート

レイアウト比較

構造XBI

2.2. 対応する要素を特定

1. Xpath(要素の位置) 2. 属性値(フォントサイズ等) 3. 子ノードの情報 を元に対応するノードを特定[5,6]

X-PERT

対応するWebページ

DOM: Webページの表現・操作のため，要素をツリー構造で扱う インタフェース

14

モデル 獲得器

(クローラー)

グラフ比較

DOM要素 対応付け

要素比較

画面遷移グラフ

振舞いXBI

Text内容XBI

対応するWebページ

Visual内容XBI

Web アプリ

(URL)

XBIレポート

レイアウト比較

構造XBI

2.3. 対応する要素の比較

対応する要素の比較 1. テキストを比較 [6] 2. スクリーンショットの色情報を元に比較

比較自体は[6]と同様だが，DOMツリーにおけるリーフノードだけを考慮することでfalse positiveを軽減

X-PERT

15

モデル 獲得器

(クローラー)

グラフ比較

DOM要素 対応付け

要素比較

画面遷移グラフ

振舞いXBI

Text内容XBI

対応するWebページ

Visual内容XBI

Web アプリ

(URL)

XBIレポート

レイアウト比較

構造XBI

2.4. 対応する要素のレイアウト比較

本研究の主要な貢献 Alignmentグラフの構築・比較による手法

X-PERT

相対的位置XBI検出: Alignmentグラフの定義

Alignmentグラフを定義: 要素間の視覚的な位置関係(親子・兄弟)を表現

Motivating Exampleに対応する Alignment Graph (一部省略)

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

親子関係 兄弟関係

定義

16

以下の1,2いずれかのときe1 contains e2 1. L(e1) が L(e2)を真に内包 2. L(e1) = L(e2)かつe1がDOM Tree上でe2の祖先

以下の1,2が共に成立ならe1はe2の親

1. e1 contains e2 2. e1 contains e3かつe3 contains e2 となるe3が存在しない

定義1(contain)

共通の親要素を持つ要素は兄弟

定義2(親)

定義3(兄弟)

相対的位置XBI検出: Alignmentグラフ構築・比較

17

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

複数のAlignment グラフを比較することで レイアウトに関するXBIを検出可能

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

VER. 9.0.9

研究課題

(*) http://www.uroulette.com/

対象 アプリ

振舞い 構造 内容(Text) 内容(Visual) 合計 TP FP TP FP TP FP TP FP TP FP

Organizer 1 0 9 0 0 0 0 0 10 0 GrantaBooks 16 0 11 0 0 0 0 0 27 0 DesignTrust 2 0 5 3 0 0 0 0 7 3 DivineLife 7 0 3 6 1 0 0 0 11 6 SaiBaba 2 0 2 9 0 0 0 0 4 9

Breakaway 0 0 10 2 0 0 0 0 10 2 Conference 2 0 3 0 1 0 1 0 7 0 Fisherman 1 0 3 1 0 1 1 0 5 2 Valleyforge 0 0 2 2 0 0 1 0 3 2

UniMelb 2 0 0 0 0 0 0 1 2 1 Konqueror 0 0 0 0 0 0 0 6 0 6

UBC 0 0 0 0 0 0 0 0 0 0 BMVBS 0 0 0 0 0 0 0 0 0 0

StarWars 0 0 12 0 0 0 0 0 12 0

合計 33 0 60 23 2 1 3 7 98 31

RQ1: X-PERTの性能

19

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

対象 アプリ

振舞い 構造 内容(Text) 内容(Visual) 合計 TP FP TP FP TP FP TP FP TP FP

Organizer 1 0 9 0 0 0 0 0 10 0 GrantaBooks 16 0 11 0 0 0 0 0 27 0 DesignTrust 2 0 5 3 0 0 0 0 7 3 DivineLife 7 0 3 6 1 0 0 0 11 6 SaiBaba 2 0 2 9 0 0 0 0 4 9

Breakaway 0 0 10 2 0 0 0 0 10 2 Conference 2 0 3 0 1 0 1 0 7 0 Fisherman 1 0 3 1 0 1 1 0 5 2 Valleyforge 0 0 2 2 0 0 1 0 3 2

UniMelb 2 0 0 0 0 0 0 1 2 1 Konqueror 0 0 0 0 0 0 0 6 0 6

UBC 0 0 0 0 0 0 0 0 0 0 BMVBS 0 0 0 0 0 0 0 0 0 0

StarWars 0 0 12 0 0 0 0 0 12 0

合計 33 0 60 23 2 1 3 7 98 31

RQ1: X-PERTの性能

XBIを正しく発見できた

(76% precision)

構造XBIを多く発見できた 提案手法が有効に働いている

20

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

RQ2: CROSSCHECK+との比較

対象 アプリ

XBI 総数

X-PERT CROSSCHECK+ TP FP Recall 重複 TP 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

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

RQ2: CROSSCHECK+との比較

対象 アプリ

XBI 総数

X-PERT CROSSCHECK+ TP FP Recall 重複 TP 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 22

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

高いRecall (発見率)

少ない重複レポート

少ないfalse positive

23

まとめ

XBIは重要な問題 (23%のWebサイトに存在)

100のWebサイトを調査しXBIsを分類

分類した種別ごとに以下をうまく融合したツールX-PERT* 最先端の既存手法

レイアウト(構造) XBIに特化した新手法

実験的評価: 最先端の手法より正確にXBI検出

(76% precision, 95% recall)

(*) http://gatech.github.io/xpert/

Future work XBIsの自動fix

Cross platform Incompatibilities (Desktop, web, mobile..)検出

現実のWebアプリを評価して解くべき問題の裏付け

(XBIは広く起こっている問題，構造XBIが最も多い)

既存のすごいツール＋１つのアイディアでよりすごいツールに

関連研究が著者のものばかりでチート感

性能向上の理由がどこにあるのか不明瞭

24

私見

○

○

×

△

Webアプリが普及し，それらが動作するブラウザやプラットフォー

ムも増えている今日，クロスブラウザ互換性問題(XBIs)は重大な関

心事となっている．現在までにXBI検出手法がいろいろ開発されて

きたが，手動のものは人間が誤りを入れてしまったり時間がかかり

すぎたりするし，自動のものは不正確だったり部分的にしかうまく

いかずfalse positiveやfalse negativeを生み出しがちである．既存手法

のこれらの欠点を克服するため，我々は自動，正確，包括的なXBI

検出ツールX-PERTを開発した．X-PERTはいくつかの既存手法と新し

い手法を組み合わせたものであり，我々が実世界のWebアプリケー

ションに対して行った調査結果を元に構築されたツールである．提

案法の主な強みは，Webアプリケーションの様々な特性について，

それぞれ適した異なるXBI検出技法を用いた点である．実験の結果，

X-PERTは実世界のXBIを検出する能力において最先端の手法を上回

り，また，XBIの診断において開発者を助けるものであった．

25

アブスト和訳

26

X-PERTおよびCROSSCHECKのアーキテクチャ比較

X-PERT

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

スライドで言及した関連研究

28

XBIの例とその原因

原因となるコード 原因

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

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

$(“paperlist”).innerHTML = $(“paperlist”).childElementCount + “ papers accepted”; (JavaScript)

childElementCountプロパティはIEでは未サポート

<img src=“dates.png” onclick=“navigate(event)” /> (HTML)

IEではimgタグのonclick属性は未サポート

H1 {text-shadow: 2px 2px 2px red}; (CSS)

CSSのtext-shadowプロパティがIEでは未サポート

1

2

3

4 1

2

3

4

ボタンの配置が異なる

論文数がundefined

文字の装飾(影)が無い

ボタンクリックで遷移しない

1 2

3

4

29

関連資料

著者によるスライド

http://www.slideshare.net/alexorso/xpert

ICSE’13勉強会で用いられた，九州大学の方のスライド

http://qwik.jp/se-reading/9.files/W.pdf