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-Code看起来像这样：

<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'));

我最后还是警告more than one element found for locator By.cssSelector

Answer 1

这样做的一种方法是使用链接技术获取父元素下的所有子元素，然后使用get()或first()方法获取元素（您甚至可以使用white或<Trigger Property="IsSelected" Value="False" > or True函数来获取精确元素。这是如何 -
```
filter()
```
如果您正在寻找能够完成这项工作的css选择器，那么您可以这样做 -
```
map()
```

nth-of-type(even)函数将返回第一个div。如果你想获得第二个div，那么使用odd而不是even。您也可以为该功能提供数字。

其他方法是获取父元素的定位符值ElementFinder，然后使用它。这是如何 -

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

您甚至可以使用var childElement = $('div.main:nth-of-type(even) > section >span');或var childElement = element.all(by.css(someDivElement.elementArrayFinder_.locator_.value + '> section > span')).first();功能在问题中提到的locator()功能。

修改要避免在first()和get()函数的情况下IndexOutOfBound Exception，您可以编写自定义first()函数来查看元素计数是否大于0然后继续操作。这是如何 -

get()

希望它有所帮助。

Answer 2

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

或在页面文件中，这可能如下所示：

someDivElement:{get: function(){ return element(by.css('div.main')); }}
childElement:  {get: function(){ return this.someDivElement.element(by.css('section')) }},

Answer 3

在您的情况下，您需要添加一个包装元素，您将在其中定义自己的选择器（例如，this ）。假设，选择器this将指向当前元素。

自定义选择器功能将是这样的：

function myCustomSelector(referenceElement, selector){
  //
  var targetElement = element(by.css(selector));
  // if selector has "this" reference
  if(/^this\s/.test(selector)){
    referenceElement.setAttribute('temporary-reference-attribute','1');
    selector = selector.replace(/^this/,'[temporary-reference-attribute]');
    targetElement = element(by.css(selector));
    referenceElement.removeAttribute('temporary-reference-attribute');
  }
  return targetElement;
}

然后致电：

var childElement = myCustomSelector(someDivElement, 'this > section');

如何使用子选择器＆gt; （或+等）与元素上的by.css？

3 个答案: