[英]How to identify if a radio button option styled with pseudo element ::after is selected or not using Selenium and Java
I am having hard time with identifying if radio option No is selected or not using Selenium Java.我很难确定是否使用 Selenium Java 选择了无线电选项 No。 Below is the screenshot of the radio options on the web page.下面是 web 页面上的无线电选项的屏幕截图。
Here is the raw HTML code.这是原始的 HTML 代码。 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.下面是 HTML 代码的屏幕截图,该代码具有伪 element::after(在下面突出显示)在未选择选项时动态加载。
I created below Java method that executes JavaScript that I am expecting to return whole label for
tag.我在 Java 方法下创建了执行 JavaScript 的方法,我希望返回整个label for
标签。 It is currently printing out null
.它目前正在打印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.但是,当我在 Chrome 浏览器控制台中执行下面使用的脚本时,它会识别整个 label 标记,包括::before
和::after
伪元素。
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;
}
}
To validate if the radiobutton with text as No is selected or not you can use the following xpath based Locator Strategy :要验证是否选择了文本为No的单选按钮,您可以使用以下基于 xpath 的定位器策略:
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"); }
You can find a detailed discussion on pseudo-element in:您可以在以下位置找到关于伪元素的详细讨论:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.