# How to find element by querySelector

**URL:** <https://forum.katalon.com/t/how-to-find-element-by-queryselector/85482>\
**Category:** Web Testing\
**Tags:** katalon-studio\
**Created:** [March 20, 2023, 10:28am UTC](https://forum.katalon.com/t/how-to-find-element-by-queryselector/85482 "2023-03-20T10:28:27Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![\_zinji](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/_zinji/32/22831_2.png) [@\_zinji](https://forum.katalon.com/u/_zinji)\
**Post date:** [March 20, 2023, 10:28am UTC](https://forum.katalon.com/t/how-to-find-element-by-queryselector/85482/1 "2023-03-20T10:28:27Z")

</div>

Hello,

As my case. I can not find element by id or class because FE dev using a framework and it will be generation random id, class. So, I ask them add an attribute into their code as same as `data-test-id="name"` for I finding element point. I want to know I can using document.querySelector([data-test-id=“name”]) as same as Keywords  
I trying but it not work  
`WebUI.getAttribute(findTestObject('to'), 'data-test-id)`

and when I using  
`String js = 'document.querySelector("[class=\'v-row--no-gutters\']")'`

It execution will return null.

 ![image](https://europe1.discourse-cdn.com/katalon/original/3X/1/6/169ff742749539c9d7b94b44e1eeb545dbbc4a02.jpeg)

But when I tried in browser, it still got

 ![image](https://europe1.discourse-cdn.com/katalon/original/3X/b/0/b01868dea2223b774e59fc9ad1108db981d802b1.png)

Please help me the way is simple and can re-user for many cases

---

<div class="post-metadata">

**Author:** ![Russ\_Thomas](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/russ_thomas/32/11884_2.png) [@Russ\_Thomas](https://forum.katalon.com/u/Russ_Thomas)\
**Post date:** [March 20, 2023, 2:08pm UTC](https://forum.katalon.com/t/how-to-find-element-by-queryselector/85482/2 "2023-03-20T14:08:54Z")

</div>

Firstly, HTML `<a>` elements don’t normally have a `value` property.

This is how to return the `href` property of the first `<a>` element which is a child of the element with class `my-class`:

```auto
String js = "return document.querySelector('.my_class a').href;"
String href = WebUI.executeJavaScript(js, null)

```

---

<div class="post-metadata">

**Author:** ![\_zinji](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/_zinji/32/22831_2.png) [@\_zinji](https://forum.katalon.com/u/_zinji)\
**Post date:** [March 20, 2023, 4:18pm UTC](https://forum.katalon.com/t/how-to-find-element-by-queryselector/85482/3 "2023-03-20T16:18:31Z")

</div>

Thank you for your reply. But in the element \<input, how I can get cssSelector instead xpath //@input[id=“id-19] (id-19 is a dynamic string auto gen for a init session) (input case is a e.g case for any case I want to get).

May I use  
driver.findElements(By.cssSelector……) as same as selenium on the Java?

So in this question, I just want to know the solution for get element not use findTestObject. Because xpath of TO is not flexible for all cases. It will be great when I know some solutions find element

---

<div class="post-metadata">

**Author:** ![Russ\_Thomas](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/russ_thomas/32/11884_2.png) [@Russ\_Thomas](https://forum.katalon.com/u/Russ_Thomas)\
**Post date:** [March 20, 2023, 5:51pm UTC](https://forum.katalon.com/t/how-to-find-element-by-queryselector/85482/4 "2023-03-20T17:51:53Z")

</div>

> [@\_zinji](#):
>
> May I use  
> driver.findElements(By.cssSelector……)

Yes.

> [@\_zinji](#):
>
> I just want to know the solution for get element not use findTestObject

I am not using findTestObject. Neither are you. findTestObject only works with Test Objects - that’s why they are not being used.

---

<div class="post-metadata">

**Author:** ![Dan\_Bown](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/dan_bown/32/20464_2.png) [@Dan\_Bown](https://forum.katalon.com/u/Dan_Bown)\
**Post date:** [March 20, 2023, 6:24pm UTC](https://forum.katalon.com/t/how-to-find-element-by-queryselector/85482/5 "2023-03-20T18:24:34Z")

</div>

I think you’re missing something about Test Objects. You said:

> WebUI.getAttribute(findTestObject(‘to’), 'data-test-id)

What did you put in the test object above? If you have a custom attribute then you can add that to your test object and reuse it as many times as required. See https://docs.katalon.com/docs/create-tests/test-objects/web-test-objects/selection-methods-for-web-tests-in-katalon-studio

---

<div class="post-metadata">

**Author:** ![\_zinji](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/_zinji/32/22831_2.png) [@\_zinji](https://forum.katalon.com/u/_zinji)\
**Post date:** [March 21, 2023, 1:19am UTC](https://forum.katalon.com/t/how-to-find-element-by-queryselector/85482/6 "2023-03-21T01:19:26Z")

</div>

Thank you to 2 guys. findTestObject currently using xpath full. But the screen will be implement some UI more in the many times, that why I want FE dev input custom attribute `data-test-id="name"` . But they can not add it to all the elements. E.g:

```auto
<div class="v-row v-row--no-gutters" data-test-id="form-create-product">
<div class="row-1">
<div class="dsgsgd thumbnail">
<img src="">
</div>
<div class="gdsfdgsfdgs product-sfgfdg">
<a href="">Product 1</a>
</div>
</div>
<div class="row-2">
<div class="dsgsgd thumbnail">
<img src="">
</div>
<div class="gdsfdgsfdgs product-sfgfdg">
<a href="">Product 1</a>
</div>
</div>
</div>

```

So, I can found to first

 have data-test-id. But I can not find extract to row-1 , row-2. Because row-1, row-2 is dynamic rendering for once time. And sometime, Developer not use standard element for button or some elements, they used 
 in anywhere they want

---

<div class="post-metadata">

**Author:** ![grylion54](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/grylion54/32/16265_2.png) [@grylion54](https://forum.katalon.com/u/grylion54)\
**Post date:** [March 27, 2023, 7:24pm UTC](https://forum.katalon.com/t/how-to-find-element-by-queryselector/85482/7 "2023-03-27T19:24:10Z")

</div>

I would think Management would have a say in what the Developers do if they do not want to release a pile-of-dung, especially when you can reduce the bugs with testing. Unfortunately, sometimes Management does not know what is going on between the various sections. They got you to start testing their app, so maybe they need to be kept abreast of the lack of support from Developers given you for testing. If you need more identifiers, then they should be able to assist or explain why not.

Saying that, XPATH allows you to move from one element to another whether child or parent or otherwise. As an example, if you have the known, `//div[@data-test-id="form-create-product"]`, then you should get you to “row-1” by:  
`//div[@data-test-id="form-create-product"]/div`

Or “Product 1” by:  
`//div[@data-test-id="form-create-product"]/div[1]/div[2]/a`

Or “row-2” by:  
`//div[@data-test-id="form-create-product"]/div[2]`

Or the second “Product 1”:  
`//div[@data-test-id="form-create-product"]/div[2]/div[2]/a`

> **Assuming:**
>
> I reorganized your code:
> 
> ```auto
> <div class="v-row v-row--no-gutters" data-test-id="form-create-product">
> <div class="row-1">
> <div class="dsgsgd thumbnail">
> <img src="">
> </div>
> <div class="gdsfdgsfdgs product-sfgfdg">
> <a href="">Product 1</a>
> </div>
> </div>
> <div class="row-2">
> <div class="dsgsgd thumbnail">
> <img src="">
> </div>
> <div class="gdsfdgsfdgs product-sfgfdg">
> <a href="">Product 1</a>
> </div>
> </div>
> </div>
> 
> ```

---

<div class="post-metadata">

**Author:** ![\_zinji](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/_zinji/32/22831_2.png) [@\_zinji](https://forum.katalon.com/u/_zinji)\
**Post date:** [March 28, 2023, 3:20am UTC](https://forum.katalon.com/t/how-to-find-element-by-queryselector/85482/8 "2023-03-28T03:20:46Z")

</div>

Thank you, Mike. I still using your solution for my project. Sometime, I use xpath full for get the position