搜索元素的后代

搜索元素的后代

用量角器选择孩子元素的最佳方法是什么? 说我们下面有布局

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

要么

情景2

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

要么

情景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');
采纳答案:

将孩子与孩子css选择器分开的优点只有当您想要使用父项以进行其他操作时。 否则,在一个调用中执行它的速度要快一些,如expect(element('#parent_1 > .red')).toBe('red'); 因为量角器在这种情况下不需要对浏览器进行两次调用。

使用第一种方法的另一个原因是,如果您使用的是不能在CSS中表达的定位器策略。 例如:

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

参考更多解答:搜索元素的后代,转载请保留搜索元素的后代

更多:parent-child