Contributor
Kshitij Thareja

Integrating visual testing with Kolibri Design System’s CI


Mentors
Alex Velez, Blaine
Organization
Learning Equality
Technologies
javascript, vue.js, GitHub Actions
Topics
accessibility, user experience, Visual testing
This project aims to integrate visual testing into the Kolibri Design System's (KDS) CI workflows to streamline the validation process for UI modifications. Currently, KDS lacks a visual testing service leading to manual effort in validating UI modifications. Leveraging tools like Puppeteer and Percy, the project proposes to automate the process of capturing and comparing screenshots of UI components before and after modifications, ensuring consistency and correctness. Key deliverables of the project are: 1. Integration of Percy into the existing Jest test suite, 2. Implementing visual testing for at least one UI component, 3. Establishing a mechanism for surfacing visual differences in pull requests. This will help enhance the efficiency and reliability of KDS development, fostering a consistent and polished user experience across Kolibri products.