无法选择隐藏的下拉菜单

Question

我正在尝试从 Selenium Webdriver 的下拉列表中选择一个值。但是每次我在控制台中出现错误时

这是我的网站URL，下面是元素的快照：

我试过下面的代码，但它不起作用

Select dropdown= new Select(driver.findElement(By.xpath("//div[@on-dimension-select = 'selectQuantityDimension']/*[@role='combobox']")));
dropdown.selectByValue("4");

得到以下异常：-

线程“main”中的异常 org.openqa.selenium.support.ui.UnexpectedTagNameException：元素 应该是“选择”但是“跨度”构建信息：版本： '未知'，修订：'1969d75'，时间：'2016-10-18 09:43:45 -0700'

也尝试过这种方式：

driver.findElement(By.xpath("//div[@on-dimension-select = 'selectQuantityDimension']/*[@role='combobox']")).click();
Select dropdown= new Select(driver.findElement(By.xpath("//div[@on-dimension-select = 'selectQuantityDimension']/select/")));
dropdown.selectByValue("4");

而这次的错误是：

线程“main”中的异常 org.openqa.selenium.InvalidSelectorException：无效选择器：无法 使用 xpath 表达式定位元素 //div[@on-dimension-select = 'selectQuantityDimension']/select/ 因为以下错误： SyntaxError: Failed to execute '文档'上的'评估'：字符串'//div [@on-dimension-select = 'selectQuantityDimension']/select/' 不是有效的 XPath 表达式。

这是相同的 HTML 代码：

 <div class="ng-isolate-scope ng-pristine ng-valid" ng-show="!docked" ng-model="variantOptionsModel" on-dimension-select="selectQuantityDimension" docked="docked">
  <label>Quantity:</label>
    <select class="accessory-option ng-pristine ng-valid" ng-model="model.selectedQuantity" ng-options="quantity for quantity in model.quantityDropDownValues track by quantity" ng-change="quantityClick()" data-qa-quantity-value="" style="display: none;">
     <option value="1" selected="selected" label="1">1</option>
     <option value="2" label="2">2</option>
     <option value="3" label="3">3</option>
     <option value="4" label="4">4</option>
     <option value="5" label="5">5</option>
     <option value="6" label="6">6</option>
   </select>
<span id="" class="selectboxit-container selectboxit-container" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-owns="">
<span id="" class="selectboxit accessory-option ng-pristine ng-valid selectboxit-enabled selectboxit-btn" name="" tabindex="0" unselectable="on" data-qa-quantity-value="">
<ul class="selectboxit-options selectboxit-list" tabindex="-1" role="listbox" aria-hidden="true" style="max-height: 217px; top: -217px; display: none;">
</span>
</div>

我不确定自己做错了什么。

Answer 1

这是您问题的答案：

这是导航到“https://www.o2.co.uk/shop/smartwatches/samsung/gear-s2/#contractType=nonconnected”的工作代码块，计算Quantity DropDown 中的条目数，将输出打印到控制台，最后选择Quantity 作为4 & 打印到控制台：

package demo;

import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;

public class Q44559302_dropdown_select {

    public static void main(String[] args) {


        String innerhtml = null;
        System.setProperty("webdriver.gecko.driver", "C:\\your_directory\\geckodriver.exe");
        WebDriver driver =  new FirefoxDriver();
        driver.manage().window().maximize();
        driver.get("https://www.o2.co.uk/shop/smartwatches/samsung/gear-s2/#contractType=nonconnected");
        driver.findElement(By.xpath("//form[@id='chooseTariffForm']//div[@class='quantiy-picker-wrapper']/div/span")).click();
        List<WebElement> element_list = driver.findElements(By.xpath("//form[@id='chooseTariffForm']//div[@class='quantiy-picker-wrapper']/div/span/ul/li/a"));
        System.out.println("Number of Elements : "+element_list.size());
        for (int i=0; i<element_list.size(); i++)
        {
            WebElement my_element = element_list.get(i);
            innerhtml = my_element.getText();

            if(innerhtml.contentEquals("4"))
            {
                my_element.click();
                break;
            }


        }
        System.out.println("Value selected from Dropdown is : "+innerhtml);

    }

}

如果这能回答您的问题，请告诉我。

Answer 2

您不能使用选择类，因为页面选择框没有选择标签。

要选择选项，首先单击选择框，然后单击所需的列表选项。

以下代码将点击第一个选项

        //click on dropdown
        driver.findElement(By.xpath("//div[@on-dimension-select = 'selectQuantityDimension']/*[@role='combobox']")).click();

        //click on first option 1
        driver.findElement(By.xpath("//div[@on-dimension-select = 'selectQuantityDimension']/*[@role='combobox']/ul/li[@data-val=1]/a")).click();

Answer 3

下拉菜单是 Angular，您粘贴的 DOM 有 Select Tag 指向网页中的其他位置。

1. 点击数量下拉：

   driver.findElement(by.xpath("//div[@class='quantiy-picker-wrapper']//span[@class='selectboxit-container selectboxit-container']")).click();
   

现在用户可以看到下拉菜单中的选项。

1. 从下拉列表中选择一个值：

   //am selecting quantity 4
   driver.findElement(by.xpath("//div[@class='quantiy-picker-wrapper']//span[@class='selectboxit-container selectboxit-container']//li[4]")).click();
   

希望这对您有所帮助。谢谢。