如何在 http://jqueryui.com 中使用 Relative Xpath for RadioButton Scenario 定位元素

Question

我正在尝试通过网站在 Selenium 中自动化 RadioButton 场景 - http://jqueryui.com/checkboxradio/

我尝试通过 CssSelector 使用 xpath，自定义 xpath，但对我来说没有任何效果。我最终不得不使用绝对 xpath（虽然不是最佳实践）来使代码正常工作。

public class CheckBoxAndRadioButtons {

    public static void main(String[] args) throws InterruptedException {
        System.setProperty("webdriver.chrome.driver" , "C:/Users/User/Desktop/Selenium Drivers/chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("http://jqueryui.com/checkboxradio/");
        driver.manage().window().maximize();

        driver.switchTo().frame(driver.findElement(By.xpath("//iframe[@class='demo-frame']")));
        try {
            Thread.sleep(2000);
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        WebElement radiobox = driver.findElement(By.xpath("/html/body/div/fieldset[1]/label[1]/span[1]"));
        boolean isDisplayedstatus = radiobox.isDisplayed();
        System.out.println(isDisplayedstatus);
        boolean isEnabledstatus = radiobox.isEnabled();
        System.out.println(isEnabledstatus);
        boolean isSelectedstatus = radiobox.isSelected();
        System.out.println(isSelectedstatus);

        Thread.sleep(2000);
        List<WebElement> ele = driver.findElements(By.xpath("//input[@type ='radio']"));
        for(WebElement we:ele) {
            if(!we.isSelected()) {
                we.click();
            }
        }

    }
}

Answer 1

如果您尝试 select New York 单选按钮，您可以使用以下 xpath。

//label[contains(@class,'ui-checkboxradio-radio-label') and text()='New York']

Answer 2

如果我正确地解释了您不想使用完整 xPath 的问题，我发现以下内容将识别您抓取的相同无线电元素：

"//fieldset[1]/label[1]/span[1]"

然后要找到后续的复选框（'New York'之后的两个），您可以使用

"//fieldset[1]/label[2]/span[1]"

和

"//fieldset[1]/label[3]/span[1]"

Answer 3

单选按钮是一个 input 类型的 radio 元素，简单的方法就是与它交互。为此，您可以使用 id radio-1.

如果你想通过标签文本定位单选按钮，例如"New York"，你可以使用下面的xpath:

//label[normalize-space(.)='New York']/following-sibling::input[@type='radio'][1]

代码为：

WebElement radioButton = driver.findElement(By.xpath("//label[normalize-space(.)='New York']/following-sibling::input[@type='radio'][1]");
boolean isDisplayed = radioButton.isDisplayed();
System.out.println(isDisplayed);
boolean isEnabled = radioButton.isEnabled();
System.out.println(isEnabled);
boolean isSelected = radioButton.isSelected();
System.out.println(isSelected);

您也可以使用 label 元素到 select 使用 //label[normalize-space(.)='New York']，但是 isSelected() 将不起作用，您必须检查 ui-state-active css class 可用性：

// Using label
WebElement radioButton = driver.findElement(By.xpath("//label[normalize-space(.)='New York']"));

// Select radio by clicking on label
radioButton.click();

// Check if radio selected by css class of the label
boolean selected = radioButton.getAttribute("class").contains("ui-state-active");

Answer 4

试试下面这个 code.I 认为 webdriver click 不是 working.So 我已经使用 javascript executor 来点击元素。

WebElement radiobox = driver.findElement(By.xpath("//input[@id='radio-1']"));
        boolean isDisplayedstatus = radiobox.isDisplayed();
        System.out.println(isDisplayedstatus);
        boolean isEnabledstatus = radiobox.isEnabled();
        System.out.println(isEnabledstatus);
        boolean isSelectedstatus = radiobox.isSelected();
        System.out.println(isSelectedstatus);

        List<WebElement> ele = driver.findElements(By.xpath("//input[starts-with(@id, 'radio')]"));
        for(WebElement we:ele) {
            if(!we.isSelected()) {
                JavascriptExecutor executor = (JavascriptExecutor) driver;
                executor.executeScript("arguments[0].click();",we);
                System.out.println("Clicked : " + we.getAttribute("id"));
               // we.click();
            }
        }

输出：

true
true
false
Clicked : radio-1
Clicked : radio-2
Clicked : radio-3

Answer 5

要单击文本 New York 旁边的 radio button，您需要引入 WebDriverWait 为 elementToBeClickable()，您可以使用以下解决方案：

代码块：

package demo;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

public class Q55111127_Chaitanya_Maligi {

    public static void main(String[] args) {

        System.setProperty("webdriver.chrome.driver", "C:\Utility\BrowserDrivers\chromedriver.exe");
        ChromeOptions options = new ChromeOptions();
        options.addArguments("start-maximized");
        options.addArguments("--disable-extensions"); 
        WebDriver driver = new ChromeDriver(options);
        driver.get("http://jqueryui.com/checkboxradio/");
        new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.xpath("//iframe[@class='demo-frame']")));
        new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[@class='widget']//fieldset//label[@for='radio-1']"))).click();
        System.out.println("Clicking of CheckBox Completed");
    }
}

控制台输出：
```
Clicking of CheckBox Completed
```
浏览器快照：

如何在 http://jqueryui.com 中使用 Relative Xpath for RadioButton Scenario 定位元素

How to locate the element using Relative Xpath for RadioButton Scenario within http://jqueryui.com

java

selenium

xpath

webdriver

webdriverwait