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

我使用TestCafe选择器来选择元素。这是一个复杂的表亲子女嵌套场景

下面是HTML，以了解我上面提到的内容：

在图中，我提到了

1

和

2

，它们是父元素（具有相同的DOM），它们有一个孙子

路径

，而另一棵树中相同父元素的孙子是

。我需要

路径的节点

，但需要链接

，因为所有父节点都有相同的DOM

---

我不知道如何使用TestCafe解决这种情况。我必须使用jQuery吗？如果是的话，怎么办？我做了很多尝试，但没有弄明白。

在

jQuery

中，您可以使用class

projects-project-role

获取所有元素，然后在每个元素中搜索

path

标记和class

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

---

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

---

先生，可以复制/粘贴html dom来真正理解这个问题吗？我不能粘贴图像。我想是的，但它没有出现。让我试着快速解决这个问题，这也是一个解决方案，但我正在寻找我发现更方便的TestCafe解决方案。