在 ES6(量角器页面对象）中创建实例的正确方法

Correct approach to create instance in ES6 (protractor page objects)

本文关键字：实例 创建 方法 ES6 量角器 对象 面对      更新时间：2023-09-26

刚开始学习ES6，我想使用量角器测试页面。首先，我想创建基本Web元素类，页面上的其他元素将从基类继承。

量角器具有选择器，您可以使用它们来选择元素并使用它们进行操作，例如单击： 

var button = element(by.css('.button'));
button.click();

所以基本上我想创建这样的东西：

class BaseElement {
  constructor(selector){
    this._element = element(selector);
  }
var button = new BaseElement(by.css('.button));
button.click();

由于某种原因它不起作用：

button.click();//button is an instance of base class BaseElement

它返回单击不是函数。

我可以在类中添加一些方法"单击"或"获取"方法，如下例所示，但我需要知道也许我错过了一些基本原则并且完全错误。在量角器中，有很多本机的，内置的元素函数，我不想在基类中为所有元素编写方法。

class BaseElement {
      constructor(selector){
         this._element = element(selector);
    }
    get element() {
        return this._element;
    }
}
var button = new BaseElement(by.css('.button));
button.element.click()//DON'T WANT TO USE THIS, LOOKING FOR USE of button.click() WITHOUT CREATING ANY METHODS IN CLASS IF POSSIBLE

如果量角器将ElementFinder作为一个类公开，你可能已经能够使用以下语法实现你想要的：

class BaseElement extends ElementFinder {
    constructor(selector){
        super(selector);
        // ...
    }
    // ... 
}

但是由于量角器不是用类编写的，因此这是行不通的。

或者，您可以将BaseElement定义为一个简单的函数，该函数使用您自己的一些自定义行为扩展给定元素（ElementFinder实例）：

function makeBaseElement(selector) {
    // add some properties to the element for the given selector and return it:
    return Object.defineProperties(element(selector), {
        "property1": {
            value: true,
            writable: true
        },
        "property2": {
            value: "Hello",
            writable: false
        }
        // etc.
    });
}
var button = makeBaseElement(by.css('.button));
button.click();

当然，这不是ES6，也不是类BaseElement button，但对于其余部分，它将元素行为与任何其他属性结合在一起。

您还可以查看创建代理的可能性，该代理将检测属性的 get/set 是否应转发到 _element 而不是主BaseElement对象。

相关文章：