For whatever reason(s), sometimes it can prove tricky to perform actions on your Test Objects (or web elements). You can pull your hair out wondering what the hell is going on.
When you are stuck with a problem like this, ask yourself one question: how do web browsers do this?
Answer: They use CSS selectors and JavaScript.
Accessing CSS Selectors in JavaScript
Let’s say you have a <button>
element with an id “my-button” and you want to click that button in your Test Case. In your HTML it might look like this:
<div ...>
<div ...>
<span ...>
<button id="my-button">Click me!</button>
</span>
</div>
</div>
Because the button has an id, you can use the CSS id-selector #
in your TestObject definition.
#my-button
Test Object CSS definition in Katalon Studio
However, if you’re having trouble clicking on the button using a TestObject, you can skip the TestObject approach and target the button element directy in JavaScript.
Here’s the code to use the CSS id-selector in JavaScript to invoke the click action:
document.querySelector("#my-button").click()
JavaScript to click an element with a CSS id selector
You can try this yourself in the DevTools[1] console.
To find out if the CSS works, you can place this line in the DevTools console:
document.querySelector("#my-button").style.backgroundColor = "orange"
Testing CSS selector in the browser console
The next question is, How do I do this in my Test Case in Katalon?
Katalon Test Cases are written in Groovy, not in JavaScript. Even so, there is a way to pass JavaScript code to the browser from within Groovy and have the browser execute your JavaScript for you. To do that, we need the WebUI.executeJavaScript()
API. [2]
String js = 'document.querySelector("#my-button").click();'
WebUI.executeJavaScript(js, null)
Groovy code to execute JavaScript in the browser
Breaking this down we can see:
-
A Groovy
String
calledjs
is created and set to contain the JavaScript we wrote earlier. -
Then we call
WebUI.executeJavaScript()
and pass in thejs
variable (and null because there are no arguments needed by this JavaScript code).
You can place that code directly in your Test Case script just like any other test step.
More Complex CSS Selectors
The examples I’ve given so far have relied upon the HTML button element having an id. But what if the element does not have an id?
In this example, the button element is buried inside a <td>
element inside a <table>
element inside a series of <div>
elements. The button does not have an id.
<div ...>
<div ...>
<div class="some-class other-class another-class">
<table ...>
<tr>
<td>
<button>Click me!</button>
</td>
<td>
<button>Don't click me!</button>
</td>
</tr>
<tr>
<td> ... </td>
</tr>
</table>
</div>
</div>
</div>
In the example above, the “Click me!” button is inside one of the td
elements. You will notice there is also a second button element - we want to target the button in the first td
, not the second one.
In CSS selectors, a first child element can be signified by the child-combinator, >
. We want “a tr whose first td has a button”:
tr>td button
Test Object CSS definition in Katalon Studio
To use that selector in JavaScript in Groovy in a Test Case…
String js = 'document.querySelector("tr>td button").click();'
WebUI.executeJavaScript(js, null)
Groovy code to execute JavaScript in the browser
Selectors in Frames
When a web page uses frames, you need to take into account the web page has more than one document. There is one document for the page as a whole, plus as many documents as there are frames/iframes.
If your page has two iframes, your page has three documents.
You will recall we used the JavaScript method document.querySelector()
above to find our button. Up till now, we haven’t mentioned what document
is actually referring to. Let’s put that right.
When you say document
, you are referring to the document which represents the web page as a whole. You are actually saying window.document
, the document that covers the entire browser window. Therefore, in the case where #my-button
lives inside an iframe, our css selector simply will not work. It will be looking at the wrong document. We need a way to direct the JavaScript to target the correct document (the one inside the iframe).
First, let’s look at some example HTML:
<iframe id="my-iframe">
<div ...>
<div ...>
<span ...>
<button id="my-button">Click me!</button>
</span>
</div>
</div>
</iframe>
There are a few ways to target elements inside an iframe - it really doesn’t matter which one you choose (as long as it works, of course).
Here is one way to target #my-button
inside an iframe #my-iframe
:
document.querySelector("#my-iframe").contentDocument.querySelector("#my-button")
Let’s break that down into its component parts:
-
document.querySelector("#my-iframe")
// Get the iframe -
.contentDocument
// Get the document in the iframe -
.querySelector("#my-button")
// Get the button
And now the Groovy(JavaScript(CSS)) in a Test Case:
String js = 'document.querySelector("#my-iframe").contentDocument.querySelector("#my-button").click();'
WebUI.executeJavaScript(js, null)
Wrap up…
That’s pretty much everything you need to know about using CSS in JavaScript in Groovy in Katalon Studio.
I tried to find a link or two that explains CSS with a Testing slant - I failed. Those that I found were either bad, crap, bad and crap, or flat out wrong in some cases. If you know of a good link, post it in the thread.
Thanks for reading.
[1]
[2]
https://docs.katalon.com/katalon-studio/docs/webui-execute-javascript.html