Rachel Ingles - ICFI It is a presentation on how to use before and after page screenshots for testing and how the contrasts highlight the status of the build.

1. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Glimpse of
Perceptual Diff
Rachel Ingles

2. Different names
Perceptual
Diff
User
Interface
Tes4ng
CSS
Regression
Tes4ng
Visual
Regression
Tes4ng

3. Visual comparison
Stable
New
Release
x
x
x
Image
from
scalingengineeringfordigital.files.wordpress.com

4. Site1: (Sample production)
Sample
site
from
Michael
Gilbert

5. Site 2: New Release

6. Spot the difference

7. Resemble.js (http://huddle.github.io/Resemble.js/)
Different
Same
Compare
Analyze
Image

8. Interactive Site: Using sample images

9. Interactive Site: Other options

10. Interactive Site: Using Site1 and Site2

11. Resemble.js: Code snippet
resemble(file).compareTo(file2).onComplete
(function(data){
return
data;
/*
{
misMatchPercentage
:
100,
//
%
isSameDimensions:
true,
//
or
false
getImageDataUrl:
function(){}
}
*/
});

12. Other tools
Takes
screenshots
Compares
images
Generates
reports
Images
from
cliparts.co

13. Other tools

14. CSS Critic (https://github.com/cburgmer/csscritic)
• Lightweight
tool for CSS

15. CSS Critic: Setup
• npm
install
csscritic

16. CSS Critic: Setup
• Create
RegressionRunner.html
file
• Register
page/s
under
test
csscritic.add({
url:
'SOME_URL',
//
link
to
the
test
case
HTML
document
//
Optionally:
desc:
'some
text',
//
a
description
of
the
test
case
width:
number,
//
the
viewport
width
in
pixel
height:
number,
//
the
viewport
height
in
pixel
…
});

17. Initial Load: Need baseline

18. Accepted baseline

19. Differences found

20. CSS Critic: Limitations
• Firefox and Chrome only
• Same origin restrictions

21. Dpxdt (https://github.com/bslatkin/dpxdt)
workers

22. Dpxdt: YAML configuration
setup:
|
python
-­‐m
SimpleHTTPServer
waitFor:
url:
http://localhost/Site1/www/index.html
timeout_secs:
5
tests:
-­‐
name:
demo
url:
http://localhost/Site1/www/index.html
config:
viewportSize:
width:
800
height:
600
injectCss:
|
body
{
background-­‐color:
white;
}

23. Local Dpxdt: Modes
dpxdt
[update|test]
[test_directory]
• update
Image
from
cliparts.co
Baseline
Compare
?

24. Local Dpxdt: Modes
dpxdt
[update|test]
[test_directory]
• test
Images
from
cliparts.co
Baseline
Compare

25. Dpxtd: Server Approach
• Python virtual directory

26. Dpxtd: Server Approach options
• Site Diff
• Pair Diff
• Diff My Images
• Diff My URLs

27. Dpxtd: Site Diff
Main
Page1
Page3
Page4
Page2
Page5

28. Dpxtd: Pair Diff
Site
1
Site2
Img1
Img2
Img3
Img1
Img2

29. Dpxtd: Diff My Images
Before
Img3
Img2
Img1
AMer
Img3
Img2
Img1

30. Dpxtd: Diff My URLs
Before
URL3
URL2
URL1
AMer
URL3
URL2
URL1

31. EXAMPLE: Pair Diff
./run_url_pair_diff.sh
[build
num]
[site1]
[site2]

32. EXAMPLE: Pair Diff

33.
Summary
Images
from
cliparts.co
Selenium
PhantomJS
ResembleJS
ImageMagick
CSSCri4c
Dpxtd
PhantomCSS
Wraith
Applitools
Capture
Compare
Report
Perceptual
Diff

34. References
• Responsive Started Kit Pro - https://github.com/
mpgilbertusa/Responsive-Starter-Kit-Pro
• Resemble.js – http://huddle.github.io/Resemble.js/
• CSS Critic - https://github.com/cburgmer/csscritic
• Dpxdt - https://github.com/bslatkin/dpxdt

35. Rachel Ingles
Test Automation Developer
ICF Interactive
rachel.ingles@icfi.com