I am using Playwright to automate end-to-end tests, and have started to complement my Playwright tests with Chromatic tests.
The Playwright tests are really useful, but each test needs to run through several steps to create a scenario I want to test. Creating a Playwright test for each input variation for each part of the UI would be expensive. I would like a test automation tool to check a wide range of inputs for each element of the UI that does not require automating a large number of steps.
I have been introduced to Chromatic by a developer. Chromatic is a test tool that is made by the team behind Storybook. If your team uses Storybook you can use Chromatic to test for visual regressions in UI components. Chromatic tests can be described as “unit tests for visual states”.
Chromatic can be used to test each component in the UI. With Chromatic you can, for instance, create tests that check how a component handles the values that can be entered into an input field. Chromatic tests are like unit tests and do not require steps to set them up, also each test runs quickly so you can create Chromatic tests for all the inputs you would like without worrying that the test pack will take a long time to run. A Playwright test of each of these inputs would have the disadvantage of requiring automating several steps to set the test up before testing the inputs.
Chromatic tests can be written in javascript or typescript. An example test is below:
Chromatic tests can be written in more than one way:
- How to write Storybook stories | Component Story Format
- Component testing in Storybook with play functions
Chromatic is a test automation tool that can complement Playwright, this is because I can write end-to-end tests in Playwright that test flows through the application and write “visual unit tests” in Chromatic that test a wide variety of inputs into individual UI components.
TestAndAnalysis 