How to identify if a radio button option styled with pseudo element ::after is selected or not using Selenium and Java

Question

I am having hard time with identifying if radio option No is selected or not using Selenium Java. Below is the screenshot of the radio options on the web page.

Here is the raw HTML code. Since it is missing pseudo elements I attached screenshot of it as well.

<div id="ButtonOptions" class="sample prop_group">
    <label class="vdl-radio">
       <input id="radio_K371FCY2UbrpgcP3RE6VC" type="radio" class="vdl-radio__input" tabindex="0" aria-disabled="false" value="true">
    <label for="radio_K371FCY2UbrpgcP3RE6VC">Yes</label>
    </label>
    <label class="vdl-radio">
       <input id="radio_4XLAugQMgEwzm3e2quk5y" type="radio" class="vdl-radio__input" tabindex="0" aria-disabled="false" value="false" checked="">
    <label for="radio_4XLAugQMgEwzm3e2quk5y">No</label>
    </label>
</div>

Below is the screenshot of HTML code that has pseudo element::after (highlighted below) gets dynamically loaded when No option is selected.

I created below Java method that executes JavaScript that I am expecting to return whole label for tag. It is currently printing out null . However, when I execute the script used below in Chrome browser console, it identifies the entire label tag including ::before and ::after pseudo elements.

        public String whichRadioOptionIsSelected(){
        String tag = "";      
        List<WebElement> radioOptions = findElementsByXpath(".//div[@id='ButtonOptions']/label");

        //Iterate thru both radio options and execute the JavaScript.

        for(int i = 1; i <= radioOptions.size(); i++) {
                String script = "return document.querySelector('div#ButtonOptions > label:nth-of-type("+i+") label', null);";
                JavascriptExecutor js = (JavascriptExecutor) driver;
                tag = (String) js.executeScript(script);
                System.out.println(tag);
            }        
        return tag;
    }
}

Answer 1

To validate if the radiobutton with text as No is selected or not you can use the following xpath based Locator Strategy :

• Using preceding :

   try { driver.findElement(By.xpath("//div[@id='ButtonOptions']//label[@class='vdl-radio']//label[text()='No']//preceding::input[@checked]")); System.out.println("No option is selected"); } catch(NoSuchElementException e) { System.out.println("No option isn't selected"); }

• Using preceding-sibling :

   try { driver.findElement(By.xpath("//div[@id='ButtonOptions']//label[@class='vdl-radio']//label[text()='No']//preceding-sibling::input[@checked]")); System.out.println("No option is selected"); } catch(NoSuchElementException e) { System.out.println("No option isn't selected"); }

---

Reference

You can find a detailed discussion on pseudo-element in:

• How locate the pseudo-element::before using Selenium Python