x-pert: accurate identification of cross-browser issues in web applications (icse’13)...
TRANSCRIPT
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
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が最も多い)
既存のすごいツール+1つのアイディアでよりすごいツールに
関連研究が著者のものばかりでチート感
性能向上の理由がどこにあるのか不明瞭
24
私見
○
○
×
△
Webアプリが普及し,それらが動作するブラウザやプラットフォー
ムも増えている今日,クロスブラウザ互換性問題(XBIs)は重大な関
心事となっている.現在までにXBI検出手法がいろいろ開発されて
きたが,手動のものは人間が誤りを入れてしまったり時間がかかり
すぎたりするし,自動のものは不正確だったり部分的にしかうまく
いかずfalse positiveやfalse negativeを生み出しがちである.既存手法
のこれらの欠点を克服するため,我々は自動,正確,包括的なXBI
検出ツールX-PERTを開発した.X-PERTはいくつかの既存手法と新し
い手法を組み合わせたものであり,我々が実世界のWebアプリケー
ションに対して行った調査結果を元に構築されたツールである.提
案法の主な強みは,Webアプリケーションの様々な特性について,
それぞれ適した異なるXBI検出技法を用いた点である.実験の結果,
X-PERTは実世界のXBIを検出する能力において最先端の手法を上回
り,また,XBIの診断において開発者を助けるものであった.
25
アブスト和訳
[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