量角器 - 获取元素的子元素?

时间:2015-09-04 10:37:36

标签: javascript angularjs selenium typescript protractor

我正在尝试访问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行获取用户的用户名,这实际上就是我想做的。

4 个答案:

答案 0 :(得分:3)

试试这个,

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)

答案 1 :(得分: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
});

希望这有帮助。

答案 2 :(得分:0)

此示例可能会有所帮助:

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

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

答案 3 :(得分:0)

在Protractor元素文档中,它给出了一个类似的示例来查找子元素,这与链接元素find相同:

// 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。$