如何在元素上通过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'));

我仍然收到警告， more than one element found for locator 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，请使用奇数而不是偶数。 您还可以为该功能提供数字。

3. 另一种方法是获取作为ElementFinder的父元素的定位符值，然后使用它。 这是如何做 -

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

4. 您甚至可以使用first()或get()函数来使用在问题中提到的locator() 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();

希望能帮助到你。

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

在您的情况下，您需要添加一个wrapper元素，在其中您将定义自己的选择器（ 例如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');