首页 > 解决方案 > 使用 Selenium WebDriver 填充伪 ::before 和 ::after 元素的单选选项选择

问题描述

我需要一些帮助来确定选择了哪个单选选项。我正在处理的网页有两个单选选项是和否。下面是选择是选项时的 HTML 代码。请注意,::after它填充在label for标签中。

<div class="rule-scope-radio-list">
    <label class="vdl-radio">
        <input id="radio_HlzYBaCpA3xEjRkH0fgU-" type="radio" class="vdl-radio__input" tabindex="0" aria-disabled="false" value="true">
        <label for="radio_HlzYBaCpA3xEjRkH0fgU-">
          ::before
          "Yes"
          ::after
        </label>  
    </label>
    <label class="vdl-radio">
        <input id="radio_KHhle2RxBSrl5Vb_n7Eit" type="radio" class="vdl-radio__input" tabindex="0" aria-disabled="false" value="false">
        <label for="radio_KHhle2RxBSrl5Vb_n7Eit">
          ::before
          "No"
        </label>
    </label>
</div>

::after当在网页上选择“否”选项时,仅从“是”选项中删除HTML 代码更改的内容,并为“否”选项填充。

我尝试了 Selenium 的isSelected()方法,但当我期待 Yes 选项为“true”时,它总是返回“false”。

作为第二种选择,我在下面编写的 Java 代码也不起作用。它正在回归null。我的想法是获取整个input for标签,然后使用 string.contains() 方法检查它是否包含::after在其中。因为当我在浏览器控制台上执行以下 JavaScript 时,它返回了包含和元素的整个input for标签。::before::after


public String yesOrNoSelected(){
        String tag = "";      
        List<WebElement> radioOptions = findElementsByXpath(".//div[@class='rule-scope-radio-list']/label");

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

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

标签: seleniumselenium-webdrivercss-selectorspseudo-element

解决方案


我从不使用 java 尝试 Selenium,但在这里我为你做了一些代码。我不确定它是否会起作用。但我建议你使用 cssSelector 来检查 RadioButton 是否被选中。

public String yesOrNoSelected(){
    String tag = "";      
    List<WebElement> radioOptions = findElementsByXpath("//div[@class='rule-scope-radio-list']");

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

    for(int i = 1; i <= radioOptions.size(); i++) {
    var val = radioOptions.get(i).findElement(By.cssSelector("input[value='true']"));
    if(val!=null){
        tag = radioOptions.get(i).getTagName();
        System.out.println(tag);
    }                
  }        
  return tag;
}}

推荐阅读