@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)