# Click on button which changes position

**URL:** <https://forum.katalon.com/t/click-on-button-which-changes-position/45084>\
**Category:** Web Testing\
**Tags:** katalon-studio\
**Created:** [June 30, 2020, 7:57am UTC](https://forum.katalon.com/t/click-on-button-which-changes-position/45084 "2020-06-30T07:57:05Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![anuradha](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/anuradha/32/16103_2.png) [@anuradha](https://forum.katalon.com/u/anuradha)\
**Post date:** [June 30, 2020, 7:57am UTC](https://forum.katalon.com/t/click-on-button-which-changes-position/45084/1 "2020-06-30T07:57:05Z")

</div>

Hello,  
How can i scroll to an element with a certain value.  
My issue is that i have a table with a list of buttons. I need to click on the button on the middle which has a value. The list can change anytime and the button can change position.  
How can i make it click on the same button dynamically.

Please do let me know in case more info is required.

Thanks

---

<div class="post-metadata">

**Author:** ![helpdesk](https://avatars.discourse-cdn.com/v4/letter/h/7c8e57/32.png) [@helpdesk](https://forum.katalon.com/u/helpdesk)\
**Post date:** [June 30, 2020, 4:38pm UTC](https://forum.katalon.com/t/click-on-button-which-changes-position/45084/2 "2020-06-30T16:38:22Z")

</div>

@anuradha There are two ways. If you can identify your element with a certain value in a static manner, like text()=‘value’ or id(‘myValue’), then use that. Otherwise you will have to search the table X (across) and Y (down) axis for the “certain value” element. See below for assist on searching web tables:

> **[How to handle Web Tables](https://docs.katalon.com/katalon-studio/docs/handle_web_tables.html)**
>
> A Web table is a collection of rows and columns. This article will show you how to handle web tables using Katalon Studio.

If you can find the element via static manner it will not matter if the element moves on the page. Similar if you search table and the element has certain value.

---

<div class="post-metadata">

**Author:** ![anuradha](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/anuradha/32/16103_2.png) [@anuradha](https://forum.katalon.com/u/anuradha)\
**Post date:** [July 2, 2020, 6:41am UTC](https://forum.katalon.com/t/click-on-button-which-changes-position/45084/3 "2020-07-02T06:41:22Z")

</div>

Hello There,  
Can you help me get the xpath of the below:

 ![image](https://europe1.discourse-cdn.com/katalon/original/2X/2/22cec43f0392a74311651c5253acba52ef8b3080.png)  
What i want to do is click on the button “Choisir”. All the rows have a button Choisir as i see only the value is unique.  
What i want to do is click on the button “Choisir” in the table with something static[i think the value is static here] so that whenever my test runs it knows it has to click on this button.  
Thanks

---

<div class="post-metadata">

**Author:** ![Lewis-H](https://avatars.discourse-cdn.com/v4/letter/l/49beb7/32.png) [@Lewis-H](https://forum.katalon.com/u/Lewis-H)\
**Post date:** [July 2, 2020, 3:05pm UTC](https://forum.katalon.com/t/click-on-button-which-changes-position/45084/4 "2020-07-02T15:05:28Z")

</div>

You need to use JavaScript:

var d = document.getElementById(“button”);  
d.addEventListener(‘click’,function(){  
d.className = d.className + " move";  
});  
Demo: [http://jsfiddle.net/LJHQW/3/](http://jsfiddle.net/LJHQW/3/)

Or, if you’re already using jQuery:

$(’.button’).click(function(){  
$(this).addClass(‘move’);  
});  
Demo: [http://jsfiddle.net/LJHQW/1/](http://jsfiddle.net/LJHQW/1/)

---

<div class="post-metadata">

**Author:** ![helpdesk](https://avatars.discourse-cdn.com/v4/letter/h/7c8e57/32.png) [@helpdesk](https://forum.katalon.com/u/helpdesk)\
**Post date:** [July 2, 2020, 3:30pm UTC](https://forum.katalon.com/t/click-on-button-which-changes-position/45084/5 "2020-07-02T15:30:03Z")

</div>

If you are using KS, you can create a new TestObject and set the attributes as below. When you Save the new element (TestObject), the Selector Editor creates a XPath for you from the list of items that you set to **Detect object by?**.

 ![image](https://europe1.discourse-cdn.com/katalon/original/2X/8/8829fb21dcf21b73ae37b5bde51f35299189dcff.png)

You can start with just the **value** attribute checked or all the attributes checked and adjust if needed.

---

<div class="post-metadata">

**Author:** ![anuradha](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/anuradha/32/16103_2.png) [@anuradha](https://forum.katalon.com/u/anuradha)\
**Post date:** [July 7, 2020, 9:17am UTC](https://forum.katalon.com/t/click-on-button-which-changes-position/45084/6 "2020-07-07T09:17:18Z")

</div>

Hello @helpdesk,

The way you provided above is not making me click on a specific button. There are several “Choisir” button.

 ![image](https://europe1.discourse-cdn.com/katalon/original/2X/a/a28ae6b6256e26953eba34ac5b131144d63d915f.png)

The value “Choisir” is for the button but the value which seems unique is “33627” and same goes for the other Choisir button as they will have different numerical values.

I dont want to continue clicking on the first one as there are some information that is needed later in the test case depending on the button being click thats why i want it to click on a specific button and then i will continue the tests on the choice made.

Can you please advise how i can make the xpath for only this value. for example one row can be like this with this information:  
 ![image](https://europe1.discourse-cdn.com/katalon/original/2X/0/0171ed484885c8b59394d140b64337052f53a861.png)  
and the row numbers can change when adding more information.  
Thanks

---

<div class="post-metadata">

**Author:** ![helpdesk](https://avatars.discourse-cdn.com/v4/letter/h/7c8e57/32.png) [@helpdesk](https://forum.katalon.com/u/helpdesk)\
**Post date:** [July 7, 2020, 2:52pm UTC](https://forum.katalon.com/t/click-on-button-which-changes-position/45084/7 "2020-07-07T14:52:13Z")

</div>

Although you can see the page, a computer cannot. We give it the information to find every element and it does not matter if the element moves about the page, the computer actually searches for **all elements every time**.

To find the value, **33627** , delete (or uncheck) all the other attributes except for **tag** and **value** and change the value attribute to 33627. Then save the changes. The Selector Editor should look something like:  
//input[@value=‘33627’]

If the above does **not** work, an alternative is to add another attribute, XPATH. For that you will type in:  
//input[@value=‘Choisir’]/preceding-sibling::input[@value=‘33627’]

If you copy and paste, you will have to change all **smart** quotes (have a curl or curve to them) to straight quotes.

---

<div class="post-metadata">

**Author:** ![anuradha](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/anuradha/32/16103_2.png) [@anuradha](https://forum.katalon.com/u/anuradha)\
**Post date:** [July 7, 2020, 6:19pm UTC](https://forum.katalon.com/t/click-on-button-which-changes-position/45084/8 "2020-07-07T18:19:04Z")

</div>

@helpdesk, how will it know that it needs to click on the ‘Choisir’ button of the value ’ 33627’?  
The xpath is selecting the code line which has the value ‘33627’ but not actually selecting the button.  
Thanks

---

<div class="post-metadata">

**Author:** ![helpdesk](https://avatars.discourse-cdn.com/v4/letter/h/7c8e57/32.png) [@helpdesk](https://forum.katalon.com/u/helpdesk)\
**Post date:** [July 7, 2020, 7:09pm UTC](https://forum.katalon.com/t/click-on-button-which-changes-position/45084/9 "2020-07-07T19:09:24Z")

</div>

@anuradha Sorry. Then we need to start our path from the 33627 element and move to the submit element. Change the XPATH to:

//input[@value=‘33627’]/following-sibling::input[@value=‘Choisir’]

If you copy and paste, you will have to change all **smart** quotes (have a curl or curve to them) to straight quotes.
