使用同一父级的表亲节点从父级中选择一个子元素

Question

我正在使用TestCafe选择器来选择元素。这是表弟孩子的一个复杂的嵌套方案。

这里是HTML，可以使我对上面提到的内容有所了解：

在图片中，我提到了1和2，它们是父元素（具有相同的DOM），在其中有一个大孙子path和同一父辈的大孙子另一棵树是<span title='John' /span>。我需要path的节点，但需要链接<span title='John' /span>，因为所有父级都具有相同的DOM。

我不知道如何使用TestCafe解决这种情况。我必须使用jQuery吗？如果是，那怎么办？我尝试了很多，但不知道。

Answer 1

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")}`);

Answer 2

在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

编辑：或者简写为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