需要通过 css 在 selenium 中查找元素答案

【问题标题】：Need to find element in selenium by css需要通过 css 在 selenium 中查找元素
【发布时间】：2013-08-19 17:55:06
【问题描述】：

我想在<h5> 中找到此链接“我们州”的元素。我正在 craigslist 中尝试这个。任何帮助将不胜感激

这里是网址：http://auburn.craigslist.org/

 <html class="">
<head>
<body class="homepage w1024 list">
    <script type="text/javascript">
    <article id="pagecontainer">
            <section class="body">
        <table id="container" cellspacing="0" cellpadding="0" 
    <tbody>
           <tr>
    <td id="leftbar">
    <td id="center">
    <td id="rightbar">
        <ul class="menu collapsible">
            <li class="expand s">
            <li class="s">
            <li class="s">
                <h5 class="ban hot">us states</h5>
                <ul class="acitem" style="display: none;">
            </li>
        <li class="s">
        <li class="s">

【问题讨论】：

标签： selenium webdriver css-selectors selenium-webdriver

【解决方案1】：

By.cssSelector(".ban") 或 By.cssSelector(".hot") 或 By.cssSelector(".ban.hot") 应该都选择它，除非有另一个元素具有这些类。

在 CSS 中，.name 表示找到一个具有 name 类的元素。 .foo.bar.baz 表示查找具有所有这些类的元素（在同一个元素中）。

但是，这些选择器中的每一个都只会选择页面上与其匹配的第一个元素。如果您需要更具体的内容，请发布具有这些类的其他元素的 HTML。

【讨论】：

【解决方案2】：

在您的情况下，仅使用类名是不够的。

By.cssSelector(".ban") 有 15 个匹配节点
By.cssSelector(".hot") 有 11 个匹配节点
By.cssSelector(".ban.hot") 有 5 个匹配节点

因此，您需要更多限制来缩小范围。 选项 1 和 2 可用于 css 选择器，1 可能是最适合您需求的选项。

选项 1：使用列表项的索引（CssSelector 或 XPath）

限制

如果网站结构发生变化，则不够稳定

例子：

driver.FindElement(By.CssSelector("#rightbar > .menu > li:nth-of-type(3) > h5"));
driver.FindElement(By.XPath("//*[@id='rightbar']/ul/li[3]/h5"));

选项 2：使用 Selenium 的 FindElements，然后对它们进行索引。（CssSelector 或 XPath）

限制

如果网站结构发生变化，则不够稳定
不是原生选择器的方式

例子：

// note that By.CssSelector(".ban.hot") and //*[contains(@class, 'ban hot')] are different, but doesn't matter in your case
IList<IWebElement> hotBanners = driver.FindElements(By.CssSelector(".ban.hot"));
IWebElement banUsStates = hotBanners[3];

选项 3：使用文本（仅限 XPath）

限制

不适用于多语言网站
仅适用于 XPath，不适用于 Selenium 的 CssSelector

例子：

driver.FindElement(By.XPath("//h5[contains(@class, 'ban hot') and text() = 'us states']"));

选项 4：索引分组选择器（仅限 XPath）

限制

如果网站结构发生变化，则不够稳定
仅适用于 XPath，不适用于 CssSelector

例子：

driver.FindElement(By.XPath("(//h5[contains(@class, 'ban hot')])[3]"));

选项5：通过href找到隐藏的列表项链接，然后遍历回h5（仅限XPath）

限制

仅适用于 XPath，不适用于 CssSelector
性能低下
棘手的 XPath

例子：

driver.FindElement(By.XPath(".//li[.//ul/li/a[contains(@href, 'geo.craigslist.org/iso/us/al')]]/h5"));

【讨论】：

By.cssSelector(".ban.hot:nth-of-type(3)")
这是对曾易回答的补充。出于某种原因，他没有提到您可以在 cssSelector 中将 nth-of-type 与类名一起使用。您不必通过元素列表来获取包含类名的第 N 个元素
@Vlad：感谢您的指出。 nth-of-type 是 CSS3，当时 Selenium 并不完全支持所有浏览器。现在可能支持它，但我没有机会验证。你用最新的 Selenium 测试过吗？
在 Selnium 2.48 的 Firefox 驱动程序上测试 nth-of-type -> 完美运行。

【解决方案3】：

您可以像级联样式表一样描述您的 css 选择：

protected override void When()
{
   SUT.Browser.FindElements(By.CssSelector("#carousel > a.tiny.button"))
}

【讨论】：