A Manual Tester’s Guide to CSS Selectors for Test Automation
Jun 2, 2023
Intro
As a manual explorative tester, you already know what needs testing, the different routes a user could take and everything critically to create a great automation test.
But how do you tell a machine to click the correct button? Or check the right heading?
This how-to guide will help fill that gap and turn you from a “manual“ tester to an automation testing machine!
Copying CSS Selectors
For this how-to guide, we’re only going to use Chrome. Just know the tools we’ll be using here are universal across browsers, but some locations and labels might differ.
Right-click something you wish to interact with
Click “Inspect“
Chrome Dev Tools will open
Find the best element - I want the button, so I looked for an <a> or <button>
Right-click that element and hover over “Copy“
Click “Copy selector“
When pasted you should see something like this:
This will work, at least initially, but it has a few issues. To improve this, we first need to understand what each part means.
CSS Specificity (for testing)
This is a brief overview for the purposes of manual testers starting their automation test journey. There are many more awesome CSS selectors, but we’ll save them for another day. Search “CSS Specificity“ or “Advanced CSS Selectors“ to learn more.
ID
ID selectors start with a “#” (hash) and are - meant to be - unique making them the most specific CSS selector. In the example above “#layers“ is the only ID.
CLASS
Class selectors start with a “.” (full stop/period) and can be chained, for instance: .class1.class2. In the above example, there are 2 classes .css-1dbjc4n and .r-1ydw1k6, and these are chained. Chaining means both classes must be on the same element.
These are bad classes, and I would never recommend anyone using classes that look like this. The Inclusion of random numbers and letters indicates these were likely generated as part of a compilation step during deployment. Another release may generate new classes. Avoid using classes like these!
PSEUDO-CLASS
Pseudo-classes start with a “:“ (colon) and have the same computational value as standard classes. In the above example :nth-child(1) is the only pseudo-class and means the first child. In this case, I prefer :first-child or :first-of-type. For more on pseudo-classes, check out CSS-Tricks.
TAG / TYPE
Tag/type selectors are those which don’t start with a form of punctuation. From the example above div is the only tag/type selector. These are pretty low value, particularly div, which will probably appear hundreds of times on any given page. main, article, and even button are all much more valuable tags to use in your selectors.
ATTRIBUTE
Attribute selectors are fairly advanced but super useful for testing. There are no examples in the output above, but the <a> tag that was used has two useful attributes. Here’s a simplified look at the tag:
If we wanted to select based on role, we could use the selector [role=”link”]. You might have also noticed another attribute we could use…
Test ID
Test IDs are super helpful! If your development team are adding them buy them a coffee sometime! Unfortunately, they come in many variations, often on the same project or page. Regardless, when you see one, try to use it as it is there to help you. To select based on this would be [data-test-id=”login”].
Cleaning up CSS Selectors
We should now be able to apply what we have learnt to the copied selector from before; here’s another look at the raw pasted output:
Here’s the selector I would use for this button:
Much better!
This will select the <a> Tag with the Test ID of “login“ inside of the tag with “layers“ as its ID.
Testing CSS Selectors
Let’s test this out and make sure the correct element is selected…
Make sure Dev Tools is focused (Click if needed)
⌘+F (Ctrl+F on Windows)
Paste your new selector in the Find input bar
All matching elements in the DOM (Document Object Model) that match the selector will be highlighted. You’ll often want this to be a single element, so check it says “1 of 1“in these cases.
Sometimes you will expect multiple elements. For instance, you might wish to test that 4 images are displayed. Double-check the number of elements you expect to be highlighted in these situations.
Creating Elements in DoesQA
Everything to this point should be able to help regardless of your tooling. From this point, we’ll cover how to use this in DoesQA.
Drag in the appropriate node (eg Touch, Check Text, Set etc)
Double-click the new node to open the node editor
Click “+“ next to Element to create a new Element
Name your Element something descriptive
Check the Type is set to CSS
Enter your new Selector
Click the tick/check to save
Your new selector will automatically be selected into your node.
Maintaining Elements in DoesQA
Multiple nodes can link to the same Element. Occasionally an Element might need updating as a result of development changes.
Navigate to Elements
Find the Element you wish to edit
Click the edit icon
Make your Element changes
Click the save icon
Because the selector we created above was tied to a Test ID, I could change the selector type to “Test ID“ and simplify the selector down to just “login“.
As mentioned above, Test IDs come in many variations. DoesQA will check through a list of the most common. You can see exactly what Test IDs DoesQA looks for in our docs.
When you edit an Element, all occurrences will be updated across all Flows.
