Autofiller Widget Fields Don't Auto-Fill

Our auto-fill capability can be tricky, mostly because modern page generation is powerful and as a result the page is often displayed differently than one might expect.

Here are a few tips:

Generated Content

So you've tried and tried and can't seem to get the autofiller (aka registration) widget selectors to find the form fields on the registration page and populate them with data. One thing to look for is CSS styling that enables element generation, specifically ::before and ::after. Here's a snipet of code:

Here, if you tried to tell our selector to use the ID #ContentPlaceHolder1_appForm_tbFirstName you would quickly become frustrated, as this element will not populate with data. Why? Because it's a placeholder.

So how do you find the "generated" elements? With Firefox, simply right-click the element in the page and choose "Inspect element".  In the inspector you will see a CSS rules compartment where you will see something like:

Click the inline link. Magically your browser will open new variant of the "page source" that we all know and love. This one, however, is a post-styling version that represents how the elements on the page are structured and styled at that particular point in time. How is it different?  Well looking at the same set of elements we saw in the first image, you'll see something different:

Notice now there is a label element as well as the input, and the input is not the same as the original. But now, you have your real underlying generated content and now you'll be able to use the right selectors.

Additional Tips:

1. look at the element itself, does it have a "name" or an "id" value? If so, assuming it's unique, use that
2.  look again at the element, does it have a class that is unique? If so, use that
3. look at the parent or surrounding elements. Is there a container (div) or label that wraps the input? If so, use a parent-child relationship (space or > depending on structure)
4. Continue to follow this process up the parent chain until you can find something unique.

• You can test selectors in the browser console by using the $('') construct if jQuery is installed on the page
• if not, use the selectElementById or selectElementsByClassName or querySelector methods which all take a string indicating what to select

You can often do this in a few iterations to quickly find the best match

Auto-fill away!