How to find element by querySelector

Product Forums Katalon Studio
,
1

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
image1920×815 168 KB

But when I tried in browser, it still got
image

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

2

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:

String js = "return document.querySelector('.my_class a').href;"
String href = WebUI.executeJavaScript(js, null)
1 Like
3

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

4

Yes.

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

1 Like
5

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

1 Like
6

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:

<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

7

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:

<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>
2 Likes
8

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