Use Case: CSS Selector for Element Selection

In an ideal scenario, while creating workflow the automatic element selection serves adequately in selecting the right selector for a particular element on the application screen. But when the application is extremely dynamic, finding the right selector can be challenging and tricky. This is where manual element selection comes into play. Apty provides you with three options for manual element selection- CSS Selector, XPath Selector, and Custom script. This document presents a demonstration of how to use CSS Selector for Element Selection.

TABLE OF CONTENTS

Understanding Why Element Selection Can Be Tricky for Extremely Dynamic Applications

To perform element selection, we need unique DOM selectors. A DOM selector is formed by attribute-value pairs, classes, ids, tags, or their combinations from the DOM. A selector is used to point to elements and unique DOM selectors help us identify and select the desired element on the application screen. 

When it comes to a dynamic application, the values of attributes on the DOM keep changing rapidly. If the value of the attribute changes after it has been set as a CSS Selector, then the respective element selection process will not work. That is why the element selection process can be challenging for extremely dynamic applications.

Document Object Model (DOM) is a 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. 

How does CSS Selector solve the issue?

While performing this manual element selection, we manually inspect, find, verify, format, and add a DOM selector or a combination of DOM Selectors as CSS Selector. This helps us in making sure that the Selector is accurate and non-dynamic.

How to use CSS Selector?

The following demonstration shows how to use CSS Selector for the Element Selection process. We are showing the demonstration on the CA PPM application. Here we are configuring a newly created workflow from the Studio and we need to select the Program Dashboard element to attach the balloon for the first step of the workflow. Let us see how to do that. 

Login to the Apty Studio and Launch the CA PPM application. Then initiate the workflow creation process. See more. Now, to perform the element selection process follow the steps given below. 

Step 1: Inspect

First, we will inspect the element that we want to select. Right-click on the browser screen and click on Inspect.

Then click on the select icon(a) to start selecting an element on the page. Then click on the element (b) you want to inspect as shown below.

Step 2: Find

From the highlighted portion of codes (b) in the above image, we will look for attribute-value pairs that can be set as CSS Selector. Here, we can see two pairs: href and title that is linked with the Program Dashboard button on the screen. Here, 

href='#action:copProgramDashboard&frame_id=502"
title="Program Dashboard"

Ideally, href and title attributes have unique values. Similarly, we can also look for idand classes in the DOMKeep in mind that while picking a selector we try to avoid all attributes with numerical values as they are more likely to change when there's a change in the DOM. Additionally, it is recommended that you verify the uniqueness of selectors before moving ahead in the element selection process. 

Step 3: Format 

Follow these instructions while formatting a CSS selector.

1. For an attributes

[attribute="value"]

Example: [title="Program Dashboard"]

2. For a class

.class

Example: .ppm_tab

3. For a tag

tag

Example: span

4. Combination of attributes from the same level on the DOM structure:

[attribute 1="value 1"][attribute 2="value 2" ] 

Example: [href='#action:copProgramDashboard&frame_id=502"][title="Program Dashboard"]

5. Combination of a class and an attribute from different levels on the DOM structure

.class<space>[attribute="value"]

Example: .ppm_tab [title="Program"]

6. Combination of a class and a tag from the parent-level of the DOM, and an attribute from the child-level of the DOM

tag.class<space>[attribute="value"]

Example: span.ppm_tab [title="Program"]

Note: While using parent-child combination of selectors: [parent selector]<add a space>[child selector] (Note: Parent selector must be added before the child sele to follow the DOM Structure)

Step 4: Verify

There are two ways you can verify the uniqueness of a selector:

1. Right-click on the application screen and click on Inspect. Then click on Console

Now let us verify the uniqueness of the following two selectors. Use the query given below, which returns an array of elements including all the element that matches the selector. This way we can see if there is more than one element linked to the selector we have picked. 

Query for verifying the uniqueness of a selector: document.querySelectAll('selector')

In the above example, Selector 1 is matched with 10 elements on the screen. This means Selector 1 is not unique. 

Selector 2 is matched with only 1 element. This is a unique selector and we can set this as our CSS Selector for the respective element.

2. You can also verify the uniqueness while adding the selector on Apty Studio. 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.

Step 5: Add

Once we have completed the verification step, we can go ahead and add the selector to the CSS Selector input box on the Studio as shown below.

Best Practices to follow when the application is extremely dynamic

When the application is extremely dynamic, most of the attributes will have numeric values which are going to keep changing frequently. In such scenarios, we will use either of the following or both if needed. 

1. Formatting with an asterisk "*" after removing the dynamic suffix or/and prefix part of the selector

For example: If the dynamic selector is [title="Dashboard029"], then we would first remove the suffix, format it with an asterisk as [title*="Dashboard"], and then verify if this is selector is pointing to a unique element. 

2. Using a combination of parent and child selectors to make the selector more accurate. Make sure you follow the above-mentioned formatting. 

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.