When creating a Login Profile for screenshots, you must specify element locators for the username and password fields, as well. as submit button to click.
Element locator options
There are several ways to specify the locator option for each element in a login form:
- ID
- name
- class name
- CSS selector
- link text
- XPath
- other attributes
| Note: | Should the result of any method return multiple elements, only the first one found on the page will be used. |
Find element by ID
Example HTML: <input type="text" id="username">
Example locator entry: id=username
Selects the first element on the page that has the id attribute with a matching value.
Find element by name
Example HTML: <input type="password" name="pwd">
Example locator entry: name=pwd
Selects the first element on the page that has an name attribute with matching value.
Find element by class name
Example HTML: <input class="username_field" type="text">
Example locator entry: class=username_field
Selects the first element on the page that has a class attribute with matching value.
| Note: | If you need to select multiple class names, use CSS selectors instead. |
Find element by CSS selector
Example HTML: <div class="go_btn"><button>Go</button></div>
Example locator entry: css=.go_btn > button
Selects the first element on the page that matches the CSS selector. A css selector is the same format used in JavaScript, so those familiar with JavaScript or jQuery selectors will be familiar with this style. Technically, it can be used in place of any other selectors since css=#username results in the same selector as id=username for example.
Find element by link text
Example HTML: <a onclick="ajax_Sign_In()">Sign In</a>
Example locator entry: link=Sign In
Selects the first link (<a>) on the page that has a matching text value. Be careful that there is not more than one link on the page with the same name, or that the first one is the one you want.
| Note: | Notice the space in the example here since the same space exists in the link. |
Find element by XPath
Example HTML: <input type="button" value="Login">
Example locator entry: xpath=//input[@value='Login']
Selects the first element on the page that matches the XPath expression.
Getting the XPath using your browser dev tools:
-
Open your browser dev tools.
-
Use the select element tool.
-
Select the element you need the XPath to.
-
In the Elements tab, right click on the highlighted element and select Copy full XPath.
-
Use this XPath in the login profile. Example username selector:
xpath=/html/body/div[1]/div[1]/div[3]/div/div/div[2]/div[1]/form/div[1]/div/input.
Find element by other attributes
Example HTML: <div custom-field="go-button"><button>Go</button></div>
Example locator entry: css=[custom-field=go-button]
CSS selectors can be used to find custom attribute="value" pairs on HTML elements if your standard id and name tags are dynamic or otherwise unusable.