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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32395997/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 03:05:04  来源:igfitidea点击:

Protractor - get child element of an element?

javascriptangularjsseleniumtypescriptprotractor

提问by Darkbound

I am trying to access child element of an ng-repeat element but I am having troubles doing that.

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

I have searched around about the problem and the solutions that I have found did not work for me. One of those solutions was to do something like this:

我已经搜索了这个问题,但我找到的解决方案对我不起作用。这些解决方案之一是做这样的事情:

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

When I try the childline I cant see the element function on the parent element..

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

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

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

If you see the screenshot above you will see the structure of the code of the page that I am trying to test.

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

I need to access the alt attribute of the image of the avatar and get its value (thats the Username of the User).

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

One thing that came to my mind is to use .getInnerHTML()on the ng-repeat row which will return a string with all that code. From there I can find the altattribute and its value with string manipulation but this seems too brute and I am sure that there has to be a better way.

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

Simply I want to be able to get row 4 from the repeater and get the Username of the user at row 4, that's all I wanna do actually.

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

回答by Darkbound

Try this,

试试这个,

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

(or)

(或者)

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

回答by Girish Sortur

You can get it directly using element.all()and get()locator in protractor. Here's how -

您可以直接在量角器中使用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
});

Hope this helps.

希望这可以帮助。

回答by Waltari

In Protractor element documentation it gives an example like this to find child elements, which is same as chaining element 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.$

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

回答by Julien d'Adhemar

this example could help :

这个例子可以帮助:

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

you can use nth-child() selector to access to a child element. In my example i used a plugin with 2 select with same classes and i wanted to click on a defined option in the select 1, and a second in the select 2.

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