遍歷父元素並選擇子元素

Question

我有以下具有多個子元素的元素。 我想編寫一個函數，使我的測試單擊上述選項。

 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> 

我能夠打印所有值，但無法單擊並轉到給定值。 我在這里想念什么？

Answer 1

您使用了錯誤的元素/選擇器。 您需要獲取所有單個選項，而不是整個菜單。 如果您將菜單元素記錄到控制台，則會看到數組中只有一個元素。 因此，當您調用getText()它會一次轉儲所有文本，因為所有文本都包含在該nav-menu元素中。

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

會給你類似的結果：

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

請注意，結果數組中只有一個元素。 如果您更改選擇器，則可以獲得選項列表，然后應該可以單擊每個選項。 您可以一次明確地獲取所有選項。 以下所有示例均適用於此。

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

現在使用這些選擇器之一，您將在數組中擁有多個元素，然后應該可以遍歷每個元素並單擊它們。 我修改了原始代碼段以獲取每個選項，並將結果記錄到控制台。 您可以在控制台日志中看到它找到了我正在尋找的選項，並且有多個迭代而不僅僅是一個。

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

給您一個包含6個元素的數組

[ { 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 } 
]

現在，如果我使用循環，則可以看到實際上在控制台消息中找到了該選項，並且循環進行了多次迭代。

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

最后，如果您確實確實需要先獲取父元素，然后遍歷每個孩子，則可以這樣做。

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