2016-03-21 8 views
1

ちょうどES6を学習し始めました。私は分度器を使ってページをテストしたいと思います。最初に基本Web要素クラスを作成し、ページ上の他の要素を基底クラスから継承したいと考えています。ES6(分度器ページオブジェクト)でインスタンスを作成する正しい方法

分度器を使用すると、たとえば、要素を選択し、それらを操作するために使用できるセレクタを持ってクリックします。

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 

それは機能していないことを返します。

私はいくつかのメソッドをクラスに追加したり、以下の例のように "get"メソッドを追加することができますが、私はいくつかの基本原則を忘れてしまって完全に間違っているかもしれません。分度器には、要素のためのネイティブの組み込み関数がたくさんあり、それらのすべてのメソッドを基本クラスに記述したくありません。

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 
+0

あなたの 'BaseElement'クラスはそれ自身のメソッドを持っていますか?つまり、何のために必要なの? – Bergi

+1

分派器が 'ElementFinder'をクラスとして公開していたとしたら(' extends'で)思っていましたが、そのように書かれていないので、私はそれぞれのメソッドを再定義する別の方法はないと思います'BaseElement'です。 – trincot

+0

@Bergi私はあなたの質問を正しく理解していれば、いくつかのカスタムロジックですべての子要素を飾るために、フィーチャーで基本クラスを使いたいです。 – sk1llfull

答えて

3

分度器は、あなたはおそらく、あなたがこの構文で欲しいものを達成することができただろうクラスとしてElementFinderを公開していた場合は、次の

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

しかし、分度器をクラスと書かれていないとして、これではありませんワーキング。

また、独自のカスタム動作の一部を、指定された要素(ElementFinderインスタンス)を拡張し、簡単な関数としてBaseElementを定義することができます。もちろん

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ではなく、またbuttonですクラスBaseElementの残りの部分は、要素の動作と追加のプロパティを組み合わせています。

BaseElementオブジェクトの代わりに、プロパティの取得/設定を_elementに転送する必要があるかどうかを検出するproxyを作成することもできます。