如何在Protractor中从父元素中返回子元素
How to return child elements from within parent element in Protractor
我正在寻找一种方法,从给定的父元素块中返回子元素(使用页面对象),并能够通过链接调用它们。例如,给定一个页面上的许多小部件:
<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');
很明显我做错了什么。。。如何仅返回第一个小部件块的子元素?
如果您要从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');
我不特别了解Protractor,但这里有两种jQuery方法可以从"Widget 42"到"blue"。任何一种都可以变成页面对象中的函数。第一个取决于名称和颜色节点的顺序,而第二个则不然。
$('div.name:contains("Widget 42")').next().text()
$('div.name:contains("Widget 42")').parent().find('.color').text();
(但我更喜欢alecxe的解决方案。)
我发现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来获取所有的小部件,那么您就可以创建一个名称和颜色的映射。
相关文章:
- react-让一个元素返回两个相邻的<tr>标签
- Javascript可见元素返回未定义
- 如果循环中至少有一个元素返回 false,如何将变量设置为 false
- 从异步调用返回数组,然后为数组的每个元素返回其他异步调用
- jQuery mMenu如何通过单击某些元素返回到上一节
- Ajax 元素返回完整的 html 代码
- Javascript:计算每个表的表行数,并向相应的元素返回一个值
- 激活 .stop() 后,将元素返回到其起始位置
- 访问 iFrame 中的元素返回空值
- Knockout.js 从 observableArray 中提取元素返回 undefined
- 获取 0 的文档元素返回什么
- scrollTop为javascript中的所有文档元素返回0,但滚动事件在body标记上触发
- 从Ajax生成的DOM元素返回id
- 如何在交换后将列表元素返回到其原始样式
- 文本元素返回"undefined"
- 从数组中获取随机元素返回相同的元素
- 从聚合物元素返回简单值
- React:将新插入的子元素返回给父元素以更新状态
- 元素返回NaN作为宽度
- 新添加的DOM元素返回null