Question

我有这个属性：

public IEnumerable<Drawing> Drawings { 
    get { 
        return Root.FindComponents<Drawing>(By.CssSelector("tbody tr[role='row']")); 
    } 
}

调用此扩展方法：

public static IEnumerable<T> FindComponents<T>(this IWebElement element, By by) where T : PageComponent, new() {
    return element.FindElements(by).Select((el) => {
        T t = new T();
        t.Root = el;
        return t;
    });
}

当我在Visual Studio中查看监视窗口时，我的选择器已被截断为tbody之后的部分，现在只是说tr[role='row']并且在监视窗口中以红色突出显示

这最终会选择一些错误的元素。

发生了什么事？为什么我无法使用这个完全有效的选择器？当我使用document.querySelectorAll时，选择器在目标浏览器（FireFox）中工作。

这是html结构：

（表格是根元素）

<table role="grid">
    <colgroup>
        <col style="width:35px" />
        <col style="width:35px" />
        <col style="width:35px" />
        <col style="width:35px" />
        <col style="width:120px" />
        <col style="width:35px" />
        <col style="width:35px" />
        <col style="width:40px" />
    </colgroup>
    <tbody role="rowgroup">
        <tr role="row">
            <td role="gridcell"></td>
            <td role="gridcell"></td>
            <td role="gridcell"></td>
            <td role="gridcell"></td>
            <td role="gridcell"></td>
            <td role="gridcell"></td>
            <td role="gridcell"></td>
            <td role="gridcell"></td>
        </tr>
        <!-- ... etc (repeats like the above) -->
    </tbody>
</table>

Answer 1

不确定这是否有用......

找到此资源https://saucelabs.com/resources/selenium/css-selectors

建议更换你的选择器：

tbody tr[@role='row']

或

tbody>tr[@role='row']

不确定两者是否会更好用，但我猜是值得一试。

注意：我注意到我们已经建议使用>但不能与@role一起使用。

Answer 2

你实际上在你的代码中使用了一个子选择器，但我认为问题在于你没有先定义根元素，它对我们后代选择器更有意义，它将考虑多个'tr'选择。未来你应该决定重用那个标签。

子选择器如下所示：

return Root.FindComponents<Drawing>(By.CssSelector("Table>tbody>tr[role='row']"));

其中'＆gt;'用于表示所需元素的线性路径。

后代选择器应该类似于：

return Root.FindComponents<Drawing>(By.CssSelector("Table tbody tr[role='row']"));

上面和你之间的唯一区别是它定义了html样式表的根元素。后代选择器还允许更大的选择查询范围。我建议尝试一下，看看它是否按预期工作，完全有可能我误解了文档。如果是这种情况，请告诉我，我们可以更详细地研究这个问题。如果您已经尝试过上述内容，请道歉，我认为值得在此采用消除过程。

Answer 3

我无法验证这一点，因为我不再处理该项目，但我相信我的Chrome驱动程序版本对于我正在测试的Chrome版本不正确。如果其他人遇到这样的问题，我建议您检查这些版本以确保它们匹配。

Answer 4

CSS路径应为"tbody>tr[role='row']"

对于更多与CSS相关的问题，您可以留意this video。它可以帮助您以多种方式设计您的CSS路径。

CSS选择器无法正常工作 - 由Selenium WebDriver截断

4 个答案: