web-dev-qa-db-ja.com

要素の子孫を検索する

分度器で子要素を選択する最良の方法は何ですか？以下のレイアウトがあるとしましょう...

_<div id='parent_1'>
    <div class='red'>Red</div>
    <div class='blue'>Blue</div>
</div>
<div id='parent_2'>
    <div class='red'>Red</div>
    <div class='blue'>Blue</div>
</div>
_

JQueryを使用すると、このようなことができます。

_var p1 = $('#parent_1');
var p1_red = $('.red', p1);  //or p1.find('.red');
var p1_blue = $('.blue', p1); //or p1.find('.blue');
_

しかし、分度器では、最初に親要素を取得するのが理にかなっていますか？これを行うと、var p1 = element('#parent_1');は、getText()または何かが呼び出されるまで、実際にオブジェクトを取得/検索しません。

そうすることで..

シナリオ1

_expect(p1.element('.red')).toBe('red');
expect(p1.element('.blue')).toBe('blue');
_

OR

シナリオ2

_expect(element('#parent_1').element('.red')).toBe('red');
expect(element('#parent_1').element('.blue')).toBe('blue');
_

OR

シナリオ3

_expect(element('#parent_1 > .red')).toBe('red');
expect(element('#parent_1 > .blue')).toBe('blue');
_

一方のアプローチには他方のアプローチよりも利点がありますか？

これは私がやっていることですが、親をcssSelectorから分離する利点があるかどうかはわかりません：

_function getChild(cssSelector, parentElement){
    return parentElement.$(cssSelector);
}

var parent = $('#parent_1');
var child_red = getChild('.red', parent);
var child_blue = getChild('.blue', parent);
_

分度器の elementFinder を見ると、これを行うことができます：

_function getChild(cssSelector, parentCss){
    return $(parentCss).$(cssSelector);
}

var child_red = getChild('.red', '#parent_1');
var child_blue = getChild('.blue', '#parent_1');
_
elementparent-childprotractorchaining
46
Brad8118

子を子cssセレクターから分離する利点は、親を他の何かに使用したい場合のみです。そうでない場合、expect(element('#parent_1 > .red')).toBe('red');のように、1回の呼び出しでやや高速になります。この場合、Protractorはブラウザーを2回呼び出す必要がないためです。

最初のアプローチを使用するもう1つの理由は、CSSで表現できないロケーター戦略を使用している場合です。例えば：

var parent = element(by.css('.foo'));
var child = parent.element(by.binding('childBinding'));
expect(child.getText()).toEqual('whatever');
58
Jmr