How to handle the pseudo element

thirunamca85 · January 23, 2020, 4:07pm

I am new to Katalon, just trying to click the pseudo element in the web page having the below webelement which was actually built on CSS styling I guess,

::before ==$0

WebDriver driver = new ChromeDriver()

JavascriptExecutor js = (JavascriptExecutor) driver
js.executeScript(“document.querySelector(“body > div > form > ul > li:nth-child(5) > label”).click()”)

I used the below imports

import org.openqa.selenium.JavascriptExecutor
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import org.openqa.selenium.WebDriver
import org.openqa.selenium.chrome.ChromeDriver
import com.kms.katalon.core.webui.common.WebUiCommonHelper as WebUiCommonHelper
import org.openqa.selenium.WebElement as WebElement

but I am getting the error “org.openqa.selenium.JavascriptException: javascript error: Cannot read property ‘click’ of null”

Russ_Thomas · January 23, 2020, 4:12pm

Yes, that’s the problem - before/after pseudo elements are effectively ghosts. JavaScript cannot click on a null object so that’s what it’s telling you.

But there’s always a way around this kind of thing in automation. Real humans can’t click on them either which brings up the question: What human action are you trying to automate?

Russ_Thomas · January 23, 2020, 4:18pm

Actually, looking at your JavaScript code, I’m not convinced the pseudo element is the issue.

Are you certain the css selector is correct? Does li:nth-child(5) resolve to the expected element?

thirunamca85 · January 23, 2020, 7:34pm

I do not know, the same code is working in “Selenium tool”. Ultimate aim is to click against the checkbox against the text “I Agree to the HIPAA privacy notice” for the below URL “https://examain.viztek.net/KMHA/login”. I do not know what is the best solution, friends suggested me through javascript executor you can achieve it. I am expecting the understandable solution, because in the same application I have so many this pseudo elements. Whatever the best approach you suggest me.
Thanks

Russ_Thomas · January 23, 2020, 7:44pm

Your issue is not the pseudo elements.

$0 is the label element.

This CSS selector works:

document.querySelector("form.login-form > ul li:nth-child(5) label").click()

This is probably a better one - the above CSS selector is a little fragile because the number of li elements may change.

form.login-form input#chkHipaaPrivacy + label

thirunamca85 · January 24, 2020, 3:09pm

Hi,
I have pasted this form.login-form input#chkHipaaPrivacy + label in CSS selector and tried executing the script, still it’s clicking the text and not the check box.

ThanhTo · January 24, 2020, 3:17pm

Have you tried this one yet ?

Russ_Thomas · January 24, 2020, 3:20pm

It is supposed to do that. The actual checkbox is hidden and can’t be clicked:

Notice the label element has a for attribute? It is assigned to work with the checkbox. When you click the label, the click is passed to the checkbox.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

If you use JavaScript it will work:

String js = 'document.querySelector("form.login-form input#chkHipaaPrivacy + label").click();'
WebUI.executeJavaScript(js, null)

You can also shorten the CSS selector to this:

label[for=chkHipaaPrivacy]

And in JavaScript…

document.querySelector("label[for=chkHipaaPrivacy]").click();

thirunamca85 · January 24, 2020, 4:24pm

Thanks a lot…
I was struggling with this for so many days, will definitely disturb you in case of any doubts in future