Korrekter Ansatz zum Erstellen einer Instanz in ES6 (Objekte der Winkelmesserseite)

Question

Ich habe gerade angefangen, ES6 zu lernen, und ich möchte die Seite mit dem Winkelmesser testen. Zuerst möchte ich eine Basis-Web-Element-Klasse erstellen und andere Elemente auf der Seite werden von der Basisklasse geerbt.

Protractor hat Selektoren, die Sie Elemente auswählen und arbeiten mit ihnen verwenden können, zum Beispiel klicken:

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

Also im Grunde möchte ich, so etwas schaffen:

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

Aus irgendeinem Grund es funktioniert nicht:

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

es gibt zurück, dass Klick keine Funktion ist.

Ich kann einige Methoden "klicken" zur Klasse hinzufügen, oder "get" -Methode, wie im Beispiel unten, aber ich muss wissen, vielleicht habe ich einige grundlegende Prinzipien verpasst und es völlig falsch gemacht. In Protractor gibt es viele native, eingebaute Funktionen für Elemente und ich möchte keine Methoden für alle in der Basisklasse schreiben.

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 

Answer 1

Wenn Protractor ElementFinder als Klasse ausgesetzt würden Sie wahrscheinlich in der Lage gewesen wäre, zu erreichen, was Sie mit dieser Syntax wollen:

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

aber als Winkelmesser nicht mit Klassen geschrieben, ist dies nicht Arbeiten.

Alternativ können Sie BaseElement als eine einfache Funktion definieren, die ein bestimmtes Element (eine ElementFinder Instanz) mit einigen Ihrer eigenen benutzerdefinierten Verhalten erweitert:

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(); 

Natürlich ist dies ES6 nicht, noch ist button der Klasse BaseElement, aber für den Rest kombiniert es das Element Verhalten mit zusätzlichen Eigenschaften.

Sie könnten auch einen Blick auf die Möglichkeit werfen, eine proxy zu erstellen, die erkennen würde, ob das Get/Set einer Eigenschaft an _element anstelle des Hauptobjekts BaseElement weitergeleitet werden sollte.