Selenium：动态查找 CSS 选择器答案

【问题标题】：Selenium: Find CSS selector dynamicallySelenium：动态查找 CSS 选择器
【发布时间】：2015-02-04 18:44:43
【问题描述】：

我是 selenium 的新手，我正在为现有的网络应用程序编写测试。我正在尝试从动态生成的列表中选择一个选项。以下 HTML 是列表的示例：

<table id="selectChannelForm">
<tbody id=""></tbody>
<tbody id="">
<tr rowtype="container">
<td colspan="3" class="second">
<ul>   
    <li>
        <a href="selectChannel.php?selectedChannelId=103">
        <span>Sales Channel</span>
        </a>
    </li>
    <li>
        <a href="selectChannel.php?selectedChannelId=108">
        <span>Demo channel</span>
        </a>
    </li>
    <li>
        <a href="selectChannel.php?selectedChannelId=112">
        <span>Finance Channel</span>
        </a>
    </li>
    <li>
        <a href="selectChannel.php?selectedChannelId=121">
        <span>HR Channel</span>
        </a>
    </li>
    <li>
        <a href="selectChannel.php?selectedChannelId=156">
        <span>Management Channel</span>
        </a>
    </li>
</ul>
</td>
</tr>
</tbody>
</table>

我需要选择其中一个频道进行测试，但问题是我无法直接引用 CSS 或 XPath，因为 tbody 和频道列表都会根据特定标准发生变化。我将如何使用 channelId 或 span 文本来选择正确的选项？以下是对第四个选项的直接 CSS 引用。

WebElement channelBtn = driver.findElement(By.cssSelector("#selectChannelForm > tbody:nth-child(2) > tr > td > ul > li:nth-child(4) > a"));

是否有可能在这些陈述中加入一些逻辑？或者其他选择nth-child的方法？

【问题讨论】：

标签： java html selenium

【解决方案1】：

您也可以使用 CSS 选择器尝试以下方式：

WebElement channelBtn = driver.findElement(By.cssSelector("td.second:nth-of-type(1) li:nth-of-type(4) span"));

这将导航到网页中第一个类为'second'的td元素的第4个li标签下的span标签，即“人力资源频道”

【讨论】：

没错，但正如我在问题中所说，此列表是动态的，因此在某些情况下，第四个
可能是管理频道。我需要能够通过文本找到跨度，虽然@RupeshShinde 提供的 XPath 解决方案允许这样做，但我需要使用 CSS 选择器

哦！在这种情况下，xpath(s) 是您最好的选择。否则，您使用的方式是另一种方式。另外，take a look here。这也可能派上用场。

【解决方案2】：

所以经过大量搜索后，我提出了以下基于 CSS 的方法的解决方案。完美运行

List<WebElement> channels = driver.findElements(By.tagName("span"));
        for(WebElement channel : channels){
            String selectedChannel = channel.getText();
            if (selectedChannel.equalsIgnoreCase(channelId)){
                channel.click();
                break;
            }
        }

【讨论】：

这是非常低效的。在 1 个 xpath 请求中可以实现的功能现在需要使用 CSS 进行多个请求。如果您使用 RemoteWebdriver（特别是如果您使用 Saucelabs 或 BrowserStack 而不是内部网格），那么减少 selenium 命令的数量对于快速运行测试非常重要。如果有人提到 XPath 很慢，那么现代 IE 版本不再是这样，而且事实证明它比 CSS 选择器更快
@RobbieWareham 非常好的一点，我没有考虑过。我现在只是在学习 Selenium，所以性能不是我首先关心的问题，但你是对的，XPath 是更好的解决方案

【解决方案3】：

使用“频道 ID”

xpath = //a[@href='selectChannel.php?selectedChannelId=108']

css = a[href='selectChannel.php?selectedChannelId=108']

第二次使用“span text”来选择您可以使用的正确选项

xpath = //span[contains(text(),'Demo channel')]

css = span:contains('Demo channel')

【讨论】：

感谢您的评论，但span:contains 不起作用。给出invalid selector exception
如果你的应用程序有一个扩展 CSS 的库，它可能有一些东西可以让你通过文本值搜索元素，但标准 CSS 选择器不允许你通过标签之间的文本进行选择。 XPath 适合通过可见文本定位元素

【解决方案4】：

您可以使用这样的 xpath 来找到您正在寻找的频道的链接：

//a[@href='selectChannel.php?selectedChannelId=108']

然后，只需将 108 替换为您需要的任何频道号。

【讨论】：

感谢您的回答，但我正在寻找 CSS 响应而不是 XPath。它有效，但我采用了更多基于 CSS 的方法