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