Downloaded 58 times
Uploaded byApplitools
Selenium-based Visual Test Automation
The document discusses the importance of automating visual testing to ensure graphical user interfaces display correctly across various browsers, operating systems, and screen resolutions. It outlines the workflow for automated visual testing, including capturing and comparing screenshots with baseline images, and reviews various tools and technologies used for this purpose. Key benefits of automation include reduced manual errors and the ability to handle large test matrices efficiently.
More Related Content
Similar to Selenium-based Visual Test Automation
![[webinar] Cutting-edge Functional UI Testing Techniques - w/ Adam Carmi](https://cdn.slidesharecdn.com/ss_thumbnails/20200325-functionalvisualai-200330145548-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Selenium-based Visual Test Automation
- 1. SELENIUM BASED VISUALTEST AUTOMATION Adam Carmi (@carmiadam) Co-Founder and VP R&D at Applitools adam.carmi@applitools.com
- 2. YOU CAN ANDSHOULD AUTOMATE YOUR VISUAL TESTS!
- 4. AGENDA Why automatedvisual testing? Tools & Technology Where does it fit?
- 5. WHAT IS VISUALTESTING? A quality assurance activity aimed to verify that a Graphical User Interface appears correctly to users
- 6.
- 7.
- 8. WHY SHOULD ITBE AUTOMATED? THE TEST MATRIX IS TOO BIG TO APPROXIMATE MANUALLY Web browsers Operating systems Screen resolutions Responsive designs L10n
- 9. WHY SHOULD ITBE AUTOMATED?
- 10. WHY SHOULD ITBE AUTOMATED? MANUAL VISUAL TESTING IS ERROR PRONE
- 11. WHY SHOULD ITBE AUTOMATED? Many are already doing it (and sharing)… PhantomCSS Fighting Layout Bugs CSS Critc Wraith Needle Grunt PhotoBox dpdxt WebdriverCSS Eyes Huxley FBSnapshotTestCase Selenium Visual Diff Gemini VisualCeption Specter Snap And Compare
- 12. AGENDA Why automatedvisual testing? Tools & Technology Where does it fit?
- 13. THE WORKFLOW Drivethe AUT and take screenshots Compare screenshots with baseline images Report differences Update the baseline
- 14.
- 15. THE WORKFLOW Drivethe AUT and take screenshots Compare screenshots with baseline images Report differences Update the baseline
- 16. DRIVING AND CAPTURING OTHER PhantomCSS (CasperJS) Fighting Layout Bugs (Java) Wraith (URLs) CSS Critic (URLs) Needle (Python) dpdxt (URLs) Grunt PhotoBox (URLs) WebdriverCSS (JS) Eyes (All) Huxley (RP) FBSnapshotTestCase Selenium Visual Diff (Java) VisualCeption (PHP) Specter (JS) Wraith-Selenium (Ruby) Snap And Compare (URLs) Eyes (All) Gemini (JS) Gemini (JS)
- 17. SCREENSHOTS Real browsers? Full page? Frames? Regions? Viewport size? Page stabilization? Page preparation?
- 18. THE WORKFLOW Drivethe AUT and take screenshots Compare screenshots with baseline images Report differences Update the baseline
- 20. WHY NOT? FALSEPOSITIVES
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30. ANDMORE… 1 pixeloffsets in element positioning Dynamic content Moving elements Images of different size
- 32.
- 33. ImageMagick A powerfulcommand line tool for image processing. APIs are available for most programming languages. Fuzzing is used to eliminate slight color differences An error ratio is usually used to determine a match $ compare –metric AE –fuzz 5% img1.png img2.png diff.png 2246
- 34. Resemble.js An imagecomparison tool implemented in Javascript Used by PhantomCSS and other tools. Good antialiasing support An error ratio is usually used to determine a match http://huddle.github.io/Resemble.js/
- 35. Applitools Eyes Aspecialized image processing stack designed to compare computer generated UI images Anti-aliasing Partial and full pixel offsets Images of different size Dynamic content Moving elements Layout matching Available as a cloud service
- 36.
- 37. THE WORKFLOW Drivethe AUT and take screenshots Compare screenshots with baseline images Report differences Update the baseline
- 38. REPORT DIFFERENCES Asfiles on the file system (combined with source control)
- 39. REPORT DIFFERENCES Asa Gallery (example from Selenium Visual Diff)
- 40. THE WORKFLOW Drivethe AUT and take screenshots Compare screenshots with baseline images Report differences Update the baseline
- 41. UPDATE THE BASELINE Rename or commit individual image files Overwrite mode
- 42. UPDATE THE BASELINE GUI (Gemini GUI) Automatic maintenance (demo)
- 43. AGENDA Why automatedvisual testing? Tools & Technology Where does it fit?
- 44. WHERE DOES ITFIT? • Component s • Code review • Developers • Designers • QA
- 45. WHERE DOES ITFIT? • Pages • Page sections • Developers • Designers • QA • Others
- 46. WHERE DOES ITFIT? • Staging vs. Production • Ops • QA
- 47. WHERE DOES ITFIT? • Monitoring • Ops • QA
- 48.
- 49. THANK YOU AdamCarmi (@carmiadam) Co-Founder and VP R&D at Applitools adam.carmi@applitools.com
Editor's Notes
- #3 What is Visual Testing? Sikuli??? It's too flaky and unstable for practical use…
- #12 Most tools are for web apps except for FBSnapshotTestCase which is for IOS and Eyes which is platform agnostic.
- #14 * Does not apply to fighting layout bugs.
- #16 * Does not apply to fighting layout bugs.
- #19 * Does not apply to fighting layout bugs.
- #20 Like Boromir said…
- #38 * Does not apply to fighting layout bugs.
- #41 * Does not apply to fighting layout bugs.
- #45 CSS files and HTML falling out of sync CSS changes with unexpected global implications. Frontend refactoring.
- #46 Project / Product managers (collaboration)
- #48 Data from external sources Not enough time to test pre-production Missing components in deployment.
- #51 100% coverage No locators to find and maintain Cover functionality exposed through the UI