Custom Login Sequence

A custom login sequence is a JSON configuration which lets administrators build authentication processes that enhance and customize the login process. It’s used to configure form authentication for either a Web source or a Sitemap source.

The sequence becomes necessary when the standard form authentication requires specific actions during the login process.

Custom Login Sequence Example

{
  "url": "https://example.com/auth/login",
  "name": "<YOUR_LOGIN_NAME>",
  "steps": [
    {
      "actions": [
        {
          "type": "Click",
          "elementIdentifier": {
            "identifier": "<ID_ATTRIBUTE_VALUE_OF_USERNAME_INPUT_ELEMENT>",
            "type": "Username",
            "findType": "Id"
          }
        },
        {
          "type": "Clear",
          "elementIdentifier": {
            "identifier": "<ID_ATTRIBUTE_VALUE_OF_USERNAME_INPUT_ELEMENT>",
            "type": "Username",
            "findType": "Id"
          }
        },
        {
          "type": "SendKeys",
          "elementIdentifier": {
            "identifier": "<ID_ATTRIBUTE_VALUE_OF_USERNAME_INPUT_ELEMENT>",
            "type": "Username",
            "findType": "Id"
          }
        },
        {
          "type": "PressTab"
        }
      ]
    },
    {
      "actions": [
        {
          "type": "Clear",
          "elementIdentifier": {
            "identifier": "<ID_ATTRIBUTE_VALUE_OF_PASSWORD_INPUT_ELEMENT>",
            "type": "Password",
            "findType": "Id"
          }
        },
        {
          "type": "SendKeys",
          "elementIdentifier": {
            "identifier": "<ID_ATTRIBUTE_VALUE_OF_PASSWORD_INPUT_ELEMENT>",
            "type": "Password",
            "findType": "Id"
          }
        },
        {
          "type": "PressTab"
        },
        {
          "type": "PressEnter"
        }
      ]
    }
  ]
}

Reference

Action Types

Click

Simulates a mouse click on an element. Checks for preconditions, for example the element must be visible and it must have a height and width greater than 0.

JavaScriptClick

Simulates a mouse click on an element, but it doesn’t check on the preconditions mentioned above.

Clear

Clears the content of the element.

SendKeys

Performs the action to type text in that element.

PressTab

Simulates pressing the tab key.

PressSpace

Simulates pressing the space key.

Submit

Performs the action to submit form.

Element Identifier Attributes

Element Identifier type Values

Username

Identifies the <input> element in which users enter their username or email address to authenticate with.

Password

Identifies the <input> element in which users enter their password.

Default

Use Default as the element identifier type value for all non-username, non-password elements used in the login sequence.

Element Identifier findType Values

Name

Used to select an element based on its name attribute value.

Example

To select the <input name="username"></input> HTML element in a form, use:

"elementIdentifier": {
  "identifier": "username",
  "type": "Username",
  "findType": "Name"
}
Id

Used to select an element based on its id attribute value.

Example

To select the <input id="userid"></input> HTML element in a form, use:

"elementIdentifier": {
  "identifier": "userid",
  "type": "Username",
  "findType": "Id"
}
TagName

Used to select an element based on the tag name.

Example

To select the <button id="submit"></button> HTML element in a form, use:

"elementIdentifier": {
  "identifier": "button",
  "type": "Default",
  "findType": "TagName"
}
Tip
Leading practice

Although this would work, other more distinctive selection methods should be used.

ClassName

Used to select an element based on its class attribute value.

Example

To select the <button class="o-auth__toggle-external-login js-o-auth__toggle-external-login">Show External Login</button> HTML element in a form, use:

"elementIdentifier": {
  "identifier": "o-auth__toggle-external-login",
  "type": "Default",
  "findType": "ClassName"
}
CssSelector

Used to select an element by specifying a CSS selector.

Example

To select the <input id="email-address"></input> HTML element in a form, use:

"elementIdentifier": {
  "identifier": "input#email-address",
  "type": "Username",
  "findType": "CssSelector"
}
XPath

Used to select an element by specifying an XPath expression.

Example

To select the <input placeholder="Email"></input> HTML element in a form, use:

"elementIdentifier": {
  "identifier": "//input[@placeholder=’Email’]",
  "type": "Username",
  "findType": "XPath"
}