如何 return 量角器中父元素中的子元素

Question

我正在寻找一种方法 return 来自给定父元素块（使用页面对象）的子元素，并能够通过链接调用它们。例如，给定页面上的多个小部件：

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

我只想从第一个小部件块中获取名称和颜色。这适用于我的规范：

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

显然我做错了什么......我怎么能 return 只有第一个小部件块的子元素？

Answer 1

如果您 return 从 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');

Answer 2

我对 Protractor 不是特别了解，但是这里有两种 jQuery 方法可以从 "Widget 42" 到 "blue." 任何一种都可以变成页面中的函数目的。第一个取决于名称和颜色节点的顺序，而第二个则不是。

$('div.name:contains("Widget 42")').next().text()

$('div.name:contains("Widget 42")').parent().find('.color').text();

（但我更喜欢alecxe的解决方案。）

Answer 3

我发现 element.all 上的 map() 函数示例对这种情况非常有用：https://github.com/angular/protractor/issues/392#issuecomment-33237672 .

改编该示例会导致您的情况如下所示（未测试）

element.all(by.css('div[id*="widget"]')).map(function(el) {
  return {
    name: el.element(by.css('div.name')).getText(),
    color: el.element(by.css('div.color')).getText()
  }
});

因此，如果您可以使用 all 获取所有小部件，则可以创建名称和颜色的映射。

如何 return 量角器中父元素中的子元素

How to return child elements from within parent element in Protractor

javascript

testing

end-to-end

angularjs

protractor