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

问题描述

我们有一个带有下拉框的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();
            }  

通过该线程： Testing React JS dropdown with Selenium and java

请指导。

解决方法

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

1. 点击下拉菜单的箭头标记（^）以展开下拉菜单
2. 然后用户在下拉菜单的输入元素中上下移动sendKeys箭头>然后按ENTER键选择值
3. 从田间出击

driver.findElement（By.xpath（“（// * [@ alt ='Expand']）[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");