[英]Select a child element from a parent using a cousin node of the same parent
I'm using TestCafe Selectors to select elements. 我正在使用TestCafe选择器来选择元素。 This is a complex nested scenario of cousin child.
这是表亲孩子的复杂嵌套场景。
Here is the HTML to get an idea of what I mentioned above: 这是HTML,以了解我上面提到的内容:
In the picture, I have mentioned 1
and 2
which are the parent element (has same DOM) who has a grand grand child path
and the same parent's grand grand child in the other tree is <span title='John' /span>
. 在图片中,我提到了
1
和2
,它们是父元素(具有相同的DOM),具有宏大的子path
,而另一个树中的同一父母的大祖儿是<span title='John' /span>
。 I need the node of the path
but need to link <span title='John' /span>
because all the parents have the same DOM. 我需要
path
的节点,但需要链接<span title='John' /span>
因为所有父节点都有相同的DOM。
I don't know how to resolve this situation using TestCafe. 我不知道如何使用TestCafe解决这种情况。 Do I have to use jQuery?
我必须使用jQuery吗? If yes, then how?
如果是,那怎么样? I tried a lot but couldn't figure out.
我试了很多但是想不出来。
TestCafe API is smart enough to handle your case: TestCafe API非常智能,可以处理您的情况:
const JohnSelector = Selector('div.person-identity')
.find('span.person-name')
.withExactText('John');
const pathSelector = JohnSelector
.parent('div.projects-project-role')
.prevSibling('div.projects-project-role')
.find('button svg path')
.nth(1);
console.log(`${await JohnSelector.innerText}`);
console.log(`${await pathSelector.getAttribute("d")}`);
In jQuery
you can fetch all the elements with class projects-project-role
, and then search each of those elements for a path
tag and an element of the class person-name
, and add their values to an array, like this: 在
jQuery
您可以使用类projects-project-role
获取所有元素,然后在每个元素中搜索path
标记和类person-name
的元素,并将它们的值添加到数组中,如下所示:
var namePath = []; // initialize empty name/path array
$(".projects-project-role").each(function() { // go through each element of class projects-project-role
var path = $(this).find("path").attr("d"); // look for a path tag subelement and grab its d attribute
var name = $(this).find(".person-name").text(); // look for an element of class person-name and grab its text
namePath.push({path: path, name: name}); // add the gathered path and name to an array
});
console.log(namePath); // display the array
EDIT: Or in shorthand, and with map
: 编辑:或者用速记,并用
map
:
var namePath = $(".projects-project-role").get().map((p)=>({path: $(p).find('path').attr('d'), name: $(p).find('.person-name').text()}));
console.log(namePath); // display the array
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.