The Intern - functional tests Finding Element with A Descendant that matches

Question

I am writing a functional test script to find a parent element that HAS a child that can be found, and if a descendant is found, return the parent. For example:

<div class="contentPane">
    <h2>Heading 1</h2> 
    <p id="first">FIRST TEXT</p>
</div>
<div class="contentPane">
    <h2>Heading 2</h2>
    <p id="second">SECOND TEXT</p>
</div>
<div class="contentPane">
    <h2>Heading 2</h2>
    <p id="third"></p>
</div>

I want to find the contentPane that can find the paragraph with the id="second". My test case to find the parent is similar to this:

...
findAllCssSelector(".contentPane")
.then(function(array, setContext){
     //for every element i in array
    //I want to call its findByCssSelector(".second")
     //and check if it is found. If it is
    //I want to return the ith element in array
    // to the command. 
})
.findByTagName("h2")
.getVisibleText()
.then(function(text){
    assert.strictEqual(text, "Heading 2");
})
....
...

How do I iterate through each array element and return the array element to the context stack?

Answer 1

For complex queries, Xpath is generally much more efficient than manually searching through elements. You could query with something like:

.findByXpath('//div[@class="contentPane" and p[@id="second"]]')

This will find the first DIV with class "contentPane" that contains a P with id "second".