Get class of element during runtime

Product Forums Katalon Studio
,
1

In my application, I have an overview panel with 6 gauge type sections in it. Each of those sections has a title, gauge, a ‘good’ button, a ‘better’ button, and a ‘best’ button. When you click the title it takes you further down the page to the corresponding panel. In that panel, it will list the Top 5 records (no criteria). However, if I select the ‘good’, ‘better’, or ‘best’ button, it takes you to the same panel but lists the records that meet the criteria selected. At the top of that panel there are 5 buttons: Top 5, Good, Better, Best, All. When clicking the buttons in the overview panel mentioned above, whichever you selected will have the corresponding button selected below. The buttons all have the class “btn-disabled” until one of them is selected via the overview panel, or in the lower panel. When the button is selected, it dynamically adds the class “btn-primary”

My issue is that when using ‘Spy Web’ to capture these buttons as test objects, it captures them all with the class “btn-disabled”.

I am trying to validate that when I click the ‘good’ button in the overview panel, that the corresponding ‘good’ button below has removed the class “btn-disabled” and added the class “btn-primary”.

What I am seeing when defining a variable classList = findTestObject(“good-button”).findProperty(“class”), is that even though I have clicked the ‘good’ button (and verified in Chrome inspector that the classes have updated), that classList = the list from the test object. That makes sense due to findTestObject.

What I am looking for is a way to get the classList from the element on the page during runtime rather than the test object in the repository, or even a way to update the test object properties during runtime.

Anyone have a good way of doing this?

2

You need the DOM classList property which, as you have discovered is not the same thing as the content of the original class attribute. I admit, I’m surprised those methods are not cooperating, but we’ll let the devs take a look and see if they can be improved: @ThanhTo @duyluong.

Meanwhile, if you’re comfortable going the JavaScript route, you can do this:
(I’m assuming your element has the id “thing”)

String js = 'return document.querySelector("#thing").classList.toString();'
String classes = WebUI.executeJavaScript(js, null);
println classes

Here is a screenshot of the javascript running against this forum page:

image
image827×560 34.9 KB

Let me know if that gets you closer to what you need.

1 Like
3

How about deleting the class attribute (and any other except id, name and xpath) from your list of elements within the object repository and modify the attribute during run time?

4

Thanks @Russ_Thomas for the quick response. I was unaware that I could use JavaScript (my favorite or most comfortable language). This method worked perfectly!!!

1 Like
5

Well, stick around. I use JS (and CSS selectors) all the time :sunglasses: