Downloaded 24 times
Uploaded byApplitools
Visual Testing: Quality and Speed -- by GIl Tayar, Applitools
The document discusses the automation of visual software testing, highlighting its necessity for maintaining quality in agile development environments. It covers various types of testing, challenges associated with functional UI validation, and presents tools such as Applitools Eyes that facilitate visual testing by comparing application screenshots. The content emphasizes the importance of balancing speed and quality in software development through effective testing strategies.
More Related Content
![[webinar] Best of Breed: Successful Test Automation Practices from Innovative...](https://cdn.slidesharecdn.com/ss_thumbnails/bestpracticesinqualitymanagementfrominnovativebrands-slides-200506184200-thumbnail.jpg?width=640&height=640&fit=bounds)
![[TAQfull Meetup] Angie Jones + Expert Panel: Best Practices in Quality Manage...](https://cdn.slidesharecdn.com/ss_thumbnails/angiejones-bestpracticesinqualitymanagementfrominnovativebrands-taqfullmeetup-sept3-200908111407-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Visual Testing: Quality and Speed -- by GIl Tayar, Applitools
![[webinar] Cutting-edge Functional UI Testing Techniques - w/ Adam Carmi](https://cdn.slidesharecdn.com/ss_thumbnails/20200325-functionalvisualai-200330145548-thumbnail.jpg?width=640&height=640&fit=bounds)
Visual Testing: Quality and Speed -- by GIl Tayar, Applitools
- 1. QUEST FOR FLAWLESSUX-UI: Trends, Threats, Challenges, and Test Automation Tools that Help Leading Engineers Deliver the Goods Gil Tayar Sr. Architect & Evangelist, Applitools @giltayar Diego Lo Giudice VP & Principal Analyst, Forrester Research @dlogiudice
- 2. Automating visual softwaretesting Visual Testing - Quality at Speed Gil Tayar, Senior Architect & Evangelist @giltayar
- 3. Automating visual softwaretesting Agility
- 4. Automating visual softwaretesting Agility “ability of a business system to rapidly respond to change” – Wikipedia
- 5. Automating visual softwaretesting Agile Development
- 6. Automating visual softwaretesting Lots of changes = Lots of problems?
- 7. Automating visual softwaretesting Minimize Friction
- 8. Automating visual softwaretesting DevOps Code Build Test Deploy Monitor CI CD
- 9. Automating visual softwaretesting Real-world Agile Development Code Build Test Deploy Monitor Code Build Test Deploy Monitor Code Build Test Deploy Monitor Code Build Test Deploy Monitor Code Build Test Deploy Monitor Code Build Test Deploy Monitor Code Build Test Deploy Monitor Code Build Test Deploy Monitor Code Build Test Deploy Monitor Code Build Test Deploy Monitor
- 10. Automating visual softwaretesting Testing Code Build Deploy Monitor Code Build Deploy Monitor Code Build Deploy Monitor Code Build Deploy Monitor Code Build Deploy Monitor Code Build Deploy Monitor Code Build Deploy Monitor Code Build Deploy Monitor Code Build Deploy Monitor Code Build Deploy Monitor Test Test Test Test Test Test Test Test Test Test
- 11. Automating visual softwaretesting Types of Testing ● Unit ● Component ● Integration ● E2e ● Functional ● Acceptance ● Production Monitoring ● Oh, Myyy...
- 12. Automating visual softwaretesting How do we improve quality while still going at speed?
- 13. Automating visual softwaretesting Types of Testing ● Unit ● Component ● Integration ● Functional ● E2e ● Acceptance ● Production Monitoring ● Oh, Myyy...
- 14. Automating visual softwaretesting Types of Testing ● Unit ● Component ● Integration ● Functional ● E2e ● Acceptance ● Production Monitoring ● Oh, Myyy... Visual Aspect
- 15. Automating visual softwaretesting
- 16. Automating visual softwaretesting And we’ve been mostly ignoring it till now
- 17. Automating visual softwaretesting
- 18. Automating visual softwaretesting
- 19. Automating visual softwaretesting https://youtu.be/vJG698U2Mvo
- 20. Automating visual softwaretesting Without Automated Visual Testing, Your Quality Suffers
- 21. Automating visual softwaretesting But that’s just more work
- 22. Automating visual softwaretesting Types of Testing ● Unit ● Component ● Integration ● Functional ● E2e ● Acceptance ● Production Monitoring ● Oh, Myyy...
- 23. Automating visual softwaretesting Functional UI Testing ● Do something ○ Open a browser ○ Navigate to page ○ Click, change form fields, click, .... ● Validate result ○ Expect this field to have that value ○ Expect this text to be that string ○ Expect this checkbox to be checked
- 24. Automating visual softwaretesting Functional UI Testing ● Do something ○ Open a browser ○ Navigate to page ○ Click, change form fields, click, .... ● Validate result ○ Expect this field to have that value ○ Expect this text to be that string ○ Expect this checkbox to be checked
- 25. Automating visual softwaretesting Functional Validation is Time Consuming and Fragile ● Figuring out the “selectors” is time consuming work ○ And fields move all the time ● Extracting the value is work ○ A checkbox turns into two radio buttons ● Functionality changes ○ Functionality moves from page to page
- 26. Automating visual softwaretesting Holistic Validation ● Do something ○ Open a browser ○ Navigate to page ○ Click, change form fields, click, .... ● Validate result ○ Expect this field to have that value ○ Expect this text to be that string ○ Expect this checkbox to be checked
- 27. Automating visual softwaretesting Holistic Validation ● Do something ○ Open a browser ○ Navigate to page ○ Click, change form fields, click, .... ● Validate result ○ Expect this field to have that value ○ Expect this text to be that string ○ Expect this checkbox to be checked
- 28. Automating visual softwaretesting Holistic Validation ● Do something ○ Open a browser ○ Navigate to page ○ Click, change form fields, click, .... ● Validate result ○ Check everything on the page
- 29. Automating visual softwaretesting Visual Testing ● More quality by checking the CX ● While also speeding up functionality tests
- 30. Automating visual softwaretesting If it’s so great, why hasn’t it been tried before?
- 31. Automating visual softwaretesting Sample Tools CODE / SCRIPT ● Needle (Python WD) ● Gemini (JS DSL) ● Selenium Visual Diff (Java WD) ● VisualCeption (PHP CodeCeption) ● Shoov (JS WebDriverIO) ● Vizregress (.NET WD) ● Rspec Page Regression (Capibara) ● Applitools Eyes (Appium, Esresso, XCUI) ● PhantomCSS (JS CasperJS)
- 32. Automating visual softwaretesting How Does It Work? You send us screenshots of your app We compare the screenshots with baseline images We report any differences found You accept or reject the differences
- 33. Automating visual softwaretesting How Does It Work? You send us screenshots of your app We compare the screenshots with baseline images We report any differences found You accept or reject the differences
- 34. Automating visual softwaretesting Addition to Functional Tests
- 35. Automating visual softwaretesting How Does It Work? You send us screenshots of your app We compare the screenshots with baseline images We report any differences found You accept or reject the differences
- 36. Automating visual softwaretesting
- 37. Automating visual softwaretesting
- 38. Automating visual softwaretesting
- 39. Automating visual softwaretesting
- 40. Automating visual softwaretesting And More • Image scaling • 1 pixel offsets in element positioning • Dynamic content • Moving elements • Images of different size • Performance
- 41. Automating visual softwaretesting Applitools Eyes • Handles anti-aliasing, pixel offsets, color similarity, and image scaling • No error ratio configuration required • Supports layout / structure matching • Dynamic and moving content • Compare images of different sizes • Validates full UI pages • Fast!
- 42. Automating visual softwaretesting How Does it Work? You send us screenshots of your app We compare the screenshots with baseline images We report any differences found You accept or reject the differences
- 43. Automating visual softwaretesting REPORT DIFFERENCES As files on the file system
- 44. Automating visual softwaretesting REPORT DIFFERENCES As a gallery
- 45. Automating visual softwaretesting DEMOVISUAL LAYOUT MATCHING
- 46. Automating visual softwaretesting How Does it Work? You send us screenshots of your app We compare the screenshots with baseline images We report any differences found You accept or reject the differences
- 47. Automating visual softwaretesting UPDATE THE BASELINE Gemini
- 48. Automating visual softwaretesting BASELINE BRANCHING • Keep CI tests green • Multiple app versions • Revert to previous baselines • A visual change log (documentation) 1 1 1 2 1 2 3 3 2 4 4
- 49. Automating visual softwaretesting
- 50. Automating visual softwaretesting DEMOAUTOMATED MAINTENANCE
- 51. Automating visual softwaretesting Types of Testing ● Unit ● Component ● Integration ● Functional ● E2e ● Acceptance ● Production Monitoring ● Oh, Myyy...
- 52. QUESTIONS? Gil Tayar Sr. Architect& Evangelist, Applitools Twitter: @giltayar Gil’s latest blog post: Not Only Cars: The Six Levels of Autonomous Testing http://testautomation.applitools.com/post/166742980267/not-only -cars-the-six-levels-of-autonomous Diego Lo Giudice VP & Principal Analyst, Forrester Research Twitter: @dlogiudice Diego’s latest research report: How AI Will Change Software Development and Applications http://reprints.forrester.com/#/assets/2/108/'RES121339'/reports