如何在元素上通过by.css使用子选择器>（或+等）？

Question

Given:

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

Now, I would like to select further child elements on someDivElement , but with child selector. Unfortunately, the child selector won't work that way:

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

This will result in an invalid css path error . Is there a workaround? What I dont wan't to do is following:

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

UPDATE: Html-Code looks something like this:

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

If I do as suggested:

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

I still end up with a warning more than one element found for locator By.cssSelector

Answer 1

1. One way of doing this is to get all the child elements under parent element using chaining technique and then use get() or first() methods to get the element (You can even use filter() or map() function to get the precise element too) . Here's how -

    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. If you are looking for css selectors that can do this work, then you can do it this way -

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

nth-of-type(even) function will return the first div. If you want to get the second div then use odd instead of even. You can also provide numbers to the function.

3. Other way is to get the locator value of the parent element which is an ElementFinder and then use it. Here's how -

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

4. You can even use the locator() function that you have mentioned in your question using first() or get() function.

---

EDIT: To avoid IndexOutOfBound Exception in the case of first() and get() functions, you can write a custom wait() function to see if the element count is greater than 0 and then proceed with operations. Here's how -

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

Hope it helps.

Answer 2

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

or in a page file this might look like:

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

Answer 3

In your case, you need to add a wrapper element where you will define your own selector ( For example, this ). Suppose, the selector this will point to the current element.

The custom selector function will be something like 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;
}

And then call:

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