Finding Good CSS Selectors – InGo Helpdesk

There are lots of good articles on this available on the web, but here are some quick steps to help you derive some good CSS selectors for the AutoFiller widget to use:

One important note: Browsers typically have some form of "Get unique selector" tool, but these often yield complex and unusable results, and unfortunately as of yet there isn't a good replacement for digging through the HTML, but the browser inspector is a great help in that regard.

To start, right click one of your input elements that you want to autofill and select the "inpect" option on the tool popup menu. A split-screen will display where you can see the underlying structure of the rendered content.

ID or NAME

The first line of attack is obviously more unique attributes of the input. Look at the element itself, does it have a "name" or an "id" value? If so, assuming it's unique, use that. Give it a test and ensure it only autofills one element. Id's are supposed to be unique in HTML documents, but that rule can, and often is broken by HTML authors, so while and ID is likely to work for you, it may not.

An ID selector is the name of the ID preceded by a hash mark, e.g.

#first_name

A name selector is a bit more complicated but easy enough, e.g.

input[name="first_name"]

CLASS

Let's look at the element you've selected again. Does it have a class that is unique? If so, use that. Test.

A class selector is much like the ID selector, but instead of a hash mark, is preceded by a dot, e.g.,

.first_name

Parent Elements

Now it starts to get more complex. Look at the parent or surrounding elements of the input you selected. Is there a container (div) or label that wraps the input? If so, and if there is a way to select the parent uniquely, then you can use that combined with a child selector (immediate or any child). For example, with an input wrapped in a div like this:

<div name="first"><input type="text"></div>

You can select the input using the selector `div[name="first"] input` This selector will essentially find any input that is the child of a div with an attribute of name that has a value of "first".

Quickly Determining If Your Selector Works

Trial and error can be painful, especially if you're going back and forth to the InGo Events Manager dashboard. A good way to avoid some of the pain is to test whether your selector works right in the browser. In the Console tab of the inspector pane you've got open, you'll find a little ">" which is a prompt for you to enter in arbitrary script. So you can for example, edit the value of a text input using the simple statement (don't include the > below):

> $('div[name="first"] input').val("George");

After you hit enter, you should see the value of the input change if you've used the right selector (and please make sure it's the ONLY one that changes as well).

If you find that jQuery is not installed for some reason and the $ symbol does not resolve to a proper javascript function call, then you can use one of the default javascript functions instead, such as selectElementById or selectElementsByClassName or querySelector. These methods which all take a string indicating what to select but serve different purposes.

Rinse, Repeat
Usually it takes a few iterations to find the best match, but the good news is that once you find the fist, the rest usually follow form and fall right in line. Just do the same for each input until you have them all.

Related articles