使用 CSS 通过选择列表的内容查找 WebElement：Selenium答案

【问题标题】：Find WebElement by contents of a picklist using CSS: Selenium使用 CSS 通过选择列表的内容查找 WebElement：Selenium
【发布时间】：2014-03-19 23:00:51
【问题描述】：

简而言之：

我正在用 JAVA 为一个没有好的 id 的 Web 应用程序编写 selenium 测试（即它们是动态生成的）。

我的情况涉及两个组合框，或者如果您愿意，可以选择选项列表，其 id 看起来像这样（注意：实际上我可能在一个页面上有数百个，而不仅仅是两个。两个是保持简单:)）：

elementOne id = '12345WORKRECORD678'

elementTwo id = '9876WORKRECORD5432'.

使用 CSSSelectors 我可以使用以下方法在列表中获取这些元素：

"...findElements(By.cssSelector("select[id*='WORKRECORD']");

Where * 的作用类似于“CONTAINS”语句。

问题是我不知道哪个元素是哪个，因为我不能利用整个 id。我所知道的是我有一个选项列表，但我不能轻易选择我想要或需要的一个。这是因为 id 唯一一致的部分是“WORKRECORD”，其他一切都是动态的。

为了知道要在我的测试中使用哪个元素，我必须遍历选择列表中的每个项目（选项）并根据其中的内容做出决定。所以是这样的：

    //Get all picklists that contain string "WORKRECORD" in their id. 
    List<WebElement> picklists = 
        driver.findElements(By.cssSelector("select[id*='WORKRECORD']"));

        //iterate through these picklists and get lists of options
    for(WebElement picklist : picklists)
    {
        //get all items/options in the picklist
        List<WebElement> options = picklist.findElements(By.tagName("option"));

        //Next go through each value and see if it is the one I want.  
        //If so, then I found my web element
        for(WebElement option : options)
        {
            if(option.equals(myValue))
            {
                myWantedWebElement = picklist;
                return myWantedWebElement;
            }
        }
    }

所以我的问题是：

我可以使用 CSS 根据选项中找到的值来定位 webElement 吗？例如，伪代码如下：

List<WebElement> picklists = 
    driver.findElements(By.cssSelector("select[id*='WORKRECORD']:option[value contains 'myValue(s)']"));

或者我只需要继续我正在做的事情吗？或者有什么更好的东西会让我大吃一惊，等等......

谢谢大家，干杯！

【问题讨论】：

这个链接提供了一个更好的方法：stackoverflow.com/questions/18457503/…
@Richard - 对于这种特殊情况，使用 Select 类会非常慢。

标签： java css selenium combobox

【解决方案1】：

另一种方法是使用 XPath 选择器 - 通过 option 值定位，然后选择它的父级 select：

myWantedWebElement = driver.findElement(By.xpath("//select[contains(@id,'WORKRECORD')]/option[.='optionvalue']/.."));

以下 CSS 选择器将找到所需的 option，但不会为您提供 select，因为 CSS 选择器没有父选择器 - 您无法遍历 DOM 树。

select[id*='WORKRECORD'] > option:contains('optionvalue')

【讨论】：

一个更好的xpath可以使用//select[contains(@id,'WORKRECORD') and option[.='optionvalue']]
像魅力一样工作。谢谢法伊兹。

【解决方案2】：

我同意 Faiz 的观点。以下xpath 也可以使用：

xpath = //select[contains(@id,'WORKRECORD') and ./option[contains(.,'optiontext')]]

上述 xpath 将定位 select 标记，其中 其 id 包含 WORKRECORD，其子项包含 optiontext 作为其可见文本。

【讨论】：