“Testing” frontend code isn’t common in the development world. Many companies test their frontend code, but it isn’t as widely practiced as many think. Frontend development is constantly evolving; so many frontend developers are considering different tools and methods to automate CSS testing. CSS is designed to allow an easy separation of the stylistic aspects of the DOM from the structural and semantical aspects. Testing the “visual experience” of design has always been done manually. However, if testing is done right, it could give developers a huge productivity boost. CSS testing is playing a huge role in continuous integration.
Most frontend developers fix any problems they encounter manually. A lot of developers will click through the website using different browsers to ensure it looks the way it’s meant to, they’ll analyze and optimize the site’s performance, and they’ll change CSS as they work to avoid breaking anything. Many developers become frustrated and angry when they discover a bug after deploying to production, because most of the time, the demo site was working perfectly fine before.
Despite the lack of automated testing in frontend development, four different CSS automation testing methods can help find problems that developers deal with everyday: validation, performance, regression, and rendering.
Validating CSS can be a tedious undertaking. A good tool to use for validating your CSS is CSS Lint. CSS Lint scans your code for syntax errors and marks potential performance and maintenance problems. Not only can CSS Lint run from the directory’s command line, but it also integrates with automation scripts that include Node, Ant, Grunt, Rake, and Rhino. The rules and integration options associated with CSS Lint are documented in the CSS Lint Wiki.
Performance can help with speed and efficiency. Although CSS doesn’t have a reputation for slowing down site performance, it’s always beneficial to test it. Dust-me selectors are one of many tools that analyze unused selectors. Developers can also combine Dust-me-selectors with a Rake file to automate any unwanted or unused styles.
Regression testing CSS guarantees any changes made don’t introduce new problems. Styles can get bloated as a project gets larger and depreciation can appear. Needle and Cactus frameworks show automated regression testing potential. Needle generates and compares various screenshots of a site by checking the original screenshot with the current rendering. Cactus, a more practical approach, doesn’t use screenshots. Instead, Cactus facilitates the testing based on computed CSS. Cactus can also work well with Rails.
Various internet browsers render CSS differently. Many developers inspect a site manually to verify that it looks how it’s supposed to. Style guides such as KSS and Kalei are great tools to assist in this manual process. Although style guides can vary, they all show reusable markup patterns in a site.
Although integration and automation in frontend CSS code isn’t widely practiced, hopefully these tools can help developers validate, increase performance, regression test, and rendering of their CSS code in the future. And just like most forms of testing, CSS testing is only as effective as the approach you take.