---
title: "Optimizing CSS Selectors: Tips for Error-Free Tests | Autify Guide"
slug: "how-to-fix-css-selector-errors"
description: "Maximize Test Accuracy: Learn Proven Strategies to Fix CSS Selector Errors in Autify. Start your Free Trial!"
updated: 2024-07-17T06:14:39Z
published: 2024-07-17T06:14:39Z
canonical: "help.autify.com/how-to-fix-css-selector-errors"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.autify.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to fix CSS selector errors

On this page, you will learn how to fix the "Element not found" error caused by an incorrect CSS selector. We assume that you already know how to:

- Read/write CSS and HTML
- Inspect HTML elements using Chrome DevTools

(To learn these first, please see the [related articles](/v1/docs/how-to-fix-css-selector-errors#related-articles) section)

## Common causes and solutions

To start troubleshooting, let's check the current CSS selector.

Navigate to the failed step and click to see the CSS selector.

![check-css-selector](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/check-css-selector.png?sv=2026-02-06&spr=https&st=2026-11-11T14%3A42%3A46Z&se=2026-11-11T15%3A42%3A46Z&sr=c&sp=r&sig=trIQoFz3XFyk%2BPeePDQNzfkUvf7C0p%2FN5aTsOd%2B9rh0%3D)

Let's take a look at the common causes and their solutions.

### 1. Auto-generated CSS selector

#### Cause

If your CSS selector looks very long, like the below example, it implies the CSS selector was auto-generated by DevTools.

```
#header-navigation > div > nav > div > div.d-none.d-lg-block.flex-grow-1.h-100 > div > div > div:nth-child(3) > a
```

While it may be quick and easy to get a CSS selector from DevTools, it tends to be fragile if the website's structure is updated frequently.

#### Solution

Find an id or a combination of classes that is unique to the element.

For example:

```
a#link_to_login_page
```

or

```
header a.navigation.login
```

If no ids or classes are available, you can specify other attributes using the attribute selector like this:

```
a[href="./login"]
```

or

```
a img[alt="login button"]
```

This way, you can get a selector that's immune to updates.

### 2. Random ids or classnames

If your CSS selector has a random string like the below example, it implies that the ids or classnames were generated by some build tool.

```
a.login_ac2187y3
```

The random part (prefix, suffix, or entire classname/id) might change after the build.

Again, you can solve this by using the attribute selector.

```
a[href="./login"]
```

Also, if it has a consistent part (`login`, in the above example), you can specify it using the wildcard syntax.

This matches the classname that contains the string "login":

```
a[class*="login"]
```

This matches the classname that start with "login":

```
a[class^="login"]
```

To learn more about attribute selectors, see [MDN Web Docs - Attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors).

## Tips

### How to confirm the "uniqueness" of your CSS selector

Follow the steps below to confirm that your selector matches only one element on the page:

1. Open the DevTools window.
2. Navigate to the Elements tab.
3. Press Ctrl + F (Windows) or Cmd + F (Mac) to open the search text box.
4. Input your CSS selector to the textbox.
5. Confirm the number of the elements found by the selector.

![uniqueness](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/uniqueness.png?sv=2026-02-06&spr=https&st=2026-11-11T14%3A42%3A46Z&se=2026-11-11T15%3A42%3A46Z&sr=c&sp=r&sig=trIQoFz3XFyk%2BPeePDQNzfkUvf7C0p%2FN5aTsOd%2B9rh0%3D)

## If you are still having trouble...

Contact our Customer Success team anytime. We will help you solve this issue. 🙂

## Related articles

- To learn CSS selector basics, see [Using CSS selectors effectively](/v1/docs/how-to-use-css-selectors-effectively).
- To learn how to inspect an HTML element, see [Add a locator to specify an element](/v1/docs/add-a-locator). Official documentation in [Chrome DevTools](https://developer.chrome.com/docs/devtools/overview/) may also be helpful.
- To learn about advanced syntaxes that you can use in CSS selectors, see [MDN Web Docs - Attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors).