Download to read offline
![Local Dpxdt: Modes
dpxdt
[update|test]
[test_directory]
• update
Image
from
cliparts.co
Baseline
Compare
?](https://image.slidesharecdn.com/glimpseofperceptualdiff-150811172028-lva1-app6892/85/CIRCUIT-2015-Glimpse-of-perceptual-diff-23-320.jpg)
![Local Dpxdt: Modes
dpxdt
[update|test]
[test_directory]
• test
Images
from
cliparts.co
Baseline
Compare](https://image.slidesharecdn.com/glimpseofperceptualdiff-150811172028-lva1-app6892/85/CIRCUIT-2015-Glimpse-of-perceptual-diff-24-320.jpg)
![EXAMPLE: Pair Diff
./run_url_pair_diff.sh
[build
num]
[site1]
[site2]](https://image.slidesharecdn.com/glimpseofperceptualdiff-150811172028-lva1-app6892/85/CIRCUIT-2015-Glimpse-of-perceptual-diff-31-320.jpg)
![Local Dpxdt: Modes
dpxdt
[update|test]
[test_directory]
• update
Image
from
cliparts.co
Baseline
Compare
?](https://image.slidesharecdn.com/glimpseofperceptualdiff-150811172028-lva1-app6892/75/CIRCUIT-2015-Glimpse-of-perceptual-diff-23-2048.jpg)
![Local Dpxdt: Modes
dpxdt
[update|test]
[test_directory]
• test
Images
from
cliparts.co
Baseline
Compare](https://image.slidesharecdn.com/glimpseofperceptualdiff-150811172028-lva1-app6892/75/CIRCUIT-2015-Glimpse-of-perceptual-diff-24-2048.jpg)
![EXAMPLE: Pair Diff
./run_url_pair_diff.sh
[build
num]
[site1]
[site2]](https://image.slidesharecdn.com/glimpseofperceptualdiff-150811172028-lva1-app6892/75/CIRCUIT-2015-Glimpse-of-perceptual-diff-31-2048.jpg)
Uploaded byICF CIRCUIT
CIRCUIT 2015 - Glimpse of perceptual diff
The document discusses various tools and methods for visual regression testing in web development, focusing on perceptual differences using tools like resemble.js, CSS Critic, and dpxdt. It includes setup instructions, comparisons of images, and limitations of each tool. Additionally, helpful resources and links to further information are provided for implementing these testing techniques.
More Related Content
Similar to CIRCUIT 2015 - Glimpse of perceptual diff
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
CIRCUIT 2015 - Glimpse of perceptual diff
- 1. CIRCUIT – AnAdobe 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: NewRelease
- 6.
- 7. Resemble.js (http://huddle.github.io/Resemble.js/) Different Same Compare Analyze Image
- 8. Interactive Site: Usingsample images
- 9. Interactive Site: Otheroptions
- 10. Interactive Site: UsingSite1 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.
- 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: Needbaseline
- 18.
- 19.
- 20. CSS Critic: Limitations • Firefox and Chrome only • Same origin restrictions
- 21.
- 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 Approachoptions • 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 MyImages Before Img3 Img2 Img1 AMer Img3 Img2 Img1
- 30. Dpxtd: Diff MyURLs Before URL3 URL2 URL1 AMer URL3 URL2 URL1
- 31. EXAMPLE: Pair Diff ./run_url_pair_diff.sh [build num] [site1] [site2]
- 32.
- 33.
- 34. References • Responsive StartedKit 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 AutomationDeveloper ICF Interactive rachel.ingles@icfi.com