量角器 - 获取元素的子元素？答案

【问题标题】：Protractor - get child element of an element?量角器 - 获取元素的子元素？
【发布时间】：2015-11-30 11:46:33
【问题描述】：

我正在尝试访问 ng-repeat 元素的子元素，但我在这样做时遇到了麻烦。

我已经搜索了这个问题，但我发现的解决方案对我不起作用。其中一个解决方案是这样做：

var parent = element(by.repeater(''));
var child = parent.element(by.....);

当我尝试child 行时，我看不到父元素上的元素功能..

http://prikachi.com/images/11/8338011u.png

如果您看到上面的屏幕截图，您将看到我正在尝试测试的页面的代码结构。

我需要访问头像图像的 alt 属性并获取其值（即用户的用户名）。

我想到的一件事是在 ng-repeat 行上使用.getInnerHTML()，它将返回一个包含所有代码的字符串。从那里我可以通过字符串操作找到alt 属性及其值，但这似乎太粗鲁了，我确信必须有更好的方法。

我只是希望能够从中继器获取第 4 行并在第 4 行获取用户的用户名，这就是我真正想做的。

【问题讨论】：

标签： javascript angularjs selenium typescript protractor

【解决方案1】：

试试这个，

var parent = element(by.repeater('f in feed'));
var child = parent.all(by.xpath('//img[@alt="Pundeep"]')).first()

（或）

var parent = element(by.repeater('f in feed'));
var child = parent.all(by.xpath('//img[@alt="Pundeep"]')).get(0)

【讨论】：

感谢您的帮助。但是我正在尝试做一些不同的事情，例如我想在转发器中获取第 4 个元素（或上面示例中的第一个元素），然后获取 alt 属性的值，看看它是否是正确的用户名。 1. 获取转发器中的第 4 行， 2. 获取用户名图像的 alt 标记的值， 3. 将该值保存在变量中以备后用。

【解决方案2】：

您可以在量角器中使用element.all() 和get() 定位器直接获取它。方法如下 -

var child = element.all(by.repeater('parent_locator')).get(3); //gets 4th element in repeater. Its a 0 based index.
child.getAttribute('alt').then(function(user){
    var username = user; //username contains the alt text
});

希望这会有所帮助。

【讨论】：

【解决方案3】：

这个例子可能会有所帮助：

return element(by.css('select.custom-select:nth-child(1) option[value="12"]'));

您可以使用 nth-child() 选择器来访问子元素。在我的示例中，我使用了一个具有相同类的 2 选择的插件，我想单击选择 1 中定义的选项，然后单击选择 2 中的第二个选项。

【讨论】：

虽然这段代码 sn-p 可以解决问题，但它没有解释为什么或如何回答这个问题。请include an explanation for your code，因为这确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【解决方案4】：

在量角器元素文档中，它给出了一个这样的示例来查找子元素，这与链接元素查找相同：

// Chain 2 element calls.
let child = element(by.css('.parent')).
    $('.child');
expect(child.getText()).toBe('Child text\n555-123-4567');

// Chain 3 element calls.
let triple = element(by.css('.parent')).
    $('.child').
    element(by.binding('person.phone'));
expect(triple.getText()).toBe('555-123-4567');

// Or using the shortcut $() notation instead of element(by.css()):

// Chain 2 element calls.
let child = $('.parent').$('.child');
expect(child.getText()).toBe('Child text\n555-123-4567');

// Chain 3 element calls.
let triple = $('.parent').$('.child').
    element(by.binding('person.phone'));
expect(triple.getText()).toBe('555-123-4567');

https://www.protractortest.org/#/api?view=ElementFinder.prototype.$

【讨论】：