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”
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?
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?
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
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
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.
Have you tried this one yet ?
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.
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();
Thanks a lot…
I was struggling with this for so many days, will definitely disturb you in case of any doubts in future 
2 Likes
