CSS Classes - The Basics

Posted May 22nd, 2019

This article will help you get started on CSS classes, better understand how they are used and explore some best practices when using them for testing.

Cascading Style Sheets, more commonly known as CSS, is a style sheet language used to define visual appearance and formatting of HTML. For developers and QA professionals, CSS can be a useful format for identifying elements on a webpage for testing. One way tests take advantage of this is by using CSS classes to instruct the framework (i.e. Selenium) to look for these elements on the page, and interact with them.

Because of this, CSS classes are a preferred method for testers to write automated tests that interact with web applications. However, using CSS classes can also be a pain for testers. If not formatted correctly, it can be almost impossible to create reliable and scalable test scripts. Therefore, when determining your strategy, it’s important to consider these key naming conventions when setting up your CSS up for testing success:

  • Refer to specific css class names, or base the names on a block of your application. It should be easy to know where a component is, just by looking at the CSS class. This could be something as simple as `.header`, `.footer`, or any other block of design.

  • Be sure to break components up into their individual elements. These could be identifiers such as `.header__menu` or `navigation__search`. These help demonstrate the fact that the identifiers are child components of a larger block, making it easier for QA to find them when writing automated tests.

  • Finally, it’s important to differentiate between any modifiers in similar css classes. This accounts for elements that are in the same block, and have the same element, but look different. This could be something as simple as `.header__search--big` or `.footer__login--red.` This ensures that as you write your tests, you know that they will interact with the right element, making them reliable and easier to scale.

When considering a CSS class strategy, remembering these tips will not only help you identify elements to test more quickly and efficiently, but it will also allow you to build reliable and resilient tests that scale as your application grows. To help achieve this, it is important that development and QA work together, ideally before the first line of code is ever written, to determine naming conventions and how it will relate to the overall quality strategy. This not only helps QA in making their job easier, but also improves developer productivity. With a mutually agreed upon naming strategy for CSS classes, developers won’t be bogged down with rollbacks, or with QA asking for help in finding elements that are impossible to find in the CSS. 

As your team continues to scale automated testing using CSS, or any other application, the Sauce Labs Continuous Testing Cloud provides the most comprehensive platform to achieve improved quality and productivity without compromising speed. With access to hundreds of browsers, operating systems and physical devices, and the ability to run tests in massive parallel, Sauce Labs can help improve the quality of your apps while increasing release velocity. To learn more, check out this continuous testing cloud data sheet.

You may also be interested in our articles on:

The Selenium 'Click' Command

Selenium Tips: CSS Selectors

Written by

Alissa Lydon


FrameworksAutomated testingContinuous testingReal Devices