Specifying Element Locators for Login Profiles

Applies to CrossBrowserTesting SaaS, last modified on October 07, 2021

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 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.

    Element select
    Copy file XPath dropdown
  • 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.

Highlight search results