** WATCH FULL WEBINAR RECORDING HERE: https://youtu.be/KXgbIwfZcSA ** In the age of continuous delivery, teams must explore and deploy new testing approaches to increase test coverage—and most importantly, take pressure off of manual testing to move faster and more accurately. The objective of visual testing is to catch unintended visual bugs before they are pushed to production, and affect the user experience. Without visual inspections, there is no way to know that a UI component has broken when developers commit UI changes by using existing automated functional end-to-end test suites. Join us for this live session, where Automation expert Greg Sypolt will share with us how he successfully leveraged visual testing to increase coverage and reduce maintenance, while speeding up release cycles - with his step-by-step guide. This in-depth live session covered the following topics: * How to set up your first visual test * How to do visual testing with Selenium * How to integrate visual testing with Sauce Labs * How to ensure cross-browser and cross-device compatibility * How to analyze results - for faster actionable insights ** WATCH FULL WEBINAR RECORDING HERE: https://youtu.be/KXgbIwfZcSA **

1. Step-by-Step Guide To Flawless UI Delivery,
With Cloud-based Visual Testing

2. Senior Engineer
Greg Sypolt
@gregsypolt

3. SET UP YOUR FIRST VISUAL TEST
DO VISUAL TESTING WITH SELENIUM
INTEGRATE VISUAL TESTING WITH SAUCE LABS
ENSURE CROSS-BROWSER AND CROSS-DEVICE COMPATIBILITY
ANALYZE YOUR RESULTS TO GAIN FASTER ACTIONABLE INSIGHTS
VISUAL TESTING
TAKEAWAYS

4. WHY DO WE NEED VISUAL CHECKPOINTS?

5. COLLABORATE AND IDENTIFY ACCEPTANCE TESTS

6. VISUAL TEST COVERAGE
COMPONENTS APPEAR IN THE
CORRECT COLOR, SHAPE,
POSITION AND SIZE
COMPONENTS APPEAR OR
ARE HIDDEN PER VIEWPORT
SPECIFICATIONS
COMPONENTS DON’T
OVERLAP OTHER UI
COMPONENTS
UI APPEARS CORRECTLY
ACROSS BROWSERS AND
MOBILE DEVICES
NO BROKEN IMAGES SHORT SHELF LIFE

7. ENABLING APPLITOOLS
SELENIUM SDK

8. ENABLE WITH
CODE EXAMPLE
spec_helper.rb
INCLUDING THE APPLITOOLS LIBARY
SETUP - INITIALIZE EYES, API KEY, SET MATCH LEVEL, BATCH

9. CODE SNIPPETS

10. VISUAL TEST SCRIPT
CODE EXAMPLE
sample_applitools_spec.rb
VISUAL CHECKPOINT
VISUAL CHECKPOINT
INITIALIZE

11. VISUAL TEST SCRIPT
CODE EXAMPLE
sample_applitools_spec.rb
AFTER EACH TEST
CLOSE APPLITOOLS EYES

12. INTEGRATE VISUAL TESTING WITH SAUCE LABS

13. INTEGRATE VISUAL TESTS WITH
CODE EXAMPLE
SETUP SAUCE LABS DESIRED CAPABLILITIES; BROWSER,
BROWSER VERSION, OS PLATFORM, SCREEN RESOLUTION,
ADD TAGS, SELENIUM VERSION, TEST CASE NAME
spec_helper.rb
SETUP SELENIUM WEBDRIVER REMOTE URL

14. INTEGRATE VISUAL TESTS WITH
CODE EXAMPLE
Rakefile
CREATE CROSS-BROWSER PROFILES

15. ANALYZING THE TEST RESULTS

16. ANALYZING THE TESTING RESULTS
ON AND
applitooldashboard

17. ANALYZING THE TESTING RESULTS
ON AND
jenkinsapplitoolsplugin

18. NIGHTWATCH.JSXCUI TESTS ESPRESSO
IS USING
WITH OTHER TESTING FRAMEWORKS
THE
APPIUM
WE HAVE TESTED ON VARIOUS MOBILE ENVIRONMENTS FROM LOCAL TO
OTHER CLOUD SOLUTIONS WITH ZERO ISSUES ACROSS ANDROID AND IOS

19. WHATS ON YOUR MIND?