Java 如何使用 Selenium 从动态下拉列表中选择一个选项？

How to select an option from a dynamic dropdown using Selenium?

提问by user2377826

I am trying to click on dropdown value to select city in from field in Make my trip http://www.makemytrip.com/. But getting Stale element reference exception. Ids are getting changed on page load. Tried below code:

我正在尝试单击下拉值以在 Make my trip http://www.makemytrip.com/中的 from 字段中选择城市。但是获取 Stale 元素引用异常。页面加载时，ID 会发生变化。试过下面的代码：

driver.findElement(By.xpath(".//*[@id='hp-widget__sfrom']")).clear();
driver.findElement(By.xpath(".//*[@id='ui-id-1']"));
driver.findElement(By.xpath(".//*[@id='hp-widget__sfrom']")).click();
WebDriverWait wait = new WebDriverWait(driver, 30);
wait.until(ExpectedConditions.elementToBeSelected(driver.findElement(By.xpath(".//*[@class='ui-menu-item'][2]"))));

采纳答案by DebanjanB

To click on a dropdown value e.g. Mumbaiyou can use the following solution:

要单击下拉值，例如Mumbai，您可以使用以下解决方案：

• Code Block:

  driver.get("https://www.makemytrip.com/")
  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@class='input_fromto checkSpecialCharacters ui-autocomplete-input' and @id='hp-widget__sfrom']"))).click();
  List<WebElement> myList = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.xpath("//li[@class='ui-menu-item'][starts-with(@id,'ui-id-')]//span[@class='autoCompleteItem__label']")));
  for (WebElement element:myList)
      if(element.getText().contains("Mumbai"));
          element.click();
  

• Browser Snapshot:

• 代码块：

  driver.get("https://www.makemytrip.com/")
  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@class='input_fromto checkSpecialCharacters ui-autocomplete-input' and @id='hp-widget__sfrom']"))).click();
  List<WebElement> myList = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.xpath("//li[@class='ui-menu-item'][starts-with(@id,'ui-id-')]//span[@class='autoCompleteItem__label']")));
  for (WebElement element:myList)
      if(element.getText().contains("Mumbai"));
          element.click();
  

• 浏览器快照：

回答by Andrei Suvorkov

You can use this working code:

您可以使用此工作代码：

WebDriver driver = new ChromeDriver();
driver.get("https://www.makemytrip.com/");

driver.findElement(By.xpath(".//*[@id='hp-widget__sfrom']")).clear();
driver.findElement(By.xpath(".//*[@id='hp-widget__sfrom']")).click();
WebDriverWait wait = new WebDriverWait(driver, 30);
wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//*[@class='ui-menu-item'][2]/div/p[1]/span[1]"))).click();

I have fixed the xPath of dropdown list element. Always try to specify the exact element yo want to interact with. For example if you want to click on button, try to find <span>or <button>tag, for a link <a>tag and for input fields <input>tag.

我已经修复了下拉列表元素的 xPath。始终尝试指定要与之交互的确切元素。例如，如果您想单击按钮，请尝试查找<span>或<button>标记链接<a>标记和输入字段<input>标记。

回答by cruisepandey

You can try this code :

你可以试试这个代码：

I do not see any use of xpathin this scenario. I have converted some of the xpathto either css selector or id.and have kept only one. Though I have not faced any stale element reference.

在这种情况下，我看不到xpath 的任何用途。我已将一些xpath转换为css 选择器或 id。并且只保留了一个。虽然我没有遇到任何过时的元素参考。

System.setProperty("webdriver.chrome.driver", "D:\Automation\chromedriver.exe");
        driver  = new ChromeDriver();
        driver.manage().window().maximize();
        WebDriverWait wait = new WebDriverWait(driver, 30);
        driver.get("https://www.makemytrip.com/");
        WebElement from =  wait.until(ExpectedConditions.elementToBeClickable(By.id("hp-widget__sfrom")));
        from.click();
        from.clear();
        wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("ul[class*='ui-widget-content hp-widget__sfrom']")));
        wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//li[contains(@aria-label,'Top Cities : Mumbai, India ')]"))).click();

回答by Bhargav Marpu

The below code works fine for me and it is parameterized as well, it works for any input value without changing the xpath. In this example, I took mumbai as test data.

下面的代码对我来说很好用，它也被参数化了，它适用于任何输入值而无需更改 xpath。在这个例子中，我把孟买作为测试数据。

    driver.get("https://www.makemytrip.com/");
    driver.manage().timeouts().pageLoadTimeout(10, TimeUnit.SECONDS);
    driver.findElement(By.xpath("//input[contains(@id,'hp-widget__sfrom')]")).clear();
    driver.findElement(By.xpath("//input[contains(@id,'hp-widget__sfrom')]")).click();
    driver.findElement(By.xpath("//input[contains(@id,'hp-widget__sfrom')]")).sendKeys("Mumbai");
    Thread.sleep(2000);
    WebDriverWait wait = new WebDriverWait(driver, 30);
    By option = By.xpath("//div[@class='autoCompleteItem']/p/span[contains(text(),'Mumbai')]");
    wait.until(ExpectedConditions.elementToBeClickable(option));
    driver.findElement(option).click();