javascript - 如何从 Protractor 中的父元素返回子元素

Question

我正在寻找一种从给定父元素 block (使用页面对象)返回子元素的方法，并能够通过链接调用它们。例如，假设页面上有许多小部件:

<div id="widget-1">
  <div class="name">Widget 42</div>
  <div class="color">Blue</div>
</div>
<div id="widget-2">
  <div class="name">Widget 23</div>
  <div class="color">Red</div>
</div>

还有一个页面对象，widgetPage:

this.widget = function(num) { return $('div#widget-' + num) };

我只想从第一个小部件 block 中获取名称和颜色。这在我的规范中有效:

expect(widgetPage.widget('42').$('color').getText()).toBe('Blue');

但我不想在我的规范中包含选择器代码；我希望它位于它所属的页面对象中。我一直无法找到一个好的方法来做到这一点。我尝试过各种事情，例如...

this.getWidgetElms = function(num) {
    return this.widget(num).then(function(w) {
        return {
            name: w.$('div.name'),
            color: w.$('div.color')
        };
    });
};
// fails because name and color are undefined... 

最终，我希望能够做这样的事情(不起作用):

expect(widgetPage.getWidgetElms('42').color.getText()).toBe('Blue');

显然我做错了什么...我怎样才能只返回第一个小部件 block 的子元素？

Answer 1

如果您要从 widget 函数返回一个对象会怎样:

this.widget = function (num) {
    var elm = element(by.css('div#widget-' + num));
    return {
        widget: elm,
        name: elm.element(by.css('div.name')),
        color: elm.element(by.css('div.color'))
    };  
};

然后，在您的规范中:

var widget = widgetPage.widget('42');
expect(widget.name.getText()).toBe('Widget 42');
expect(widget.color.getText()).toBe('Blue');