遍历父元素并选择子元素

Question

I have the following element which has number of child elements. I want to write a function in such a way that my test clicks the mentioned option.

 navigateMenu: function(name){ var menu = $$('.nav-menu'); for(var i=0 ; i < menu.length ; i++){ console.log(menu[i].getText()); if(menu[i].getText() == name){ menu[i].click(); browser.options.sendKey('ENTER'); } } } 

  <div class='nav-menu'> <div class='nav-button'> <div class='button-text'>Option1</div> <div class='nav-button'> <div class='button-text'>Option2</div> <div class='nav-button'> <div class='button-text'>Option3</div> <div class='nav-button'> <div class='button-text'>Option4</div> <div class='nav-button'> <div class='button-text'>Option5</div> <div class='nav-button'> <div class='button-text'>Option6</div> </div> 

I am able to print all the values but unable to click and go to the given value. What am I missing here ?

Answer 1

You are using the wrong element / selector. You need to be getting all the individual options not the whole menu. If you log the menu element you are grabbing to the console you will see there is only one element in the array. So when you are calling getText() It is dumping all the text at once because it is all contained in that nav-menu element.

var menu = $$('.nav-menu');
console.log(menu);

Will give you a result similar to this one:

[ { ELEMENT: '0.10790115528393929-1',
'element-6066-11e4-a52e-4f735466cecf': '0.10790115528393929-1',
selector: '.nav-menu',
value: { ELEMENT: '0.10790115528393929-1' },
index: 0 } ]

Notice how there is only one element in the results array. If you change the selector though you can get a list of the options and then you should be able to click on each one. You can just explicitly get all the options at once. All of the following examples will work for that.

var options = $$('.nav-button')
var options = $$('.nav-menu > .nav-button')
var options = $$('.button-text')

Using one of these selectors now you will have more than one element in your array and then you should be able to iterate over each one and click on them. I modified your original code snippet to get each option and logged the results to the console. You can see in the console log that it found the option I was looking for and that there were several iterations not just one.

var options = $$('.nav-button');
console.log(options);

Gives you an array with 6 elements in it

[ { ELEMENT: '0.9727932413621352-1',
    'element-6066-11e4-a52e-4f735466cecf': '0.9727932413621352-1',
    selector: '.nav-button',
    value: { ELEMENT: '0.9727932413621352-1' },
    index: 0 },
  { ELEMENT: '0.9727932413621352-2',
    'element-6066-11e4-a52e-4f735466cecf': '0.9727932413621352-2',
    selector: '.nav-button',
    value: { ELEMENT: '0.9727932413621352-2' },
    index: 1 },
  { ELEMENT: '0.9727932413621352-3',
    'element-6066-11e4-a52e-4f735466cecf': '0.9727932413621352-3',
    selector: '.nav-button',
    value: { ELEMENT: '0.9727932413621352-3' },
    index: 2 },
  { ELEMENT: '0.9727932413621352-4',
    'element-6066-11e4-a52e-4f735466cecf': '0.9727932413621352-4',
    selector: '.nav-button',
    value: { ELEMENT: '0.9727932413621352-4' },
    index: 3 },
  { ELEMENT: '0.9727932413621352-5',
    'element-6066-11e4-a52e-4f735466cecf': '0.9727932413621352-5',
    selector: '.nav-button',
    value: { ELEMENT: '0.9727932413621352-5' },
    index: 4 },
  { ELEMENT: '0.9727932413621352-6',
      'element-6066-11e4-a52e-4f735466cecf': '0.9727932413621352-6',
      selector: '.nav-button',
      value: { ELEMENT: '0.9727932413621352-6' },
      index: 5 } 
]

And now if I use the loop, I can see that the option is actually found in the console messages and that there are several iterations of the loop.

var name = 'Option2';

for(var i=0 ; i < options.length ; i++){
    console.log(`iteration ${i}: ${options[i].getText()}`);
    if(options[i].getText() === name){
       console.log('option found');
       options[i].click();
       browser.keys(['ENTER']);
   }
}

//console logs
iteration 0: Option1
iteration 1: Option2
option found
iteration 2: Option3
iteration 3: Option4
iteration 4: Option5
iteration 5: Option6

FInally, if you really need to get the parent element first and then iterate over each child you can do it like this.

var name = 'Option2';
var menu = $('.nav-menu');

browser.elementIdElements(menu.value.ELEMENT, '.nav-button').value.forEach(option => {
    console.log(browser.elementIdText(option.ELEMENT).value);

    var text = browser.elementIdText(option.ELEMENT).value;

    if(text === name) {
        console.log('option found');

        //do stuff...
    }        
});