When it comes to front-end testing, CSS testing is often overlooked. There are undoubtedly significant challenges in CSS testing, but that doesn’t mean it should be dismissed as an unimportant tool in an overall testing strategy. In this post, we’ll offer you a guide to this form of testing, so you understand the motivations behind using it and know the practical steps to get started.
We’ll open the post with the fundamental questions:
- What is CSS testing?
- Why should you care about it??
- How do you test CSS?
As soon as we get the basics out of the way, we’ll walk you through a list of some of the main CSS testing tools. You’ll understand more about the different tools and tool categories in this space.
Before wrapping up, we’ll share some final thoughts, including how Testim Automate can circumvent some of the obstacles imposed by CSS when doing automated end-to-end testing.
Let’s get to it.
CSS Testing Basics
Let’s start by answering the fundamental questions.
What is CSS Testing?
CSS testing, as the name suggests, is the process of testing your style sheets. More specifically, we refer to automatic CSS testing. After all, this is 2021, and test automation is essential. This is true in all levels, layers, and forms of testing. CSS testing isn’t an exception.
Why Should You Care About CSS Testing?
CSS is a member of the web trifecta (HTML, CSS, and JavaScript). As such, it’s vital for the quality of a web application. Problems in CSS will cause the web app/website not to be rendered correctly.
The UI is a particularly sensitive area of an application when it comes to the user experience. After all, the interface is what the user sees and touches—quite literally, in the case of mobile.
So, CSS testing should be a crucial component of UI testing if your organization is serious about providing its users with a delightful user experience.
How Do You Test CSS?
You can test CSS in a variety of ways. That’s because CSS testing isn’t a single thing; instead, it comes in different types. The four main types are:
- Regression
- Syntax
- Project
- Reference
Let’s now cover each of these types.
Regression
Regression CSS testing is the same old regression testing applied to CSS. Regression testing is less a type of testing—like, unit testing or end-to-end testing—and more of a strategy. It consists of setting up a test suite to catch regressions or bugs after changes to the codebase.
So, CSS regression testing verifies that you don’t break your page style after changing the page.
Syntax
This category refers to testing techniques and tools that verify your CSS syntax is okay. In a nutshell, it’s like a linter for CSS.
Project
The “project” category means checking whether the CSS respects the standards of the project and organization.
Reference
Finally, reference CSS testing verifies whether the implemented and rendered page looks the way it was supposed to look. Much progress has been made in this area, and things are way better than they used to be in the dark ages of Internet Explorer dominance.
However, that doesn’t mean there are no longer challenges. Despite many of the major browsers of today sharing a common foundation—the Chromium open-source browser—you’re likely to struggle when ensuring your page looks and behaves the same across at least the most used browsers.
CSS Testing Tools: Here Are Some of the Main Ones
We’ll walk you through some of the available tools you might want to check out.
As we said before, CSS testing is an often overlooked area in testing. One of the implications of that is the reduced number of available tools compared to other types of testing.
CSS Lint
CSS Lint is precisely what its name suggests: a linter for CSS code. You can access it on its website or install it as an npm package.
CSS Lint offers syntax checking, besides using rules to check that the code doesn’t contain issues. You can also write your own set of rules.
BackstopJS
BackstopJS is a visual regression tool for web apps. It does that by comparing DOM screenshots taken over time. You can easily install it with npm:
$ npm install -g backstopjs
BackstopJS renders tests with headless Chrome and can simulate user interactions using Puppeteer scripts. You can add it to your CI, and it comes with integrated Docker rendering.
Quixote
Quixote is unit and integration testing for CSS. Using this library, you can check how HTML elements are rendered by the browser and verify how elements relate to each other. Quixote works in modern desktop and mobile browsers, but you can also use a tool such as Karma to run Quixote tests on multiple browsers.
You can install this tool via npm:
$ npm install quixote
CSSCritic
CSS Critic is a tool for automatic regression testing of CSS.
It works by comparing the current state of your layout to a reference image you provide. Whenever the layout changes, the tests fail.
You can get CSS Critic using npm:
$ npm install csscritic
An important limitation is that CSSCritic only works in Firefox and Chrome.
Conclusion
CSS testing is an often overlooked form of testing. Which, sadly, makes some sense since CSS has always been sort of the ugly duckling of the web trifecta.
However, since CSS errors certainly impact a web app’s interface—which in turn negatively affects the user experience—testing your style sheets is of paramount importance if you are to deliver a great UX to your visitors.
In this post, we’ve seen the fundamentals of CSS testing: what it is, why it matters, and how you do it. We’ve also walked you through some of the main tools, covering different categories: linters, unit testing, regression testing, and visual regression testing. You now know more about the concept of CSS testing and the tooling at your disposal.
Before wrapping up, here’s a final thought: CSS is important, and not only in the context of CSS testing. It also matters for other types of testing.
For instance, end-to-end testing tools often use CSS class names as identifiers. Unfortunately, that can be a fragile approach. It’s common for developers to use techniques that end up appending random identifiers to their CSS classes. CSS modules are an example of such an approach.
The use of such techniques often results in fragile tests. Many tools rely on class names to find elements in the DOM. When class names change, tests fail, resulting in heavy test maintenance.
There are better approaches, though. For instance, Testim has recently added a feature called Locator Filtering and Mapping. It allows Testim to filter the dynamic part of class names when determining locators for each element. This improves locator accuracy, making for more robust test cases. Give Testim a try and locator filtering. Happy testing!
