Angularjs 量角器:用于排除嵌套元素的有效选择器

Question

我想查询特定的元素。

我的代码结构如下：

.HTML

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

我想测试li's在"主要class but not for李的which are inside排除"类中的存在。

问题是如果我使用 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')");

在量角器中使用它时

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下的所有子li。此选择器适用于以下情况：

<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>

如果您没有其他ul，例如.to--include则可以将选择器减少为：

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