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;
    }
}

Please read why a [screenshot of HTML or code or error is a bad idea](https://meta.stackoverflow.com/questions/303812/discourage-screenshots-of-code-and-or-errors). Consider updating the Question with formatted text based relevant HTML, code trials and error stack trace. — undetected Selenium, Jun 27 '20 at 21:24
Hello @DebanjanB - I have added raw HTML code in the description. I still want to keep the screenshot of the HTML code since has the pseudo elements ::before and ::after. Copying the element from browser devtools does not copy them as you can see are missing in the raw HTML code. — skota, Jun 28 '20 at 15:21
Are you sure you need the pseudo element? Can't you just select the input element and check for the 'checked' attribute? — jameslafferty, Jun 28 '20 at 15:22
Hi @jameslafferty - The problem with 'checked' attribute is that its only available for No radio option. When I click on Yes radio option, 'checked' attribute isn't populated in ```input``` tag. So it is not reliable. — skota, Jun 28 '20 at 15:26
Doh! I'd forgotten... on change it's the checked property rather than the checked attribute that you'll want. But... Selenium also provides an isSelected method that you can use to check whether the input is selected. — jameslafferty, Jun 28 '20 at 15:40

undetected Selenium · Accepted Answer · 2020-06-28T16:09:06.450

2

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

edited Jun 28 '20 at 16:09

answered Jun 28 '20 at 16:02

undetected Selenium

183,867
41
278
352

1

This is a super interesting and informative answer (thus the upvote). I do wonder, though, if the OP shouldn't instead use a different approach to determine whether the radio button is or is not checked. Doing it this way seems pretty suspicious to me (although there certainly might be cases where something along these lines is the only option). Am I missing something or does that seem correct to you as well? – jameslafferty Jun 28 '20 at 16:16
1

@jameslafferty Great point, actually there is a method `isSelected()` as you mentioned in your comments which isn't that effective/reliable. However I'm waiting for OP to comeback with the observations. Possibly his requirements will be nailed through this logic. – undetected Selenium Jun 28 '20 at 16:21
Hi @DebanjanB - Thanks. I did think about the solution you proposed above. The problem was that validating whether Yes option was selected was getting difficult. The ```checked``` attribute doesn't get populated for it and therefore isn't available to be used in the xpath. Only change that occurs on Yes selection is that ```::after``` pseudo element gets added in the ```label for``` tag. I do understand my original question was regarding No option. – skota Jun 28 '20 at 17:37
@skota _pseudo element_ are style attributes only and have minimum impact on element identification. If you are having issues with the **Yes** option, feel free to raise a new question with your new requirement. Would be glad to answer it as well. – undetected Selenium Jun 28 '20 at 17:52
1

@DebanjanB - Yes. I tried your solution with ```preceding``` and it worked for No option. I may post a separate question for Yes option. – skota Jun 28 '20 at 19:17
@jameslafferty - I did try ```isSelected``` and it did not work. It always returned 'false'. – skota Jun 28 '20 at 19:19
@skota here's a fiddle showing how to determine whether a radio button is or is not checked and showing the difference between the attribute and property using JavaScript: https://jsfiddle.net/ou5sjh8r/ – jameslafferty Jun 28 '20 at 22:16
Hi @DebanjanB - I created a new question asking about Yes/No radio selection here. Pls take a look whenever you can - https://stackoverflow.com/a/62669810/11419718 – skota Jul 01 '20 at 15:38

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

1 Answers1

Reference