Skip to main content

Selectors for scanning with secure web authentication or building automated flows

  • Updated

This topic describes how to select stable selectors to be used when configuring a scan or monitoring with secure web authentication. The topic also assists you in building automated flows. 

Note: Stability of the selector is critical to success. An unstable selector will fail. Selectors that have components that change on each pageload are known as brittle selectors. Selectors must be as specific as possible and match one element.

On this page:

Testing your selector

After you've constructed a selector, test it to make sure it matches the correct element. Testing is done in the browser’s developer tools. It can be done in two ways:

  • Use the document.querySelectorAll()
  • Use the Elements tab

First testing method: document.querySelectorAll()

Follow these steps:

  1. Open the browser’s developer tools.
  2. Go to Console tab.
  3. Type in the following code (make sure to replace the placeholder with your selector):
document.querySelectorAll(`<your selector>`)

Ensure that the resulting list contains only one element. If more than one element appears, you need to use a more specific selector.

Second testing method: Elements tab

Follow these steps:

  1. Open the browser’s developer tools and navigate to the Elements tab.
  2. Use Command + F (or Ctrl + F) to search in the elements tab.
  3. Paste in your selector to perform a search. 

Ensure that only one element is matched. If more than one element is matched, you need to use a more specific selector.

Attribute based selectors

You can select an element based on an HTML attribute like this:

[<attribute>="<value>"] // <attribute> equals <value> 
[<attribute>~="<value>"] // <attribute> contains <value>

Note: Attribute values are case sensitive. You can be more specific by including the type of HTML element that should have the desired attribute, like this: 

<element>[<attribute>="<value>"] // HTML tag of type <element> with <attribute> equal to <value> 
<element>[<attribute>!="<value>"] // HTML tag of type <element> with <attribute> containing <value>

Example: 

[aria-label="Close alert"] // Any element with an aria label equal to "Close alert" 
[aria-label~="alert"] // Any element with an aria label containing the word "alert" 

button[aria-label="Close alert"] // Any button with an aria label equal to "Close alert" 
button[aria-label~="alert"] // Any button with an aria label containing the word "alert"

There are more ways to specify attribute based selectors. Refer to the Element ID,  Class and Learn more about selectors.  However, these should be sufficient for most needs. For additional ways to compare attributes, visit W3Schools.

Element ID

Generally, IDs  make good selectors, because they are often unique on the page. However, that might not always be the case. If your ID selector matches more than one element, you'll need a more specific selector. As well, avoid IDs that are made up of random letters and numbers, for example, dropdown-hwe83aqclea, because they are liable to change when a page is reloaded. 

You can select an element based on its ID in two ways. 

The first method: 

[id="<value>"] // Any element with an id equal to <value> 
OR 
div[id="<value>"] // Any div with an id equal to <value>

The second method:

#<value> // Any element with an id equal to <value> 
OR 
div#<value> // Any div with an id equal to <value>

The second method is a bit easier to read. However, it can fail in certain cases.  For example, this happens when an ID contains a colon.

Example of selecting an element based on its ID: 

#login-button // selects an element with id "login-button"
OR
button#login-button // selects specifically a <button id="login-button">

Class

By design, classes are meant to be used on multiple elements on a page. When using classes, be careful to include additional selectors to make them specific enough to find only the element you want.

You can select an element based on its class(es) in two ways.  

The first method: 

[class="<value>"] // Any element with the class <value>
[class~="<value>"] // Any element with a class containing <value> 
OR 
div[class="<value>"] // Any div with the class <value> 
div[class~="<value>"] // Any div with a class containing <value>

The second method:

.<value> // Any element with the class <value> 
OR 
div.<value> // Any div with the class <value>

Example of selecting an element based on its class(es) :

.login-input // will select any element with class "login-input"
OR
div.login-input // will select <div class="login-input some-other-unrelated-class yet-another-class">

Other attributes

Attribute-based selectors can use any attribute in the element. To see the attributes of an element, you can use the Elements  tab of the browser’s developer tools. When you’ve decided which attribute to use, create an attribute-based selector.

Example of creating an attribute-based selector:

a[href="https://levelaccess.com"] // Any a tag that links to "https://levelaccess.com"
div[role="menu"] // Any div that has a role of "menu"
button[type="submit"] // Any button that has a type of "submit"

See Learn more about selectors for an HTML attribute reference.

Child, grandchild, and siblings selectors

Use child and grandchild selectors to select elements nested within other elements. 

Child selectors

Use a child selector (>) to select an element that is a direct descendent of another element. Consider this example, where the password input is the target element.

<form name="login">
  <input type="text">
  <input type="password"> <-- target element
  <button type="submit">Submit</button>
</form>

We can use the selector form[name="login"] > input[type="password"] to select this element. Let’s analyze this example:

  • form[name="login"]:This specifies that we want the form named “login” and not any other form that might be on the page

  • input[type="password"]:This specifies that we want an input of type “password”

  • > : This specifies that we want to select only an input (of type "password") that is nested a maximum of one level inside the form name "login”

Grandchild selector

Use a grandchild selector to select an element that is nested one or more levels inside another element.

Consider the following example, where the password input is the target element. It is the same as the example above but the target element has been nested another layer down.

<form name="login">
  <label>
    Username:
    <input type="text">
  </label>
  <label>
    Password:
    <input type="password"> <-- target element
  </label>
  <button type="submit">Submit</button>
</form>

We can use the selector form[name="login"] input[type="password"] to select this element. Note that the grandchild selector is a blank space between the two elements. Let’s analyze this example: 

  • form[name="login"] - This specifies that we want the form named “login” and not any other form that might be on the page

  • input[type="password"] - This specifies that we want an input of type “password”

  • The blank space between the form and input selectors specifies that we want to select an input (of type "password") that is nested any number of levels within the form named “login”

Sibling selectors

Use sibling selectors to select elements that are located next to each other but not nested within each other.

Example of using a sibling selector:

<form name="login">
  <input type="text">
  <input type="password"> <-- target element
  <button type="submit">Submit</button>
</form>

Another way to write a selector for the target element is as follows:

input[type="text"] + input[type="password"]

This selects only the first input of type “password” that is “next” to an input of type “text”.

Choosing a success element

When choosing a success element for the login, you can use the methods described earlier in this article. However, make sure that the success element selector matches an element after logging in, and not before.

In some cases, prior to logging in, an element might already exist on the page, but have an attribute changed after logging in. You can still use this element as a success element.

Example of choosing a success element:

// Before logging in
<button id="my-button" class="btn btn-log-in">Log in</button>
// After logging in
<button id="my-button" class="btn btn-log-out">Log out</button>

Troubleshooting

Pay attention to the following situations: 

  • Success element is present before logging in: Depending on the selected success element, or the structure of the page itself, the success element might already be in the DOM before you’ve logged in.
  • Webpage uses randomly generated values for IDs and classes: Some webpages use randomly generated values for IDs and classes, which are regenerated every time the page is refreshed. To test if this is the case, pick a selector, refresh the page, and then check that the element can still be found. If the page uses randomly generated values, you’ll need to spend a bit more time crafting a selector.

Learn more about selectors

Learn more about selectors from the following resources:

Related articles

Comments

0 comments

Please sign in to leave a comment.