REACT data-testid target with Katalon?

Archive
1

Hello,

I’ve seen a few post on the forums detailing some methods of working with REACT applications and how to use their long string with X-Path.

Mostly this one with some great insights from Russ Thomas

Unfortunately, these methods have not offered much luck on our platform for automating.

My question is can we use Katalon and create either a custom keyword or variable while targeting the data-testid field for react applications.

In example with the code below, I need to target a specific button to deactivate and then reactivate a user. When using katalon spy and web recorder the system identifies “ui green tiny circular compact icon button” which wont work when running the automation due to this element representing each user on the page.

Our developers have been adding data-testid to elements for us to target but I have not found a method using Katalon. Has anyone here found a way to use this element?

I will continue to research and if I find a solution I will share on this post.

2

Use the following CSS selector to target that example button element:

button[data-testid="group-list-card-QAST447-disable-button"]

In your test object, place that exact code under the CSS panel.

2 Likes
3

That was quick Russ, thank you! I will implement and reply with results.

4

Unfortunately, Russ’s suggestion did not work on my solution. When running the log, it displays the system cannot click on the object I created. Not sure if I created this object wrong but below is a screenshot of my configuration.

StepFailedException: Unable to click on object ‘Object Repository/Deactivate Button’ (Root cause: org.openqa.selenium.NoSuchWindowException: Browsing context has been discarded

5

I need a bit more (perhaps a lot more) context than you provided here. (The CSS looks fine, btw.)

That error “Browsing context has been discarded” is associated with things like:

  • A closed window

  • A closed browser tab (window)

  • Unloaded or partially unloaded document

  • Discarded frame/iframe elements

  • Detached document fragments (maybe?)

  • etc

The question we’re left with is: what happened prior to this error being issued?

Change the log viewer to flat output and paste the stuff that came before (dozen or so lines should be enough). Also, post the relevant test code.

6

Hello again,

I used another method to fix this issue, due to the nature of how we build our solution there were neighboring elements attached in the xpath of the object which was causing the automation to be confused.

For anyone having a similar issue with react or another structure check your objects and ensure there are not neighboring elements on the page that mau confuse your automation by having multiple selections.

Thanks again for your help Russ.

1 Like