WebUI Keywords that select web elements by CSS class names

@ThanhTo

Angular, React … these JavaScript-based web frameworks generate pretty much complexed HTML codes, they use element-selection method by @class attribute heavily. Selecting elements by @id is rarely applicable to those sophisticated web pages .

Many people try to select web elements with @class attributes; for example by a XPath //a[@class='foo bar baz']. But they often encounter difficulties because the @class value may contain multiple class names and the names tends to move like <a class="baz bar foo"> or <a class="pee baz moo bar"> due to the dynamic nature of JavaScript-based frameworks.

For example, this

Another one

Therefore, I think, Katalon Studio should add a series of built-in keywords designed capable to select web elements by @class value parsed as a set of CSS class names.

Russ suggested WebUI.verifyElementHasClass(...) here

I would suggest the following addition:

WebUI.clickElementWithClass('create-account-btn')

WebUI.clickElementWithClasses(['btn-default', 'create-account-btn'])

then @anuradha at Step failing in terminal - #14 by kazurayam would be able to solve his/her problem elegantly.

@kazurayam

What you don’t want to do, is wire up the sequence to the test method/api.

<!-- HTML -->
<div class="foo bar kaz russ"> my div </div>

// Test case
WebUI.verifyElementHasClass("foo")  //true
WebUI.verifyElementHasClass("bar")  //true
WebUI.verifyElementHasClass("kaz")  //true
WebUI.verifyElementHasClass("russ")  //true
WebUI.verifyElementHasClass("ThanhTo") // false/fail

If you are concerned about sequence or order of the classes, then getAttribute should work to retrieve the entire classnames space-delimitted list (if not, it should be treated as a bug).

I am not sure about clickElementWithClass. Should the sequence be loose or is it expected to match the defined sequence in the DOM?

I also looks like you’re “mixing concerns”. It seems to be testing both the classes applied to the element AND whether it can be clicked. I would need to be convinced that those two “tests” should be combined like that.

It is a shame we can’t chain WebUI calls because then the code at least would make it clear there are two steps:

WebUI.verifyElementHasClass(TO, "foo").elementHasClass("bar").click()

@ThanhTo, of course, previously we’ve been skipping over the TestObject arg, just for brevity. But above, it would be “passed through” to the sub-method elementHasClass and click when the previous call had succeeded.

But I don’t know if that would be deemed helpful/useful. I think it would improve testing with WebUI to capture almost complete human interactions (much like “perform” in the Actions api set but more akin to how the dom and jQuery/React/et al apis do it).

One more thing before I close… I think it doesn’t need explanation:

WebUI.waitForElementHasClass(TO, "ThanhTo", TIMEOUT_SECONDS)