In this tutorial I want to introduce a couple of techniques to work with auto fill for web page connections. This article is quite long and also includes some tips and tricks at the end of the article, so make sure you check out all the sections below:
Creating a Web Page Connection
Let's start simple and create a web page connection for our support portal. In my case I prefer the Chrome based plugin but it also applies to the IE based plugin or the Safari plugin on macOS:
It is often the case that a web page redirects to the actual login page. Note that I enter the actual URL of the login page, not just the URL of the support portal. This is important for Royal TS to get all the input elements from the web page. To be sure you got the correct URL, open your favorite browser and navigate to the login page. Once you see the actual login page, grab the URL and use it in Royal TS.
Auto Fill
Now let's switch to the Auto Fill settings:
When you switch to the auto fill page, Royal TS will automatically load and parse the HTML page to look for input elements, buttons and links. In case you need to change the URL, you can switch to the main page, change the URL and switch back to the auto fill page. The Refresh button allows you to trigger the HTML page download and let Royal TS parse the page again.
If the HTML page was parsed successfully, you will see a list of elements. In most cases, elements are named properly so that you can easily guess and assume which element is for the username or email address and which element is for the password or the login button. At the end of this article, we will also discuss some methods on how to identify these elements in case they do not have proper naming.
Also note that I'm not entering the actual username or password in that form. Technically you could enter any static text and also use this mechanism to fill out more complex forms. We don't recommend putting the actual username and password in here. We are using replacement tokens $EffectiveUsername$ and $EffectivePassword$. The main benefit for using these tokens is that you can use the built-in credential management and refer to a credential (which may be in your personal document).
Credential
The last step is to specify the username and password in the Credential settings page:
For this example, I enter the username and password directly by choosing "Specify username and password". I could also choose "Use an existing credential" or "Specify a credential name" to separate the credential from the connection - which makes it easy to share the connection in a team, for example.
Well, that's it for the first section. When we click OK and connect to the Web Page connection, we will be logged in automatically.
Use Auto Fill in the Credential
When you create a dedicated credential object for your account, you can configure the auto fill settings on the credential level:
First create a new Credential with the account details:
Auto Fill
Then switch to the Auto Fill page:
When you compare the auto fill page with the one from the first section above, you will notice the following:
- The URL can be entered directly here (the same rules apply as above: use the URL to the actual login page)
- Different replacement tokens are used ($this.UserName$ and $this.Password$
Other than that, the configuration is the same.
Click OK to create the credential.
Web Page Connection
Create a new web page connection:
Note: you still need to provide a URL, even if the URL is already configured in the credential we later assign. The reason for this is simple: in case we cannot resolve the assigned credential (for example, the document is not loaded or the credential has been deleted), you can at least still open the web page connection (without automatic login).
Credential
Since the auto fill configuration is provided by the credential, we can completely skip the auto fill page in this example. Now we just need to assign the Credential and we're good to go:
The main benefit of this approach is that you can also use the credential and auto fill configuration in our RoyalPasswords Chrome or Firefox browser extension.
Tips and Tricks
How to identify HTML Elements
Sometimes you will come across web pages which have elements with cryptic names. All major web browsers include some sort of "developer tools". You don't need to be an expert to use the developer tools, it's quite easy to get some additional information about the web page and its elements.
Inspect Element
If you want to find out more about the username / email address field in the login page, simply right-click on it and use the "Inspect Element" command to bring up the developer tools (note other browsers may have a slightly different wording and feature set). In my case I'm using Chrome again:
As you can see in the screenshot above, the name attribute of the element corresponds with the display in the auto fill page.
jQuery Selector
In some cases, elements cannot be identified easily but Chrome can also be of help. Instead of selecting an element in the auto fill page, you can also just enter the jQuery selector of the field. One way to find a valid jQuery selector is again by using the developer tools:
Just enter the jQuery selector in the Element field and add it:
When the above just doesn't work
Key Sequence Task
There are still a couple of scenarios where all of the above fails. It heavily depends on how the login page is designed and in some situations, auto fill will just not work. For example:
- Login pages where the login form is loaded by JavaScript afterwards
- Login pages with framesets or pages where the login form is placed in a separate iFrame
- Java Applets
- Flash
When for one of the above scenarios auto fill wouldn't work, you can try to use a key sequence task to enter the username or password. Create a new Key Sequence Task, provide a descriptive name and switch to the key sequence settings:
You can use the Insert button to insert special key sequence tokens and replacement tokens. The key sequence as shown above will do the following when executed:
- {WAIT:2000}: a delay of 2000ms
- $EffectiveUsername$: the username of the context connection (web page connection) will be entered
- {TAB}: the tab key will be pressed
- $EffectivePassword$: the password of the context connection (web page connection) will be entered
- {ENTER}: the enter key will be pressed
Once you created the key sequence task you have two options, depending on how the web page behaves:
Automatic
In case the username textbox in the web page is focused after you connected to the web page connection, you are in luck! You can then use the created key sequence task to be executed automatically right after the connection has been established:
Semi Automatic
If the web page needs you to focus the textbox first, you can add the task to your favorites and execute it manually after the web page connection has been established:
The delay in the key sequence task allows you to move the focus to the first textbox before the first keystrokes are fired.