使用 Selenium Java 从 ReactJS 下拉列表中选择值

Question

我们有 ReactJS 前端应用程序，它有下拉框，单击时它会显示其中的元素并需要选择复选框，但是如果尝试检查下拉值，它会显示如果单击某处就会关闭的属性。

以下是html：

<div class="MuiFormControl-root fullWidth">

<div class="MuiInputBase-root MuiOutlinedInput-root adornedEnd">

<input aria-invalid="false" autocomplete="off" id="checkboxes-tags-demo" placeholder="Select" type="text" class="MuiInputBase-input inputAdornedEnd" aria-autocomplete="list" autocapitalize="none" spellcheck="false" value="">

尝试了以下方法：但它不起作用，没有得到这样的元素异常

List<WebElement> countries = driver.findElements(By.xpath("//div[@class='MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth']/div"));
            for(WebElement tag : countries){
            if(tag.getText().trim().equals("TITLE"))
            tag.click();
            }  

浏览线程： 使用 Selenium 和 java 测试 React JS 下拉列表

请指导。

Answer 1

可以通过以下步骤解决问题：

1. 单击下拉菜单的箭头标记 (^) 以展开下拉菜单
2. 然后用户在下拉列表的输入元素中使用向下/向上箭头>然后按 ENTER 键选择值
3. 从字段中跳出

driver.findElement(By.xpath("(//*[@alt='展开'])[1]")).click();

            driver.findElement(By.xpath("//input[@id='tags']")).sendKeys(Keys.ARROW_DOWN);
            System.out.println("clicking arrow down");
            sleep(5);
            driver.findElement(By.xpath("//input[@id='tags']")).sendKeys(Keys.ENTER);
            System.out.println("clicked enter");
            sleep(2);
            driver.findElement(By.xpath("//input[@id='tags']")).sendKeys(Keys.TAB);
            System.out.println("tabbed out");

Answer 2

已成功使用以下选择器进行 MUI 选择：

// Using Selenide
var selectRole = $("#my-select");
selectRole.click();
sleep(1000);
$("li[data-value='" + desiredValue + "']").click();