How can I handle dynamic web element ID and store it in a variable?

Hi Team,

I want to store dynamic (run time) web element ID in a variable so that I use this variable in WebUI.modifyObjectProperty function.

Please check the screen shot:

I have already captured this web element and the following object’s property is created:

But my query is that when I login with different account the above (image 1) web page is same with same group name (Center 01) but this time web element ID is different, so can I capture this dynamic element ID in run time for the same script?

Can you please help me out?

add group web page.jpg

add group web page object.jpg

Please copy & paste the HTML code of your target Web page. Open Chrome’s DevTool with F12 key and select Element tab. Please include node with text ‘Center 01’. Preferably include the ancestor node (

?) which contains the node with text ‘Center 01’.

Hi kazurayam,

Thank you for your response.

Actually my query is that in my web page contains ID: 3046, where 3046 is dynamic number so can I capture this dynamic number during run time and/or store this dynamic number in a variable?

Can you please review the attached screen shot?

Can you please review again and help?

dynamic_ID_New.jpg

I need to see how your page is represented in HTML code; especially how the row of “Dummy_subgroup_1” is coded (I would guess it is a

element).

Use Google Chrome’ DevTool , use “Inspect Element” feature.

Hi kazurayam,

Can you please check the attached screen shot of HTML code?

I am waiting for your positive response.
Thank you.

Group_id_html_page_underlined.jpg

Arun,

I noticed you are using Google Chrome’s DevTool. Then the easiest way to get a valid XPath to the element of your interest is to use a feature provided by the DevTool.

1. Open the target page
2. F12 to start DevTool
3. select Element tab in the DevTool
4. Right click on the node of your interest (‘3404’) → follow the cascading menu to ‘Selector actions’ → further follow ‘Copy xpath’

5. Now a valid XPath string is copied into the clipboard.
6. Reuse the xpath string in your Katalon Test Object.

Is it what you wanted to know?

copy_xpath.png

You wrote in the original post:

can I capture this dynamic element ID in run time for the same script?

I would reword this:

I want to select the “ID value” such as 3404 by a Test Object with a XPath selector. The ID value contained in the HTML element may change. I want my xpath can select the HTML element whatever value is contained.

If I am right, your problem is concerning how to write a XPath expression. If you are wondering about something else, please let me know.

-----------

I suppose that the XPath expression proposed by the Browser’s DevTool would be something like this:

//table//tr[2]/td[2]/div[1]/div[2]/span

This expression does NOT refer to “3404”. So it would work fine regardless of value contained in the element.

On the other hand, Katalon Studio’s Recorder/Spy may have generated a xpath like:

//span[text()='3404']

This is a syntactically valid expression, but not suitable for your intension. Because this expression will fail once the text is changed from “3404” to something else.

There are so many possible XPath expressions to point to a HTML element in the target web page. Katalons’ Recorder/Spy suggests just one possible candidate. If the suggested xpath does not satisfy your specific need, then it is up to you to rewrite the expression.

Hi Kazurayam. I’ve seen you answering many question and you’ve been of great help. First of all thank you for that.

I’ve not been able to solve this specific problem.

Coping xpath from devtool returns the same xpath captured by katalon which is some thing like this

[@id=“select2-bot_task_action_150-container”]

This id changes when ever a new select2 is created. I want to click on that new select2 which has just been created on runtime which ofcourse have different id i.e the 150 has changed now but the stored id in katalon object is still 150 so it will click on the previously created select2.

Can you please help me what our my possible option for this

1 Like

edit is
Coping xpath from devtool returns the same xpath captured by katalon which is some thing like this
//id=“select2-bot_task_action_150-container”]

Hamza,

Sorry, I can not understand your problem without seeing your target HTML (before and after ID change) , your test case code, your Test Object definition etc.

This is the html of object i have captured

Email

But when this object is created again by katalon the id changes to

Email

The xpath stored in object repository is
//*[ @ id = “select2-bot_task_action_158-container”]

But when katalon actually tries to click the object
xpath has become

// * [ @ id = “select2-bot_task_action_159-container”]

what should i do?

The point is i never know what the id of the object is gonna be so how can i can make my script click on the object

1 Like

The id is not the only thing. You should look for alternative way to identify the element you want to select.

The text content of the tag in question is ‘Email’, I suppose this text content is stable, would not change dynamically. If I am right, you would be able to use it as an identifier. The following XPath selects a element of which text content is ‘Email’

//span[text() = 'Email']

or

//span[. = 'Email']

It could be a case that the title attribute of the span element might be more stable. Then you should rather use the following alternative XPath:

//span[@title='Email']

The id attribute, the element’s text content, the title attribute — which one is most appropriate? you may ask me. Well, I do not know. It solely depends the nature of the target HTML.

Yes i know other things can be used but in this case i dont have a choice because there are many select2 boxes on the page so only id is the one differentiating among them

Screenshot (6).png

Screenshot (6).png

1 Like

Hamza,

You wrote:

I want to click on that new select2 which has just been created on runtime

How you can identify the new select2 which has been created on runtime?

Does the target HTML contains any markup which tells “this has just been created”?

Who and when created the new selecte2 node? Katalon TestCase? or do you operate browser before running Katalon TestCase?

Hamza Abbas said:

The point is i never know what the id of the object is gonna be so how can i can make my script click on the object

Well, if so, the conclusion would be simple. You can not do what you want to do against your current system. If possible, you should talk to your development team to change the design of the Application Under Test so that you can do what you want to do.

id="select2-bot_task_action_159-container"

Is it possible to assume that the digits in the id value predictably incremented? 159, 160, 161,…

If you can assume it, then there would be an alternative approach. Use WebDriver API to select a group of span tags, sort them by ID value to find out the newest one.

kazurayam said:
Use WebDriver API to select a group of span tags, sort them by ID value to find out the newest one.

Yes that might work. Let me try it if that works i’ll post it.

kazurayam said:

Use WebDriver API to select a group of span tags, sort them by ID value to find out the newest one.

Can you please let me know how to do that. I mean how to select group of span and sort them i am not able to find it

I have made a demo project on GitHub:

------
Hamza’s question was as follows:

This is the html of object i have captured <span class="select2-selection__rendered" id="select2-bot_task_action_158-container" role="textbox" aria-readonly="true" title="Email">Email</span> But when this object is created again by katalon the id changes to <span class="select2-selection__rendered" id="select2-bot_task_action_159-container" role="textbox" aria-readonly="true" title="Email">Email</span> The xpath stored in object repository is //*[@id="select2-bot_task_action_158-container"] But when katalon actually tries to click the object xpath has become //*[@id ="select2-bot_task_action_159-container"] what should i do?

Hamza wanted to identify a span element which was last inserted into the target HTML.

Problem to solve

The target HTML contains multiple <span> elements which are almost identical each other except the id attribute value.

The <span> elements are inserted or deleted by interactive operation to the page.

The <span>'s id attribute value has a fixed format:

  1. it starts with a fixed string ‘select2-bot_task_action_’
  2. which is followed by a digit
  3. which is followed by a fixed string ‘-container’

What is assumed

I assume that the digit in the id attribute value is allocated when the <span> element is inserted in the HTML, and the digit will be incremented: the new digit will be equal to the last value + 1.

The digit will simply become bigger and bigger. For example, 158,159, …, 999, 1000, …, 9999, …, 99999, …

The digit does not goes back to some initial value. For example, …, 998, 999, 0, 1, 2, …

I am aware this assumption is too naive and likely to break. But here I assume this because I am not informed of anymore about Hamza’s Appliation Under Test.

Solution

By calling List<WebElement> com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords.findWebElements(TestObject, int), I can get a list of org.openqa.selenium.WebElement.

I would use XPath: //span[starts-with(@id, 'select2-bot_task_action')] in order to select the span elements in question.

I would collect the values of id attribute of the selected span elements, parse the id attribute values, sort the list of id values by the descending order of hte contained digits.

I would identify the id value with the greatest digit. It should be the one Hamza wanted.

Description

  1. I made a mock target HTML at http://demoaut-mimic.kazurayam.com/testbed_7527.html.
  2. The target HTML has code fragrement as follows:
<table class="table table-bordered">  <thead>  </thead>  <tbody>    <tr>      <td><span class="select2-selection__rendered" id="select2-bot_task_action_158-container" role="textbox" aria-readonly="true" title="Email">Email</span></td>    </tr>    <tr>      <td><span class="select2-selection__rendered" id="select2-bot_task_action_159-container" role="textbox" aria-readonly="true" title="Email">Email</span></td>    </tr>    <tr>      <td><span class="select2-selection__rendered" id="select2-bot_task_action_160-container" role="textbox" aria-readonly="true" title="Email">Email</span></td>    </tr>  </tbody></table>
  1. I made a TestObject named Object Repository/Page_Katalon Discussion 7527/span_Email. It uses the following XPath expression to select a group of span elements:
//span[starts-with(@id,"select2-bot_task_action_")]
  1. I have developed a Test Case named Test Cases/TC1. The source code is here. It is a bit complicated Groovy script. Hamza, please study this. Your problem is difficult enough and deserves this level of programming skill.
  2. When I run the Test Case, I got the following ouput in the log.
11-16-2018 08:08:40 PM - [INFO]   - before sorting:...11-16-2018 08:08:40 PM - [INFO]   - >>> id is select2-bot_task_action_158-container, id.getSequenceNumber() is 158...11-16-2018 08:08:40 PM - [INFO]   - >>> id is select2-bot_task_action_159-container, id.getSequenceNumber() is 159...11-16-2018 08:08:40 PM - [INFO]   - >>> id is select2-bot_task_action_160-container, id.getSequenceNumber() is 160...11-16-2018 08:08:40 PM - [INFO]   - after sorting:...11-16-2018 08:08:40 PM - [INFO]   - <<< id is select2-bot_task_action_160-container, id.getSequenceNumber() is 160...11-16-2018 08:08:40 PM - [INFO]   - <<< id is select2-bot_task_action_159-container, id.getSequenceNumber() is 159...11-16-2018 08:08:40 PM - [INFO]   - <<< id is select2-bot_task_action_158-container, id.getSequenceNumber() is 158...11-16-2018 08:08:40 PM - [INFO]   - >>> the latest one is select2-bot_task_action_160-container

I do not know full HTML code of Hamza’s AUT, so that my test case and my test object as example may not be applicable to his case.

Hamza, please modify my sample code and solve your problem for yourself.