使用 Selenium WebDriver 填充伪 ::before 和 ::after 元素的单选选项选择答案

【问题标题】：Radio option selection that populates pseudo ::before & ::after elements using Selenium WebDriver使用 Selenium WebDriver 填充伪 ::before 和 ::after 元素的单选选项选择
【发布时间】：2020-10-21 07:14:21
【问题描述】：

我需要一些帮助来确定选择了哪个单选选项。我正在处理的网页有两个单选选项是和否。下面是选择是选项时的 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>

当在网页上选择“否”选项时，HTML 代码中只有 ::after 的内容会从“是”选项中删除，并填充为“否”选项。

我尝试了 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;
    }
}

【问题讨论】：

尽量避免使用 CSS ::before 和 ::after，除非您关心样式表。
@DebanjanB - UI 框架的设计方式就是以这种方式构建元素/属性。非常感谢任何可行的解决方案。

标签： selenium selenium-webdriver css-selectors pseudo-element

【解决方案1】：

我从不使用 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;
}}

【讨论】：