VRT

Transcript

1. Gen Ichino Exploring options Introduction to UI Testing
2. Some random dude IAM • Ex- f l a sh developer • Frontend-engineer • I ❤ photogr a phy • I ❤ a rt • F a ther of one
3. Why UI testing?
4. To Maintain consistent user experience.
5. Tools for UI Testing
6. Tools for UI Testing Isolated environment for UI • Storybook (https://storybook.js.org/) • Open-source tool for developing UI components. • Allows you to build a nd test components independently of the a pp. • L a dle (https://l a dle.dev/) • Altern a tive to Storybook, designed to focus on speed a nd perform a nce. • Only supports Re a ct ATM. • Histoire (https://histoire.dev/) • Altern a tive to Storybook, designed for Vue a nd Vite ecosystems such a s Svelte. • Lightweight a nd f a st with e a sy integr a tion.
7. Tools for UI Testing Features • Key Fe a tures: • Component isol a tion. • Inter a ctive development environment. • Add-on for testing, document a tion, a nd a ccessibility checks. • Bene f its: • F a cilit a tes coll a bor a tion between developers a nd designers. • Speeds up development.
8. DEMO
9. Visual Regression Testing
10. Why VRT? Pros/Cons • Cost-E ff ective • M a nu a l 👁 check is time-consuming a nd f a ulty. • C a n be used a s a me a n for integr a tion test (medium size test). • Function a l tests a re not me a nt to a ssess visu a l a spects. • Function a l tests m a y p a ss even if UI is broken. • However, VRT tends to be f l a ky a nd requires di ff tuning.
11. How to conduct VRT
12. How to VRT Tools • Service • Chrom a tic (https://www.chrom a tic.com/) • Integr a tes with Storybook. • Percy (https://percy.io/) • Works with v a rious fr a meworks. • OSS • Storyc a p (https://github.com/reg-viz/storyc a p) + Reg-suit (https://github.com/reg-viz/reg-suit) • Usu a lly s a ves b a se im a ge to cloud infr a structure. • Lost pixel (https://www.lost-pixel.com/) • Also h a s p a id pl a n but c a n be self hosted. • S a ve a nd host b a se im a ge loc a lly. • B a ckstopJS (https://github.com/g a rris/B a ckstopJS) • Pl a ywright (https://pl a ywright.dev/)
13. Thanks for listening!