A Manual Tester’s Guide to CSS Selectors for Test Automation

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

1. Click “Inspect“

2. Chrome Dev Tools will open

3. Find the best element - I want the button, so I looked for an <a> or <button>

4. Right-click that element and hover over “Copy“

5. Click “Copy selector“

When pasted you should see something like this:

#layers > div > div:nth-child(1) > div > div > div > div > div.css-1dbjc4n.r-1ydw1k6 > div > div > div:nth-child(1) > a

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:

<a href="/login" role="link" class="css-4rbku5 css-18t94o4" data-testid="login">
  ...
</a>

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:

#layers > div > div:nth-child(1) > div > div > div > div > div.css-1dbjc4n.r-1ydw1k6 > div > div > div:nth-child(1) > a

Here’s the selector I would use for this button:

#layers a[data-test-id="login"]

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…

1. Make sure Dev Tools is focused (Click if needed)

2. ⌘+F (Ctrl+F on Windows)

3. 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.

1. Drag in the appropriate node (eg Touch, Check Text, Set etc)

2. Double-click the new node to open the node editor

3. Click “+“ next to Element to create a new Element

4. Name your Element something descriptive

5. Check the Type is set to CSS

6. Enter your new Selector

7. 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.

1. Navigate to Elements

2. Find the Element you wish to edit

3. Click the edit icon

4. Make your Element changes

5. 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.