实习生:在Promise上循环。<array。<leadfoot element =“”>&gt;

时间:2015-08-28 13:46:34

标签: javascript promise this intern leadfoot

为了简单起见,我们说我有以下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>

我想在函数findAllByCssSelector(&#39; .child&#39;)返回的所有child元素中循环。特别是,如果div的ico为B,我只会点击label div子元素。

我记得,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()不存在 - 就像我失去了它的引用一样。此外,我还需要如果在循环结束时找不到标签,则应抛出异常。

我怎样才能实现这一目标?有人可以帮忙吗?

1 个答案:

答案 0 :(得分:4)

最简单的方法是使用Xpath表达式直接选择项目,如:

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

上面的表达式将找到第一个带有类&#34; ico&#34;的div。这是一个有班级和孩子的孩子&#34;孩子&#34;有一个孩子div与班级&#34;标签&#34;和文本内容&#34; B&#34;。

<强>更新

使用Xpath表达式几乎总是优于使用Leadfoot命令循环遍历元素,因为它的效率要高得多,但如果出于某种原因需要循环,则可以执行以下操作:

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. 当您在then回调
  2. 中执行异步操作时,需要从then回调中返回Promises / Commands
  3. 元素方法(如element.findByCssSelector)返回Promises,而非命令,因此您无法在结果上调用click