We are Warhol
We are Warhol.
With Warhol we want to make frontend development easier for you. Our goal is to help you to ensure that the components in your web page or app look exactly how you define them in your component library. This greatly reduces style bugs in production. While developing, it makes sure that things look right from the beginning to finish. Our browser extension highlights style inconsistencies as soon as you "create" them. Furthermore our automated services report bugs in each commit and can even permanently monitor your production system.
Not just Visual Regression Testing
Warhol takes ideas from visual regression testing and turns them into something that goes beyond just comparing pixels. Regular visual regression testing usually takes screenshots of a component library and compares them against earlier screenshots of said component library. The usefulness of this approach is limited in a number of ways:
- it is usually slow - way to slow to check for bugs in the developer's browser
- it can't tell changes in design from changes in content and thus can't be used to check the design of a production website or app
- it reports errors in pixels and does not offer any clue into which CSS might actually cause an error
Apart from that, screenshots only represent a specific state of a system: a specific browser on a specific computer. This leads to false negatives when comparing screenshots taken on different devices, different versions of an operating system and, of course, different browsers.
What Warhol does differently
Warhol's core algorithm understands your CSS and not just the pixels that result from CSS. Therefore, Warhol can not only tell you where an implementation of a component diverges from the styles defined in the component library but also
- exactly how the style declarations that apply to an element are different from those in the component library
- which CSS properties are missing or where CSS values are not as expected
- if colors not allowed in the component library are in use anywhere on the page
- where pseudo elements are missing or not working
The algorithm is fast enough to check pages inside a browser. Just install a browser extension and get reports about unexpected CSS that pinpoint style bugs to specific elements, CSS rules and even individual values - including CSS variables of course.
In this blog we will soon provide you with more information on how Warhol works, what we found out while building it (get ready for some juicy browser bugs and CSS specification lore) and how you can use Warhol to make your products look consistently good. Stay tuned and subscribe to our newsletter. We will be in touch!<a href="#subscribe" class="button button--primary"> Subscribe to newsletter </a> <a href="/feed.xml" class="button"> Get the RSS feed </a> <a href="https://twitter.com/wearewarhol" class="button"> Follow us on Twitter </a>