Automating Screenshot Testing Component Library
0 likes955 views
The document discusses automating screenshot testing in Vodafone's component library, Source Web, utilized by over 500 developers. It highlights the implementation of visual regression testing through Applitools, which allows for the generation of automated Cypress tests from markdown files for 220 components. The future improvements include further automation of screenshot, accessibility, and performance tests.
Automating Screenshot Testing Component Library
- 1. C1 Public
- 2. Automating screenshot testing in a component library David Lindley & Ben Hudson
- 3. C1 Public 3 • Software Engineering Manager at Vodafone • Been in web development for 9 years • Wear many hats 🎩 🧢 👒 – Technical Product Owner for Source Web • Enjoy walking, video games and playing guitar David Lindley | Who am I? • Senior Software Engineer • Been in web development for 13 years • Been developing in the Source Web team since its inception • If I’m not working, I’m on the golf course or spending time with my family Ben Hudson | Who am I?
- 4. C1 Public 4 What are we talking about today? What is Source Web? Auto generations of tests Vodafone Engineering Enter Applitools
- 5. C2 General Bringing together 12 teams into ONE to: Leverage the Scale of a European Technology Team to drive Business Agility. Achieve maximum possible re-use while accelerating market maturity and outcomes Distributing Digital Engineering capabilities across markets, while maintaining a strong Global Connection. We’re part of something much bigger
- 6. C1 Public 6 Source Web | What is it? 500 unique developers within Vodafone consume the library >70000 unique downloads of the library 6 markets/sub-brands using it for customer facing applications 220 components split into atomic design principals
- 7. C1 Public 7 Testing Components Doc Site Package Management Tooling CICD Source Web | Tech stack
- 8. C1 Public 8 Source Web | Welcome Applitools On boarding Applitools allowed us to do visual regression testing 8 >220 components 3 themes 10 variations 6600 screenshots Not including breakpoint changes = x x Per component on average No integration for Styleguidist
- 9. C1 Public 9 Source Web | Styleguidist Vs StoryBook React Styleguidist Allows complete customization of the look and feel Can be used as a shop window for the components Our users are: Software Engineers, Product Owners, Business Owners, UXers, Testers Storybook Simple setup Lots of integration
- 10. C1 Public 10 Source Web | Problem with visual regression testing How to create visual tests of all components without burning through developer effort? 10 10 >220 components 3 themes 10 variations 6600 screenshots Not including breakpoint changes = x x Per component on average
- 11. C1 Public 27 September 2022 11 MyComponent1.tsx MyComponent1.md MyComponent2.tsx MyComponent2.md MyComponent3.tsx MyComponent1.md MyComponent1 Examples MyComponent2 Examples MyComponent3 Examples
- 12. C1 Public 27 September 2022 12 MyComponent1.tsx MyComponent1.md MyComponent1 cypress test Applitools visual test Using the MD files as our starting point we could parse them to auto generate cypress tests
- 13. C1 Public 13 Source Web | WebinarCard Company logo Title Sub Title Presenters picture and name Favourite
- 14. C1 Public 27 September 2022 14 Now we have our starting point – our MD file. We need to think more about getting the logic in to auto generate the cypress tests. Find all MD files Read MD file Find corresponding component Split MD file by example Inject into template For each MD file Write to file Auto generated Cypress tests
- 15. C1 Public 27 September 2022 15
- 16. C1 Public 16 Source Web | Wrapping up How to create visual tests of all components without burning through developer effort? Use a level of automation to solve problems!
- 17. C1 Public 17 Source Web | Future improvements Automated screenshot tests Automated accessibility tests Automated performance tests visualtests.ejs accessibility.ejs performance.ejs
- 18. Thank you.
- 19. C1 Public David Lindley Software Engineering Manager, Vodafone UK Questions? Ben Hudson Senior Software Engineer, Vodafone UK
- 20. C1 Public Get in Touch Request a Demo David Lindley Software Engineering Manager, Vodafone UK Ben Hudson Senior Software Engineer, Vodafone UK
- 21. C1 Public Visual Testing Learning Path
- 22. C1 Public Visual Testing Learning Path
- 23. C1 Public 23