如何在 ProtractorJS 中扩展 ElementFinder 对象？答案

【问题标题】：How to extend ElementFinder object in ProtractorJS?如何在 ProtractorJS 中扩展 ElementFinder 对象？
【发布时间】：2016-02-29 21:15:47
【问题描述】：

在使用 protractorJS 进行一些实验时，我注意到没有简单的方法可以从量角器扩展（继承）ElementFinder 对象以添加自己的函数。

例如，我想创建对象复选框，它会有额外的方法 - check() - 应该根据 isSelected() 的结果切换复选框。

我想出了代码 -

var ElementFinder = require('protractor/lib/element.js').ElementFinder;
var ElementArrayFinder = require('protractor/lib/element.js').ElementArrayFinder;

class CheckBox extends ElementFinder {
    constructor(loc) {
      var getWebElements = function () {
        var ptor = browser;
        var locator = loc;
        return ptor.waitForAngular().then(function() {
          if (locator.findElementsOverride) {
            return locator.findElementsOverride(ptor.driver, null, ptor.rootEl);
          } else {
            return ptor.driver.findElements(locator);
          }
        });
      }
  var ArrayFinderFull = new ElementArrayFinder(browser, getWebElements, loc);
  super(browser, ArrayFinderFull);
}

    check() {
    return this.isSelected().then(selected => selected? this.click() : null)
    }
}

但是 getWebElements 是从 protractor/element.js 复制粘贴 - https://github.com/angular/protractor/blob/3.1.0/lib/element.js#L131

这个复制粘贴让我心烦意乱。我认为应该有更合适的方式来扩展 ElementFinder。

有人继承了 protractorJS 中的 ElementFinder 吗？

【问题讨论】：

你能解决这个问题吗，我需要做同样的事情？
@shiva ，部分。请参阅下面关于我创建的 lib 的回答。您可以在那里找到代码示例。

标签： javascript angularjs protractor

【解决方案1】：

我不确定这会有所帮助，但这里是 something we did recently 可以在 ElementArrayFinder 上使用 takewhile() 方法。我们将以下内容放入onPrepare()：

protractor.ElementArrayFinder.prototype.takewhile = function(whileFn) {
    var self = this;
    var getWebElements = function() {
        return self.getWebElements().then(function(parentWebElements) {
            var list = [];
            parentWebElements.forEach(function(parentWebElement, index) {
                var elementFinder =
                    protractor.ElementFinder.fromWebElement_(self.ptor_, parentWebElement, self.locator_);

                list.push(whileFn(elementFinder, index));
            });
            return protractor.promise.all(list).then(function(resolvedList) {
                var filteredElementList = [];
                for (var index = 0; index < resolvedList.length; index++) {
                    if (!resolvedList[index]) {
                        break;
                    }
                    filteredElementList.push(parentWebElements[index])
                }
                return filteredElementList;
            });
        });
    };
    return new protractor.ElementArrayFinder(this.ptor_, getWebElements, this.locator_);
};

现在我们可以在element.all()的结果上使用takewhile：

element.all(by.repeater("row in rows")).takewhile(function (elm) {
    return elm.getText().then(function (text) {
        return some_condition_to_be_true;
    });
});

【讨论】：

【解决方案2】：

现在扩展 ElementFinder 更加简单，我称之为页面片段。

我什至创建了 lib 来解决这个问题（欢迎 PR！）-https://github.com/Xotabu4/protractor-element-extend

目前它仅适用于 ElementFinder，但我希望能够扩展 ElementArrayFinders 也是（计划为 2.0.0 版本）

更新

增加了对 ElementArrayFinder 继承的支持。

【讨论】：