javascript - 如何在元素上使用子选择器 > (或 + 等)和 by.css ？

Question

给定:

var someDivElement = element(by.css('div.main'));

现在，我想在 someDivElement 上选择更多子元素，但使用子选择器。不幸的是，子选择器不会这样工作:

var childElement = someDivElement.element(by.css('> section > span'));

这将导致无效的 css 路径错误。 有解决方法吗？ 我不想做的事情如下:

var childElement = element(by.css(someDivElement.locator().value + '> section > span'));

更新: Html 代码看起来像这样:

<div class="main">
    <section>
        <span></span> <!-- I want ONLY this span -->
        <div class="main">
             <section>
                 <span></span> <!-- this span i don't want -->
             </section>
         </div>
    </section>
</div>

如果我按照建议做:

var childElement = someDivElement.element(by.css('div.main > section > span'));

我仍然收到警告为定位器By.cssSelector找到了多个元素

Answer 1

1. 实现此目的的一种方法是使用链接技术获取父元素下的所有子元素，然后使用 get()或first()获取元素的方法(您甚至可以使用filter()或map()函数来获取精确的元素)。方法如下 -

   var someDivElement = element.all(by.css('div.main')).first();
   var childElement = someDivElement.$$(by.css('section > span')).first();
   //OR
   var someDivElement = $$('div.main').first();
   var childElement = someDivElement.$$(by.css('section > span')).get(0);
   

2. 如果您正在寻找可以完成这项工作的 CSS 选择器，那么您可以这样做 -

   var childElement = $('div.main:nth-of-type(even) > section >span');
   

nth-of-type(even)函数将返回第一个 div。如果您想获得第二个 div，请使用奇数而不是偶数。您还可以向该函数提供数字。

另一种方法是获取父元素的定位器值，即 ElementFinder然后使用它。方法如下 -

var childElement = element.all(by.css(someDivElement.elementArrayFinder_.locator_.value + '> section > span')).first();

您甚至可以使用您在问题中提到的 first() 或 get() 函数> 功能。

---

编辑: 为了避免在使用 first() 和 get() 函数时出现 IndexOutOfBound Exception，您可以编写自定义 wait() 函数查看元素计数是否大于 0，然后继续操作。方法如下 -

var someDivElement = element.all(by.css('div.main'));
var childElement;
browser.wait(function(){
    return someDivElement.count().then(function(count){
        return count > 0;
    });
}, 10000); //Wait for 10 seconds before timing out
childElement = someDivElement.$$(by.css('section > span')).first();

希望有帮助。