element - 搜索元素的后代

Question

使用 Protractor 选择子元素的最佳方法是什么？假设我们有下面的布局...

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

但是使用 Protractor 首先获取父元素有意义吗？因为执行此操作 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);

查看 Protractor 的 elementFinder我可以这样做:

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

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

Answer 1

只有当您想将父级用于其他用途时，才将子级与子级 css 选择器分开的优点。否则，在一次调用中执行此操作会稍快一些，例如 expect(element('#parent_1 > .red')).toBe('red'); 因为 Protractor 不需要创建两个在这种情况下调用浏览器。

使用第一种方法的另一个原因是您使用的定位器策略无法用 CSS 表达。例如:

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