Automated Visual Testing

Slide 1

Slide 1 text

Automated Visual Testing GovTech QE Chapter December 2018

Slide 2

Slide 2 text

Responsiveness

Slide 3

Slide 3 text

Browser Compatibility

Slide 4

Slide 4 text

Why Applitools? Visual Automated Testing DevOps Integration Dashboard and Project Management

Slide 5

Slide 5 text

Visual Automated Testing Visual Automated AI Testing - Applitools

Slide 6

Slide 6 text

Applitools Overview Automation Script File applitools.eyes Selenium Baseline Files/Images Dashboard match_window

Slide 7

Slide 7 text

Applitools Demo

Slide 8

Slide 8 text

Need Benchmarks Need Use Cases Need User Pain Points

Slide 9

Slide 9 text

Other Visual Automated Testing Options - Wraith - WebdriverCSS - Galen Framework - Phantom CSS - Gemini

Slide 10

Slide 10 text

Visual Automated Testing - Wraith - WebdriverCSS - Galen Framework - Phantom CSS - Gemini

Slide 11

Slide 11 text

Wraith - Developed at BBC - Used for checking CSS changes; intentional and unintentional Browser Automation Controller Image Comparison Usage Headless Browser CasperJS PhantomJS SlimerJS Selenium Webdriver + ChromeDriver Command Line Existing Library ImageMagick wraith capture config.yml wraith spider config.yml wraith history config.yml

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Wraith Promise ● takes screenshots of your webpages ● runs a comparison task across them ● outputs a diff PNG file comparing the two images, and a data.txt file which contains the percentage of pixels that have changed ● packages all of this up into a gallery.html, ready for you to view ● if any screenshot's diff is above the threshold you specified in your configuration file, the task exits with a system error code (useful for CI) ● the failed screenshot will also be highlighted in the gallery

Slide 15

Slide 15 text

Essentials Taking Screenshots Resizing Viewports Execution on Different Browsers Image Comparison Way to See Results

Slide 16

Slide 16 text

Ownself develop ownself?

Slide 17

Slide 17 text

Essentials Taking Screenshots Resizing Viewports Execution on Different Browsers Image Comparison Way to See Results

Slide 18

Slide 18 text

Similarity Measures + Mean Squared Error + Structural Similarity Index Reference: https://www.pyimagesearch.com/2014/09/15/python-compare-two-images/

Slide 19

Slide 19 text

Freezer demo

Slide 20

Slide 20 text

Essentials Taking Screenshots Resizing Viewports Execution on Different Browsers Image Comparison Way to See Results

Slide 21

Slide 21 text

That’s all! Thank you and feedback welcomed ~