Visual tests within web components - Revisiting

[JoshuaNg2332]

During Retro, we discussed about how visual tests can be hard to review due to the size of certain screenshots and the breadth of component variants squeezed onto one screenshot.

For context, for many of our components with varying variations and component props, we've created a web component wrapper that allows for components to be mounted and displayed onto a grid with information about the component variant and also the props passed in.
This is all loaded onto a single page and we have done this to help reduce the amount of screenshots ultimately taken during the development process.
As it currently stands, our monthly limit on Percy for us as a business is 400,000 screenshots and last month (July), we had used around 200,000 screenshots.

We implemented these changes relatively early into the life of Pie and have yet to revisit this idea if this is working for us.
As part of this discussion, it would be good for us to look back on our approach and see what potentially works best for us with regards to how we currently group our components and how we can make this easier to review going forward.

Ideas we've got so far;

• Unlocking the ability to have every single component variant have their own screenshot (Not recommended as for most component variants, we'll have between 3-6 screenshots)
• Looking at smaller component variations for each component

These are just some of the ideas but more discussion about this and the approach we'd like to do moving forward would be greatly appreciated.

[Preet-Sandhu]

I recommend breaking down the components with many variations and splitting those to have their own screenshots sensibly ( e.g. break the screenshots based on size). Try with one component and see how many extra screenshots we are using. We do not need to stick to any particular number of screenshots but do not go overboard as we share Percy with other teams as well.