💻CSS elements for QA
Last updated
Last updated
CSS stands for Cascading Style Sheets. It is a language used for styling HTML documents, i.e. it describes the layout of the HTML document, how elements should look, and so on.
it is a styling language that is used in modifying the content of web pages.
A CSS selector is an identifier of one or many elements on a web page.
Their primary purpose is to enable visual styling of the site, but they can be used to automate front-end testing as well.
In other words, it’s a way to locate one or more elements on the page.
CSS style starts with a selector enclosed by curly brackets {} used to denote the start and end of styles applied to the selector
Lastly, inside the curly brackets are 1 or more property value pairs. Each of these pairs defines a property such as color, font size, etc., and the value for that property
Element
Whether or not an HTML element has attributes that make it distinct, you can always target the element type itself. It's super easy to target elements because you don't need to precede it with any special characters. You need only write the element type that you want to target. The same goes for h-tags, like h1, h2, h3, etc., divs, spans, and all other element names.
p, h1, div, header, footer, span, strong, a, btn
Class
Class is one of the most common attributes you will find on HTML elements. Like ID, it is a special kind of attribute that results in a unique format for the CSS selector that targets it. To select a class, you need only put a period before the variable value. For example, an element with attribute class="pull-quote" can be targeted with:
ID
Even if a site does not have testIDs for every element, it may have regular IDs. They will appear in the same format as any other attribute in the HTML, but they belong to their own type. Their unique type means that the format of the selector is simply a hash followed by the variable value. For example, an element with an ID in the HTML that looks like this: id="abc123" can be targeted with a selector written like this:
Attribute
HTML elements will often have attributes tied to them such as title, height, and style. These attributes will typically be followed by an equal sign and a hyphen separated variable in double quotes, like this: ATTRIBUTE="VARIABLE-NAME"
The ideal selector for QA testers is the "testid" attribute. When unique testIDs are assigned to every element on a site, QA can confidently automate tests by precisely targeting specific elements throughout the application without relying on attributes that may apply to more than one element.
Targeting an attribute with a selector will usually require putting it in brackets and sometimes either removing the double quotes or changing them to single quotes. For example:
[data-testid=sample-login-button-variable]
.pull-quote
#abc123
