Advance Element Selectors for Workflows – Apty Support

In an ideal situation, the default element selection(Select Element option in Apty Studio) during Workflow creation helps sufficiently in choosing a unique selector for an element on the application page. Identifying a unique selector, however, might be challenging in applications that are highly dynamic. That is when manual element selection comes handy. Apty provides four advance options for manual element selection such as Custom Script, CSS Selector, XPath, and Text Selection.

Types of Element Selectors
- Element Selection
- Custom Script
- CSS Selector
- XPath
- Text Selection

Element Selection

The Element Selection selector captures a web element on your application while creating Workflows. Apty Studio captures the element attributes which enables the Workflow balloon to appear directly next to the selected element.

To select an element on your application using Element Selection,

1. Login to the Apty Studio and initiate your Workflow creation process.

Note:

To learn how to create a Workflow, see Create Workflows.

2. Click the Select Element button and then hover your cursor over the element you want to select on your application.

Note:

When you move your cursor over the application screen, various UI elements will become selectable.

3. Click the element you want to select.

4. Give a name and instruction to your Workflow step and then click Done.

Custom Script

You can identify an element using it's Custom Script which consists of attributes such as class, id, placeholder, etc. This option can be used in scenarios when there are a list of elements displayed together in some pattern on your application and you want your Workflow balloon to precisely point to only one of them. For example, selecting an element in a dropdown menu.

Info:

A custom script is a piece of code that manages the way elements on a webpage looks or behaves.

To select an element using it's custom script,

1. Login to the Apty Studio and initiate your Workflow creation process.

Note:

To learn how to create a Workflow, see Create Workflows.

2. Right-click on the application screen, and then click Inspect.

3. Click the inspect icon and then over your cursor over the UI elements.

Note:

When you move your cursor over the application screen, various UI elements will highlight and become selectable.

4. Select the element you want to inspect.

Note:

The block of code for the selected element will be highlighted under the Elements tab.

5. Verify the uniqueness of the selector in the Console tab.

6. On your Apty Studio, click Custom Script from the dropdown.

7. Write the following code in the Custom function body input field.

return document.querySelector('["unique selector"]');

CSS Selector

Your application uses unique DOM attributes like class, id, placeholder, or more for some elements on the page. Use the CSS Selector option to identify an element by it's unique id or class name. This ensures that the selector is accurate and unique to the element attached to it.

Info:

Document Object Model(DOM) is an application programming interface (API) for HTML and XML documents. It defines the logical structure of documents and the way the document is accessed and manipulated.

To select an element using its unique CSS Selector,

1. Login to the Apty Studio and initiate your Workflow creation process.

Note:

To learn how to create a Workflow, see Create Workflows.

2. Right-click on the application screen, and then click Inspect.

3. Click the inspect icon and then over your cursor over the element you want to inspect.

Note:

When you move your cursor over the application screen, various UI elements will highlight and become selectable.

4. Click the element you want to find the unique CSS selector for.

Note:

The block of code for the selected element will be highlighted under the Elements tab.

5. Verify the uniqueness of the selector in the Console tab using the query document.querySelectAll('[selector]').

Note:

It is recommended that you verify the uniqueness of selectors before moving ahead in the element selection process.

Not unique

when length is >1

Unique

when length is =1

6. On your Apty Studio, click CSS Selector from the dropdown.

7. Enter the unique selector in the CSS Selector input field and then click Close.

Note:

If the Selector is unique then the CSS Selector input box turns green.
If the Selector is not unique, not available, or linked to more than one element on the screen then the input box turns red, as shown below.

CSS Selector	Example
[attribute="value"] Attribute-value pair	[title="Program Dashboard"]
.class Class name	.ppm_tab
tag Tag name	span
[attribute 1="value 1"][attribute 2="value 2" ] Combination of attributes from the same level on the DOM structure	[href='#action:copProgramDashboard&frame_id=502"][title="Program Dashboard"]
.class<space>[attribute="value"] Combination of a class and an attribute from different levels on the DOM structure	.ppm_tab [title="Program"]
tag.class<space>[attribute="value"] Combination of a class and a tag from the parent-level of the DOM, and an attribute from the child-level of the DOM	span.ppm_tab [title="Program"]

Note:

While using parent-child combination of selectors, ensure to add the parent selector before the child selector to follow the DOM Structure. Example, [parent selector]<add a space>[child selector]

XPath

To increase accuracy, provide high-quality statistics, and speed up application performance, the XPath records and maintains the entire attribute path connected to an element on your application.

To select an element using its XPath,

1. Login to the Apty Studio and initiate your Workflow creation process.

Note:

To learn how to create a Workflow, see Create Workflows.

2. Right-click on the application screen, and then click Inspect.

3. Click the inspect icon and then over your cursor over the element you want to inspect.

Note:

When you move your cursor over the application screen, various UI elements will highlight and become selectable.

4. Right-click on the highlighted code of the element under the Elements tab and then select Copy.

5. Click Copy XPath.

6. On your Apty Studio, click XPath from the dropdown.

7. Paste the XPath in the input field and then click Close.

Text Selection

You can use Text Selection to capture a text element on the webpage and display Apty content(like Workflows, Validations, Launchers, Tooltips, and Announcements) created for the selected text. When content is created, it can only be viewed if the webpage contains the text.

To select an element using Text Selection,

1. Login to the Apty Studio and initiate your Workflow creation process.

Note:

To learn how to create a Workflow, see Create Workflows.

2. Click Text Selection from the dropdown in Apty Studio.

3. Click the Select Text Element button and then hover your cursor over the text you want to select on your application.

Note:

When you move your cursor over the application screen, various UI elements will become selectable.

4. Click the element you want to select.

5. Give a name and instruction to your Workflow step and then click Done.

Related articles