java 使用 Selenium Webdriver 从 <md-select> 标签中选择一个值

Selecting a value from <md-select> tag using Selenium Webdriver

提问by Dan

I am using Selenium Webdriver and working on automating an AngularJS Web App on Chrome. It was going pretty well until I hit a dropdown list on the app. My test keeps crashing everytime I try to select a value from it. I have been doing my research on this and I have only seen 2 solutions (both of which I have tried but don't work)

我正在使用 Selenium Webdriver 并致力于在 Chrome 上自动化 AngularJS Web 应用程序。在我点击应用程序上的下拉列表之前，它进行得很顺利。每次我尝试从中选择一个值时，我的测试都会崩溃。我一直在做我的研究，我只看到了 2 个解决方案（我已经尝试过但都不起作用）

1. Use the Selectobject. This doesn't work because the html tag is not <select>, its <md-select>and this fails the test.
2. I then tried to just click on the dropdown element and click on the value - driver.findElement(By.xpath("xpath to dropdown list")).click();and driver.findElement(By.xpath("xpath do dropdown value")).click();

1. 使用Select对象。这不起作用，因为 html 标签不是<select>，它<md-select>没有通过测试。
2. 然后我尝试点击下拉元素并点击值 -driver.findElement(By.xpath("xpath to dropdown list")).click();和driver.findElement(By.xpath("xpath do dropdown value")).click();

With example 2, I also tried creating it as a WebElementvariable and calling click()separate, but this did not work either.

对于示例 2，我还尝试将其创建为WebElement变量并click()单独调用，但这也不起作用。

Any ideas on how I can solve this issue?

关于如何解决这个问题的任何想法？

Update

更新

HTML for the dropdown list

下拉列表的 HTML

<div ng-switch-when="dropdown" class="ng-scope">
    <zf-form-dropdown>
        <div class="dropdown">
            <div layout="row">
                <div flex="50" class="quote-label">
                    <p ng-bind-html="::label" class="ng-binding">Title</p>
                </div>
                <div ng-show="false" flex="10" class="tooltip-icon ng-hide" ng-click="showToolTip(field.get('toolTip'))" role="button" tabindex="0" aria-hidden="true"><img src="img/[email protected]"></div>

                <md-select flex="" ng-disabled="quote.isRated() || !input.enabled" ng-change="onDropdownChange()" ng-model="input.value" class="ng-valid md-default-theme ng-touched ng-dirty" role="combobox" id="select_0Q9" aria-haspopup="true" aria-expanded="false" aria-labelledby="select_label_0I1" tabindex="0" aria-disabled="false" aria-invalid="false" aria-owns="select_menu_0Q8"><md-select-label class="md-select-label md-placeholder" id="select_label_0I1"><span></span><span class="md-select-icon" aria-hidden="true"></span></md-select-label></md-select>
            </div>
        </div>
    </zf-form-dropdown>
</div>

HTML for the value I want to select

我要选择的值的 HTML

<md-option ng-value="::item.val" ng-selected="item.checked" ng-repeat="item in getOpts()" tabindex="0" class="ng-scope" role="option" aria-selected="false" id="select_option_0QD" value="MR">
    <div class="md-text ng-binding">Mr</div>
    <div class="md-ripple-container"></div>
</md-option>

The xpath for the dropdown list is //*[@id="select_0Q9"]The xpath for the dropdown value is //*[@id="select_option_0QD"]

下拉列表//*[@id="select_0Q9"]的 xpath 是下拉值的 xpath//*[@id="select_option_0QD"]

回答by Shubham Jain

If you are sure that your Xpath is fine then you can also click using javascriptexecutor so try it out like below:-

如果您确定您的 Xpath 没有问题，那么您也可以使用 javascriptexecutor 单击，然后尝试如下所示：-

WebElement element= driver.findElement(By.xpath("//md-option[@id='select_option_0QD']/div[1]"));

JavascriptExecutor executor = (JavascriptExecutor) driver;
executor.executeScript("arguments[0].click();", element);

Please feel free to locate the element in above code as per your convenience .

请随时根据您的方便在上面的代码中找到元素。

As per me your xpath of dropdown should be like below:-

按照我的说法，您的下拉 xpath 应该如下所示：-

//md-option[@id='select_option_0QD']

And xpath of first div which I suppose want to click is:-

我想点击的第一个 div 的 xpath 是：-

//md-option[@id='select_option_0QD']/div[1]

Change [1] to [2] if you want 2nd value.

如果您想要第二个值，请将 [1] 更改为 [2]。

In an another aspect you can also store all your element in the list(As you know you can't use select) and click them as per your need or all.

在另一方面，您还可以将所有元素存储在列表中（如您所知，您不能使用 select）并根据需要或全部单击它们。

For that you need to use xpath like:-

为此，您需要使用 xpath，例如：-

//md-option[@id='select_option_0QD']/div

Now implement it into code:-

现在将其实现为代码：-

List<WebElement> allelemts = driver.findElements(By.xpath("//md-option[@id='select_option_0QD']/div"));
  for(WebElement ele: allelemts){

    driver.findElement(By.xpath("//md-option[@id='select_option_0QD']")).click();

    JavascriptExecutor executor = (JavascriptExecutor) driver;
    executor.executeScript("arguments[0].click();", ele);

  }

Hope it will help you :)

希望它会帮助你:)

回答by justcurious

Since you are receiving a NoSuchElementExceptionexception, I believe the issue lies in Selenium not able to identify the element. Try any of the following waitmethods and then try to click the element.

由于您收到NoSuchElementException异常，我认为问题在于 Selenium 无法识别元素。尝试以下任一wait方法，然后尝试单击该元素。

Explicit Wait:(Most Preferred)

显式等待：（首选）

WebDriverWait wait = new WebDriverWait(driver, 20);
WebElement element = wait.until(ExpectedConditions.elementToBeClickable(By.id("elementID")));

or

或者

WebDriverWait wait = new WebDriverWait(driver, 20);
WebElement element = wait.until(ExpectedConditions.presenceOfElementLocated(By.id("elementID")));

Implicit Wait:

隐式等待：

driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

Sleep:(Try to avoid this unless absolutely necessary)

睡眠：（除非绝对必要，否则尽量避免这种情况）

Thread.sleep(1000);

EDIT:Added code to check for element's presence using findElementsmethod.

编辑：添加了使用findElements方法检查元素存在的代码。

Before using any of these waitmethods you could also check for the presence of your element using findElementsmethod.

在使用任何这些wait方法之前，您还可以使用findElements方法检查元素的存在。

List<WebElement> element = driver.findElements(By.id("elementId"));
    if (element.size() == 0) {
            System.out.println("Element not found");
    } else{
            System.out.println("Element found");
    }

回答by Dan

I have finally solved the issue!

我终于解决了这个问题！

I got the Selenium IDE and recorded a session where I got as far as selecting the dropdown menu and selecting my value. I then exported the file as a java test case and was able to read the lines where it selected the values, and they were;

我得到了 Selenium IDE 并记录了一个会话，在那里我选择了下拉菜单并选择了我的值。然后我将文件导出为 java 测试用例，并且能够读取它选择值的行，它们是；

driver.findElement(By.cssSelector("#select_08D > #select_label_005 > span.md-select-icon")).click();
driver.findElement(By.id("select_option_08H")).click();

So first off they both do not use xpathto find the elements, the dropdown menu itself is found with the cssSelectorand the value is found by the id.

因此，首先它们都不用于xpath查找元素，下拉菜单本身是通过 找到的cssSelector，而值是通过id.

I am just cross referencing again and the idfor the value is select_option_08Hbut while I am looking at Google Console I can see the idfor the value is select_option_189

我只是再次交叉引用id，值是，select_option_08H但是当我查看 Google 控制台时，我可以看到id值是select_option_189