Angularjs Protractor：排除嵌套元素的有效选择器

Question

我想查询特定元素。

我的代码结构如下：

HTML

<ul class="main">
    <li>...</li>
    <li>...</li>
    <li>
        <ul class="to--exclude">
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
    <li>...</li>
    ...
</ul>

我想在 'mainclass but not forli'swhich are insideto-exclude` 类中测试 li's 的存在。

问题是如果我使用element(by.css('.main li'))，它将找到所有li's，包括to-exclude类中的那些。

在 Chrome 的开发者工具中，我可以使用 JQuery 的 :not 或 .not() 准确定位它们。

$('.main li').not('ul.to--exclude li')
// OR
$(".main li:not('ul.to-exclude li')");

在 protractor 中用作

element(by.css('.main li').not('ul.to--exclude li'));
// OR
element(by.css(".main li:not('ul.to--exclude li')"));

以上代码报错：

InvalidElementStateError: invalid element state: Failed to execute 'querySelectorAll' on 'Document': '.main li:not('ul.to--exclude li')' is not a valid selector.

如何在量角器中完成相同的操作。如何排除一些嵌套在父定位器类中的类。

谢谢

Answer 1

您应该可以像这样使用 CSS 伪类 :not 来做到这一点：

element(by.css(".main > li > ul:not(.to--exclude) li, .main > li)"));

我会将.main > li 添加为备用选择器，因为您似乎想选择.main 下的所有子lis。这种选择器适用于这种情况：

<ul class="main">
    <li>...</li>
    <li>...</li>
    <li>
        <ul class="to--exclude">
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
    <li>
        <ul class="to--include">
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
    ...
</ul>

如果您没有像 .to--include 这样的其他 uls，您可以将选择器缩小为：

element(by.css(".main > li)"));