Question

我有以下元素，其中包含多个子元素。我想编写一个函数，以便我的测试点击上面提到的选项。

＆＃13;

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

＆＃13;

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

＆＃13;

我可以打印所有值，但无法点击并转到给定值。我在这里错过了什么？

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

迭代父元素并选择子元素

1 个答案: