Intern:.. Петля на Promise <Массив <Лэдфут/Элемент >>

Question

Скажем, у меня есть следующая структура DOM, для простоты:

<div class='myparent'> 
    <div class='child'> 
     <div class="label">A</div> 
     <div class="ico"/> 
    </div> 
    <div class='child'> 
     <div class="label">B</div> 
     <div class="ico"/> 
    </div> 
    <div class='child'> 
     <div class="label">C</div> 
     <div class="ico"/> 
    </div> 
</div> 

Я хотел бы цикл в течение всего child элемента, возвращаемого функцией findAllByCssSelector ('. ребенок). В частности, я хотел бы нажать на ico сНу подэлементе ТОЛЬКО если label из DIV является B.

Я помню, что findAllByCssSelector() возвращается Promise.<Array.<leadfoot/Element>>.

Обычно я должен сделать что-то вроде:

var my_label = null; 
this.remote 
    .findAllByCssSelector('.my-selector').then(function (elementArray) { 
     for(.....) { 
     elementArray[i] 
      .getVisibileText() 
       .then(function (text) { 
        if(text == my_label) 
        elementArray[i].findByCssSelector('.ico').click().end() 
       } 
     } 
}) 

Я попробовал этот код, но не работает, потому что elementArray[i] внутри функции getVisibleText().then() не существует - это как я теряю свою ссылку. Кроме того, мне также нужно, чтобы, если метка не найдена в конце цикла, должно быть выбрано исключение.

Как я могу это достичь? Может ли кто-нибудь помочь, пожалуйста?

Answer 1

Самый простой способ сделать это было бы использовать выражение Xpath, чтобы выбрать пункт непосредственно, как:

.findByXpath('//div[@class="child" and div[@class="label" and text()="B"]]/div[@class="ico"]') 

Выражение выше будет найти первый DIV с классом «ICO», что это ребенок div с классом «child», который имеет дочерний div с классом «label» и текстовым контентом «B».

---

Update

Используя выражение Xpath почти всегда предпочтительнее циклически элементов с помощью команд Лэдфут, потому что это значительно более эффективным, но если цикл желательно по какой-то причине, вы можете сделать что-то вроде:

var my_label = null; 
this.remote 
    .findAllByCssSelector('.my-selector') 
    .then(function (elementArray) { 
     return Promise.all(elementArray.map(function (element) { 
      return element.getVisibleText() 
       .then(function (text) { 
        if (text === my_label) { 
         return element.findByCssSelector('.ico') 
          .then(function (ico) { 
           return ico.click(); 
          }); 
        } 
       }); 
     }); 
    }); 

несколько ключевых моментов, чтобы отметить:

1. Вы должны вернуть Promises/Команды из then обратных вызовов, когда вы выполняете операции асинхронных в then обратных вызовах
2. методы Element (как element.findByCssSelector) возвращение Promises, а не команды, так что вы не можете вызвать click на результате.