[How To] Groovy(JavaScript(CSS)) - Using CSS Selectors In JavaScript In Groovy In Test Cases

[Russ_Thomas]

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:

1. A Groovy String called js is created and set to contain the JavaScript we wrote earlier.

2. Then we call WebUI.executeJavaScript() and pass in the js 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:

1. document.querySelector("#my-iframe") // Get the iframe

2. .contentDocument // Get the document in the iframe

3. .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.

Update 2022-11-21 @Dave_Evers has put together a great set of links that may help you building CSS selectors:

Tutorials and links for working with CSS locators

Hi folks, I found the following invaluable resource on how to create and/or build CSS locators and wanted share it with the forum. I hope others find it as valuable as I have.

Thanks for reading!

---

[1]

[How To] Use The Browser Developer Tools (F12 DevTools)

It is often the case that solving problems in browsers involves using the Browser Developer Tools, or “DevTools” for short. How to start DevTools With the browser open in front of you, press the F12 key. You’ll see a set of panels appear, either at the bottom or at the side of the main browser window: NOTE: I’m using Firefox, but IE/Edge and Chrome DevTools look much the same. [image] Note: The image shows the Firefox devTools attached to the browser window. You may prefer to “float” th…

[2]
https://docs.katalon.com/katalon-studio/docs/webui-execute-javascript.html