遍历父元素并选择子元素答案

【问题标题】：Iterate over a parent element and select a child element遍历父元素并选择子元素
【发布时间】：2018-03-06 23:11:29
【问题描述】：

我有以下具有多个子元素的元素。我想编写一个函数，让我的测试点击提到的选项。

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>

我能够打印所有值，但无法单击并转到给定值。我在这里想念什么？

【问题讨论】：

看起来名字是按钮，但实际上不是。尝试使用 menu[i].select();

标签： javascript selenium webdriver-io

【解决方案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')

现在使用这些选择器之一，您的数组中将有多个元素，然后您应该能够遍历每个元素并单击它们。我修改了您的原始代码 sn-p 以获取每个选项并将结果记录到控制台。您可以在控制台日志中看到它找到了我正在寻找的选项，并且有多次迭代而不仅仅是一次。

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

【讨论】：