How do you select a label checkbox that contains an href

I am trying to check a label that contains href links. Whether I call WebUI.check() or WebUI.click(), it always clicks on the href links.

How do I make it so that it only checks the checkbox?

pic1.png

image.png

Is there a reason you are not using WebUI.check?

The hrefs you mention are not involved in the checkbox as far as I can see.

And that ::before pseudo-element looks wrong.

Russ Thomas said:

Is there a reason you are not using WebUI.check?

The hrefs you mention are not involved in the checkbox as far as I can see.

And that ::before pseudo-element looks wrong.

Yep, because when I call it, it still clicks on the href instead of the checkbox. The input is hidden and the label is what responds to the clicks. I need some way to enable the input and click on the checkbox, but i’m not sure how to do that in Katalon. I tried calling WebUI.executeJavaScript() but it didn’t work out.

Yep, because when I call it, it still clicks on the href instead of the checkbox.

That’s because the underlying code is targeting somewhere in the middle of the label – which happens to contain an A tag.

I need some way to enable the input and click on the checkbox, but i’m not sure how to do that in Katalon

Let’s be clear, the input is the checkbox – unless you are talking about something else somewhere else you’re not showing me?

The checkbox is not disabled, it’s CSS display property is set to none, making it invisible. There are ways to change that setting but seriously, that’s not good testing – if the user can’t do it you shouldn’t do it.

However, sometimes in testing you have to cheat – webdrivers are not perfect (yet). So what did you try in JavaScript? Did you try a click? Did you try modifying the checked property? Did you also trigger a change event? A change event might be key here…

I have exactly the same issue. The HTML for the construction that I’m looking at is shown below. When a user clicks on the checkbox the action is handled by the label rather than the checkbox itself because the checkbox is hidden by the label. I asked the developer why he did it this way and he said that is normal if you wanted to format a construction like this in the form with CSS formatting:

So, to summarise - what the user does and sees cannot be replicated by Katalon without doing something different. Any ideas what the different thing would be would be useful.

<div class="form-group relative " id="term_cond">
                    <div class="custom-control-lg custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="agree_terms2" name="agree_terms2" required="" data-error="You must agree the terms &amp; conditions">
                        <label for="agree_terms2" class="roboto-medium termscond custom-control-label marketing" style="line-height: 30px;">I agree to the <a class="openBtn menu-tsandcs underline roboto-medium" data-pagename="terms" data-toggle="modal" href="#" data-target="#termsModal">terms and conditions*</a> </label>
                    </div>
                    <div class="help-block with-errors"></div>
                </div>

Edit: Wrap your HTML by the code tag (there’s an tool item in the editor to do that !), otherwise it will be compiled.

@tclarkeccg What’s your script currently ? Are you clicking on a label, or the checkbox ?

WebDriver which is what Katalon Studio uses strives to simulate user actions as closely as possible. It means that when WebDriver issues a click, it actually triggers the appropriate events such as mouseover, mousedown, mouseup, click. The target for these events is not always the desired element, because depending on the structure of the page different elements may receive them. In your case they would get sent to the label instead. WebDriver isn’t always perfect though as @Russ_Thomas said in his last answer in this thread, so there are workarounds.

You can try out the Javascript click, but keep in mind that only the event click is initiated, and it is sent directly right on whatever element you pass in, so it may not also what the user experiences, you’d need to use it sparingly, unless you really know what you’re doing. Furthermore the event caused by javascript click is not trusted, as documented here:

Your page may rely on the trust property of an event to handle differently, so be wary when using it.

That said, In peculiar situations where you can’t simulate the end-user behavior with WebDriver, then I think it’s fine to do Javascript though.

	public static void jsClick(final TestObject testObject) {
		WebElement element = WebUiCommonHelper.findWebElement(testObject, 30);
		WebDriver driver = DriverFactory.getWebDriver();
		JavascriptExecutor jsExecutor = (JavascriptExecutor)driver;
		jsExecutor.executeScript("arguments[0].click();", element);
	}
1 Like

Wait. There seems to be some confusion here - maybe partially misunderstood what the developer was telling you. Here’s the lowdown on labels and input elements:

An HTML <input> element can have an HTML <label> associated with it. Either the label OR the input element can be used to operate some functions of the input. This is normal, well publicized and documented behavior.

An HTML <input> element can be hidden AND have an HTML <label> associated with it AND still work. Again, this is normal.

If your “label” is not an HTML <label> element then none of the above applies.

Okay, I just saw your HTML arrive: you DO have an HTML <label> element.

My advice: target the label for clicks.