Radio Button in Selenium with Java-CodePudding

I want to check if radio button is selected or not but I'm unable to find the xpath for radio button selection check in selenium with Java.

I'm trying this code to see if "one way" checkbox is selected then the browser should select the two way check box. But everytime when I run the code it only see that "one way" checkbox is selected and else condition is called. Here is what I'm doing to check the condition.

WebElement radioElement = driver.findElement(By.xpath("//div[@class='css-1dbjc4n']"));
        boolean selectState = radioElement.isSelected();
        System.out.println(selectState);
        if(selectState==true) {
            driver.findElement(By.xpath("(//div[@class='css-76zvg2 r-homxoj r-ubezar r-1ozqkpa'])[2]]")).click();
            System.out.println("If condition");
        } else {
            radioElement.click();
            System.out.println("Else condition");
        }

Attaching HTML code of Radio button.

<div  style="padding-right: 0px; padding-left: 0px;">
<div ></div>
<div >
    <div >
        <div  data-focusable="true" tabindex="0" data-testid="one-way-radio-button" style="margin-right: 20px;">
            <div >
                <svg data-testid="svg-img" viewBox="0 0 18 18" width="18" height="18" fill="#000" color="#000" preserveAspectRatio="none">
                    <g fill="none" fill-rule="evenodd">
                        <circle cx="9" cy="9" r="8" fill="#FFF" stroke="#F7941D" stroke-width="2"></circle>
                        <circle cx="9" cy="9" r="4" fill="#EDB16A"></circle>
                    </g>
                </svg>
            </div>
            <div >
                <div  dir="auto" style="font-family: inherit;">one way</div>
            </div>
        </div>
        <div  data-focusable="true" tabindex="0" data-testid="round-trip-radio-button" style="margin-right: 20px;">
            <div >
                <svg data-testid="svg-img" viewBox="0 0 18 18" width="18" height="18" fill="#000" color="#000" preserveAspectRatio="none">
                    <circle cx="9" cy="9" r="8" fill="#FFF" fill-rule="evenodd" stroke="#DDDDDD" stroke-width="2"></circle>
                </svg>
            </div>
            <div >
                <div  dir="auto" style="font-family: inherit;">round trip</div>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

If there's code I'm likely to use repeatedly (like checking whether a radio button is selected or not), I like to put it in a method so it's easily reusable. This method takes the parent DIV of the radio button and counts the number of SVG circles inside. If there's more than one, the radio button is selected. This way you can use this method for not only the One Way radio button but any radio button on the page.

public static boolean isSelected(By locator) {
    return new WebDriverWait(driver, Duration.ofSeconds(10)).until(ExpectedConditions.visibilityOfElementLocated(locator)).findElements(By.cssSelector("circle")).size() > 1;
}

Simple examples

By oneWayLocator = By.cssSelector("div[data-testid='one-way-radio-button']");
By roundTripLocator = By.cssSelector("div[data-testid='round-trip-radio-button']");
boolean oneWaySelected = isSelected(oneWayLocator);
boolean roundTripSelected = isSelected(roundTripLocator);

It sounds like you want to check to see if the One Way radio button is selected and if so, select Round Trip instead. To do that,

By oneWayLocator = By.cssSelector("div[data-testid='one-way-radio-button']");
By roundTripLocator = By.cssSelector("div[data-testid='round-trip-radio-button']");

if (isSelected(oneWayLocator)) {
    driver.findElement(roundTripLocator).click();
}

CodePudding user response：

Most important thing a circle tag represents the one circle, not the svg tag. So svg tag which looks like selected radiobutton contains two circle tags.

You can measure number of circle tags in svg tag and based on that consider the svg as un/selected.

Code:

    List<WebElement> svgTags = driver.findElements(By.tagName("svg"));
    for (WebElement svgTag: svgTags) {
        int circlesCount = svgTag.findElements(By.tagName("circle")).size();
        if (circlesCount == 1) {
            System.out.println("looks like unselected radiobutton");
        }
        else if (circlesCount > 1) {
            System.out.println("looks like selected radiobutton");
        }
        else {
            System.out.println("no circle in svg");
        }
    }

Output:

looks like selected radiobutton
looks like unselected radiobutton