Knowing how to cherry-pick the correct selector for targeting form input elements will make your life easier when automating forms. If you want to learn how, read on. For transparency, I use Axiom.ai, a no-code browser automation tool. However, this guide is relevant for people using other tools or coding solutions. The tool may change, but the selectors remain the same.

When I create bots to automate form filling in the browser, I add Enter text steps, select the input fields using our no-code selector tool, and set the data I want to pass into the field. It's straightforward; selecting an element requires just pointing and clicking. I repeat this process for each input in the form. However, sometimes, the selectors generated by Axiom.ai do not work. When I run a test, I might see an error like "Step 4: element not found"—this means Axiom.ai couldn't find the element on the webpage.

To solve this problem, I can reselect the element or try a custom selector. I always try the former first, then proceed to the latter. Now, if you're a no-coder or a developer, you may not be familiar with CSS selectors. Read our general CSS selector guide here. This guide will teach anyone how to quickly extract a custom selector from the HTML of a form input element.

I will walk you through real-world scenarios using custom selectors, explain how I created them, and share my go-to selectors for form inputs.

I'm Alex Barlow, co-founder of Axiom.ai; let's dive in. By the end of this article, you'll be able to formulate a correct custom selector faster than an AI could.

Anatomy of the input field type

Having a basic understanding of the anatomy of an Input field helps us understand how to identify custom selectors.

Here is a search input field taken from the BBC website:

<input aria-activedescendant="" aria-autocomplete="list" aria-controls="suggestions" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" id="searchInput" name="q" placeholder="Search the BBC" role="combobox" class="ssrcss-199fsd8-StyledInput e1ld3nu72" value=""><div pseudo="-webkit-input-placeholder" id="placeholder" style="display: block !important;">Search the BBC</div></input>

Breaking it down, we are looking for the opening tag of the<input> field. The tag contains attributes after input and before >. For example,aria-controls="suggestions" is an attribute. We use the attribute to create our custom selectors.

<input aria-activedescendant="" aria-autocomplete="list" aria-controls="suggestions" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" id="searchInput" name="q" placeholder="Search the BBC" role="combobox" class="ssrcss-199fsd8-StyledInput e1ld3nu72" value="">

The CSS selectors we can abstract and find helpful in this example are:

1. input
2. #searchInput or [id="searchInput"]
3. [placeholder="Search the BBC"]

How to use Chrome Inspector to inspect input fields

To create custom CSS selectors, we need to inspect the code. Chrome provides a built-in tool that makes this easy: Chrome DevTools. Here’s how to use it:

1. Open Chrome Inspector - Right-click on the element you want to inspect and select "Inspect" from the menu. This will open Chrome DevTools, with the element’s code highlighted.

2. Select the Inspector Tool - If DevTools is already open, click the cursor icon in the top-left corner of the panel. This tool allows you to hover over elements on the page to inspect them.

3. Find the Code - Hover over an input field (or any element) to see its structure. Click on it to freeze the selection in DevTools. The corresponding HTML and CSS will appear in the Elements tab, where you can copy the element’s selector or make edits in the Styles panel.

You can find the opening tag and identify its attributes on any webpage.

When you may need to use a custom selector in Axiom.ai

I do test runs when automating forms, observing the bot every 4-5 steps added. I do this to check for errors. The error I look for is "Element not found." This means the element has not been found on the page. If I see the element on the page during the run, I then know it's an issue with the CSS sector being used to locate that element.

I will then reselect and run again. If that fails, I fall back to a custom CSS selector. Now, no worries if you're a new user and stuck at that point. Keep reading, as I will teach you.

How to use a custom selector in Axiom.ai

Now, in Axiom.ai, we have a no-code selector tool with advanced algorithms that automatically determine selectors for you 99% of the time. You can point and click to select elements. We offer a Single-selector tool for interacting with elements and a Multi-selector tool for scraping data. Custom selectors can be used with both tools and in both cases, you can select elements by pointing and clicking.

How to use a custom selector in the single selector tool:

1. Click Select to open the no-code selector tool.
2. Click Custom, then enter your selector in the text field.
3. If the selector finds the element, it will be highlighted.
4. Use Chrome Inspector to check if the class axiom-selected has been applied to the selected element.

Do not use these types of selectors

Notably, there are CSS selectors you should avoid.

<input aria-label="Search input" autocapitalize="none" class="x1lugfcp x1hmx34t x1lq5wgf xgqcy7u x30kzoy x9jhf4c x972fbf xcfux6l x1qhh985 xm0m39n x9f619 x5n08af xl565be x5yr21d x1a2a7pz xyqdw3p x1pi30zi xg8j3zb x1swvt13 x1yc453h xh8yej3 xhtitgo xs3hnx8 x1dbmdqj xoy4bel x7xwk5j" dir="" placeholder="Search" type="text" value="">

In this example, you can see what appear to be random combinations of numbers and letters in the class tag, for example, xs3hnx8. These are obfuscated CSS classes, meaning they change and will differ each time the bot runs.

As a rule of thumb, I avoid using classes unless they are clearly unique and relevant to the input, such as 'search-field`.

How I formulate custom css selectors

First, I create a unique selector using attributes from the input field. I use the Chrome inspector to compare other inputs and identify unique attributes. This approach works well, but what if there isn't a unique selector?

In that case, I work backwards from the input field up the DOM Tree. All elements are connected, just like a family tree. I look at the parent elements of my input field and identify unique selectors on them to create a custom selector.

First, try to identify a unique selector

Inspect your input field and examine the attributes.

<input aria-activedescendant="" aria-autocomplete="list" aria-controls="suggestions" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" id="searchInput" name="q" placeholder="Search the BBC" role="combobox" class="ssrcss-199fsd8-StyledInput e1ld3nu72" value=""><div pseudo="-webkit-input-placeholder" id="placeholder" style="display: block !important;">Search the BBC</div></input>

Inspect your input field and examine its attributes.

1. First, I look for an id= attribute. The id tag is unique to the element nine times out of ten. I can use it like this: #searchInput.
2. Next, I check the placeholder attribute. The text that appears inside an input field is often unique. I can use it like this: [placeholder="Search the BBC"] (inside square brackets).
3. You may want to try a combination of attributes: [id="searchInput"][placeholder="Search the BBC"].

I would not use these classes: class="ssrcss-199fsd8-StyledInput e1ld3nu72". They are obfuscated and will likely change each time the page loads.

If required, traverse the DOM to find a unique combination

If you cannot find a unique selector, we go back up the tree using the Inspector tool.

What does that mean? Simply put, it means inspecting other elements that wrap around the input. We identify attributes on those elements that can be combined to construct a unique selector.

It's important to note that the input must be a child of the element you've traversed, or the selector will not work. Being a child means the input is nested inside another element, creating a selector hierarchy in the DOM tree that we can leverage.

For example, I inspect an input and extract this attribute: ["aria-label="To recipients"]; I observe that this attribute also appears on other inputs and is not unique. So, I traverse the DOM further. I identify a parent element in which the input is nested in a form with the attribute method="POST".

If I combine what I have observed, I can create a unique selector. This would be my selector:

form[method="POST] ["aria-label="To recipients"]

First, I add the parent element and its attribute selector. Then, after a space, I add the input attribute.

Creating combinations like this using hierarchy allows you to quickly construct unique selectors for most elements.

Real-world examples

Here are some real-world examples where I've had to use a custom selector.

Instagram

This is a comment box on an Instagram post that opens in a dialog. Inspecting the element, I found a unique attribute I could use. However, I observed multiple comment boxes loaded on the page, and my supposed unique attribute [aria-label="Add a comment…"] was not unique, as it appeared in multiple comment boxes.

<textarea aria-label="Add a comment…" placeholder="Add a comment…" autocomplete="off" autocorrect="off" class="x1i0vuye xvbhtw8 x1ejq31n xd10rxx x1sy0etr x17r0tee x5n08af x78zum5 x1iyjqo2 x1qlqyl8 x1d6elog xlk1fp6 x1a2a7pz xexx8yu x4uap5 x18d9i69 xkhd6sd xtt52l0 xnalus7 xs3hnx8 x1bq4at4 xaqnwrm" dir="" style="height: 18px !important;"></textarea>

The solution was to traverse the DOM. I observed that the input was inside a dialog pop-up, which made it unique. So, I formulated this selector using the grandparent element's attribute:

[role="dialog"] [aria-label="Add a comment…"]

Cerebro

In Cerebro's filters, I observed that the filter inputs had no specific attributes I could target. For example, the placeholder=" min" attribute was repeated eight times, making it unreliable for selection.

<input data-testid="wordcount" type="number" placeholder="Min" min="0" class="sc-hIPBNq sc-jnbAOD eYtKDj" value="">

Of course, the solution was to traverse the DOM and inspect the parent elements using Chrome Inspector. However, I could still not use unique attributes. Instead, I needed to rely on hierarchy, which is how the elements are ordered.

First, I found the form ID:

id="CerebroFilterContent"

This gave me a starting point. Then, I observed that the children of this element were structured to organize the form inputs. This meant I could use the child relationship to target the correct input.

My selector looked like this:

#CerebroFilterContent div:nth-child(2) input[placeholder="min"]

This selector targets the second child div within #CerebroFilterContent and selects the input with the attribute placeholder="Min".

Wrapping up

Creating custom CSS selectors might seem daunting if you're new to automation. But with some practice, you'll quickly get the hang of it.

By learning to inspect elements in Chrome DevTools, identify valuable attributes, and avoid unreliable selectors, you're building skills to make your automation more reliable. Axiom.ai's no-code selector tool does most of the work, but knowing how to find the correct selector gives you confidence and control when things don't go as expected.

Don't worry about getting it perfect the first time. Try inspecting an input field, test different selectors, and see what works. The more you practice, the easier it becomes.

If you get stuck, we are, of course, here to help. Reach out via Reddit with questions or support for subscribers.