实习生：在Promise上循环。< Array。< leadfoot / Element>> [英] Intern: loop on Promise.<Array.<leadfoot/Element>>

问题描述

为简单起见，我假设我有以下DOM结构：

Let's say I have the following DOM structure, for simplicity:

<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（'。child'）返回的元素。特别是，如果div的标签是B，我会点击 ico div子元素。

I would like to loop within all child Element returned by the function findAllByCssSelector('.child'). In particular, I would click on the ico div subelement ONLY if the label of the div is B.

我会记得， findAllByCssSelector（）返回 Promise。< Array。< leadfoot /元素>> 。

通常我应该这样做：

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] 在getLisibleText（）中。然后是（）函数不存在 - 就像我失去了它的引用。此外，我还需要如果在循环结束时找不到标签，则应抛出异常。

I tried this code but did not work, because the elementArray[i] within the getVisibleText().then() function does not exist - it's like I lose its reference. Furthermore, I need also that if the label is not found at the end of the loop, an exception should be thrown.

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

How can I achieve that? Could anyone help, please?

推荐答案

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

The simplest way to do this would be to use an Xpath expression to select the item directly, like:

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

上面的表达式将找到第一个div，其类为ico，它是div的子级，其子类为child，其子级div为label类，文字内容B。

The expression above will find the first div with class "ico" that's the child of a div with class "child" that has a child div with class "label" and text content "B".

更新

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

Using an Xpath expression is almost always preferable to looping through elements using Leadfoot commands because it's significantly more efficient, but if looping is desired for some reason, you can do something like:

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. 当您在<$ c中执行异步操作时，需要从然后回调Promise / Commands $ c>然后回调


2. 元素方法（如 element.findByCssSelector ）返回Promises，而不是Commands，所以你不能打电话给点击结果。

1. You need to return Promises/Commands from then callbacks when you're performing async operations in the then callbacks
2. Element methods (like element.findByCssSelector) return Promises, not Commands, so you can't call click on the result.

这篇关于实习生：在Promise上循环。&lt; Array。&lt; leadfoot / Element&gt;&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！