Depending on how the code is structured, if we modify an element in CSS, we can affect many more DOM elements in unexpected ways. We can see how this applies to CSS due to its fundamental concepts (inheritance, specificity, and cascade). We are doing regression testing to make sure that our code changes do not cause any issues in other places on the project. In this article, we’re going to find out how Chromatic can help us out with these issues that have been causing headaches for both the development team and product owners alike. It seems to be a difficult task to get the UI components right the first time, with all issues and feedback addressed before shipping code to production. These scenarios happen more often than you’d think, even to the point that we got used to working this way – gradually fixing, revamping, and improving the UI after shipping the code to production. Those are also often addressed after the code has shipped to production. Product owners, designers, QA, and other team members usually have some additional feedback on the presentation, UX, SEO, and accessibility after the work on the visual feature has been completed. Those bugs are usually noticed on production after the code has been shipped and fixed right after. Without reliable and regular regression testing, bugs are being gradually introduced to the UI, negatively affecting usability, accessibility, presentation, and maintainability. Maintenance becomes increasingly difficult as the UI system expands with new components, style variations, new viewport breakpoints, overrides, etc.

It’s quite a challenge to build a scalable and reliable UI system that works on a wide range of devices and a wide range of browsers. Creates amazing interfaces at How to use Chromatic 2.0įrontend web development increased in complexity over the past few years. Adrian Bece Follow React, frontend, Magento 2 certified developer.

Chrome castomatic