Automated Repair of Layout Cross Browser Issues Using Search-Based - PowerPoint PPT Presentation

Automated Repair of Layout Cross Browser Issues Using Search-Based Techniques Sonal Mahajan * , Abdulmajeed Alameer * , Phil McMinn + , William G. J. Halfond * * University of Southern California, USA + University of Sheffield, UK Work supported by NSF Grant CCF-1528163.

Background Information 2

Background Information g n t i n g e n i e n l e l a v h n C o C Developers maintain End-users get a consistent consistent cross-browser cross-browser user user experience experience Cross Browser Issues (XBIs) — Inconsistencies in appearance or behavior across browsers. 2

Cross Browser Issues (XBIs) • 23,000 posts on • Appearance XBIs are prevalent — 90% [Choudhary et. al. ’13] Layout XBIs — inconsistent layout of HTML elements in a web page across different browsers Layout XBIs appear in 57% of the websites [Choudhary et. al. ‘13] • Reason for Occurrence – Difference in browser implementations of HTML and CSS 3

4

4

4

Challenges in Repairing XBIs 1. Detection is expensive – Large number of browsers and platforms 2. Localization is difficult – Complex layouts and styles 3. No standardized ways to repair – Resolve XBIs on a case by case basis 4. Repair must not introduce new XBIs – Precisely modify problematic UI elements 5

Challenges in Repairing XBIs 1. Detection is expensive ✔ – Large number of browsers and platforms X-PERT [ICSE’13] 2. Localization is difficult Choudhary et. al. – Complex layouts and styles 3. No standardized ways to repair – Resolve XBIs on a case by case basis 4. Repair must not introduce new XBIs – Precisely modify problematic UI elements 5

Challenges in Repairing XBIs 1. Detection is expensive ✔ – Large number of browsers and platforms X-PERT [ICSE’13] 2. Localization is difficult Choudhary et. al. – Complex layouts and styles 3. No standardized ways to repair – Resolve XBIs on a case by case basis Manual 4. Repair must not introduce new XBIs – Precisely modify problematic UI elements 5

Challenges in Repairing XBIs 1. Detection is expensive ✔ – Large number of browsers and platforms X-PERT [ICSE’13] 2. Localization is difficult Choudhary et. al. – Complex layouts and styles Goal — Automatically find fixes that can repair 3. No standardized ways to repair the layout XBIs detected in a web page. – Resolve XBIs on a case by case basis Manual 4. Repair must not introduce new XBIs – Precisely modify problematic UI elements 5

Two Key Insights 1. Guided search-based techniques can be used to generate repairs. </> HTML { } CSS p x values Large repair search space Competing constraints 6

Two Key Insights 2. Impact of layout XBIs can be quantified by a fitness function leveraging their visual manifestation. Number of XBIs detected XBIs Fitness function (e.g., using X-PERT) computes numeric closeness of candidate solutions to the Layout similarity (size and required solution. position of the bounding boxes of HTML elements) 7

Our Approach ✗ N Page Under Test S2. Extract Root (PUT) ✔ Causes Y XBIs Repaired Page S5. Check Ref. Browser S1. Initial XBI (PUT’) Termination S3. Search for Detection Criteria Candidate Fixes Test Browser S4. Search for the Best Combination of Candidate Fixes 8

S1. Initial XBI Detection XBIs Obtains set of XBIs when PUT is rendered in reference and test browsers XPaths of elements Descriptor of correct e 2 e 1 showing layout XBI layout position Ref. Browser <label, <e 1 , e 2 >> X-PERT [Choudhary et. al. ICSE’13] Test Browser <top-alignment, </html/body/div[3]/div/div, /html/body/div[3]/div>> 9

S2. Extract Root Causes Extracts the root causes relevant to each XBI e v p < > alue roperty, lement, <label, <e 1 , e 2 >> <e 1 , p 1 , v> label 1 p 1 , … , p n <e 2 , p 1 , v> . . . . . . label n p 1 , … , p n 10

S2. Extract Root Causes Extracts the root causes relevant to each XBI e v p < > alue roperty, lement, <top-alignment, </html/body/div[3]/div/div, /html/body/div[3]/div>> </html/body/div[3]/div/div, margin-top, -20px> top-alignment margin-top, top </html/body/div[3]/div/div, top, 0px> . </html/body/div[3]/div, margin-top, 0px> . . </html/body/div[3]/div, top, 0px> 10

S3. Search for Candidate Fixes Produces individual candidate fixes for each root cause v’ e v p < > roperty, alue, alue lement, minimize layout deviation of e in reference and test browsers 11

S3. Search for Candidate Fixes Produces individual candidate fixes for each root cause v’ e v e v p p < > < > roperty, alue roperty, alue, alue lement, lement, AVM Root cause Candidate fix Alternating Variable Method (AVM) Search 11

Alternating Variable Method [Korel 1990], [Kempka et. al. 2015] AVM Exploratory Moves Pattern Moves – Probe neighboring values to – Accelerate fitness score establish direction of fitness improvements in the established score improvement direction – Add small delta values [-1, 1] – Add delta values in exponentially and observe impact on fitness increasing step sizes ✔ ✔ ✗ start point optimal value (v) (v’) 12

Fitness Function Quantify relative layout deviation of PUT rendered in reference and test browsers for every candidate v' n 1. Δ pos: Difference 2. Δ size: Difference in size eighbor in location e n n lement eighbor eighbor n Fitness score = (w1 * Δ pos) + eighbor (w2 * Δ size) + 3. Δ npos: Difference in (w3 * Δ npos) location of neighbors 13

1. Δ pos : Difference in Location e lement e lement Reference browser Test browser 14

1. Δ pos : Difference in Location ( ) ( ) e lement e lement ( ) ( ) Reference browser Test browser 14

1. Δ pos : Difference in Location Δ pos = D TL + D BR 14

1. Δ pos : Difference in Location Δ pos decreases as the boxes move closer Δ pos = D TL + D BR 14

2. Δ size : Difference in Size e e lement lement Test browser Reference browser 15

2. Δ size : Difference in Size H T H R W T W R Δ size = |W R - W T | + |H R - H T | 15

2. Δ size : Difference in Size H T H R Δ size decreases as the boxes become similar in size W T W R Δ size = |W R - W T | + |H R - H T | 15

3. Δ npos : Difference in Location of Neighbors Neighbors — elements that are e at a distance of N lement hops from e in the HTML DOM tree of the PUT 16

3. Δ npos : Difference in Location of Neighbors N = 1 Neighbors — elements that are 1 e at a distance of N lement hops from e in the HTML DOM tree 1 1 n of the PUT eighbor 17

3. Δ npos : Difference in Location of Neighbors N = 2 1 Neighbors — elements that are 1 1 e at a distance of N lement hops from e in the HTML DOM tree 1 1 n of the PUT eighbor 1 1 18

3. Δ npos : Difference in Location of Neighbors e e lement lement n eighbor n eighbor Reference browser Test browser 19

3. Δ npos : Difference in Location of Neighbors e lement n eighbor Δ n pos = D TL + D BR 19

3. Δ npos : Difference in Location of Neighbors e lement n Δ npos decreases as e ’s eighbor boxes move closer, causing n’s boxes to also move closer Δ n pos = D TL + D BR 19

Running Example — S3 (10, -20) D TL = D BR = 20 (10, 0) e (10, 80) n (10, 100) Reference browser Test browser Fitness score = (w1 * Δ pos) + (w2 * Δ size) + (w3 * Δ npos) margin-top = -20px = (1 * 40) + (2 * 0) + (0.5 * 40) = 60 </html/body/div[3]/div/div, margin-top, -20px> AVM Root causes 20

Running Example — S3 (10, -5) (10, 0) e n (10, 95) (10, 100) Reference browser Test browser Fitness score = (w1 * Δ pos) + (w2 * Δ size) + (w3 * Δ npos) margin-top = -20px 15px = (1 * 40 10) + (2 * 0) + (0.5 * 40 10) = 60 15 </html/body/div[3]/div/div, margin-top, -20px> </html/body/div[3]/div/div, margin-top, -20px, 20px> AVM Root causes Candidate fixes 20

Running Example — S3 (10, -5) (10, 0) e n (10, 95) (10, 100) Reference browser Test browser Fitness score = (w1 * Δ pos) + (w2 * Δ size) + (w3 * Δ npos) margin-top = -20px 15px = (1 * 40 10) + (2 * 0) + (0.5 * 40 10) = 60 15 </html/body/div[3]/div/div, margin-top, -20px> </html/body/div[3]/div/div, margin-top, -20px, 20px> </html/body/div[3]/div/div, top, 0px> </html/body/div[3]/div/div, top, 0px, 20px> </html/body/div[3]/div, margin-top, 0px> AVM </html/body/div[3]/div, top, 0px> Root causes Candidate fixes 20

S4. Search for the Best Combination of Candidate Fixes Finds subset of candidate fixes representing the best overall repair – Combine candidate fixes to fully resolve an XBI – Interaction of fixes may have duplicating, multiplying, or competing effects ✔ </html/body/div[3]/div/div, margin-top, -20px, 20px> OR </html/body/div[3]/div/div, top, 0px, 20px> Candidate fixes 21