Select 来自 parent 的 child 元素使用相同 parent 的堂兄弟节点

Question

我正在对 select 元素使用 TestCafe 选择器。这是堂兄child.

的复杂嵌套场景

这里是 HTML 以了解我上面提到的内容：

在图片中，我提到了 1 和 2 是 parent 元素（具有相同的 DOM）谁有一个 grand grand child path和同一个parent的grand grand child在另一棵树中是<span title='John' /span>。我需要 path 的节点，但需要 link <span title='John' /span> 因为所有 parent 都具有相同的 DOM.

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

Answer 1

在 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

编辑：或在 shorthand 中，并使用 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

Answer 2

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

Select 来自 parent 的 child 元素使用相同 parent 的堂兄弟节点

Select a child element from a parent using a cousin node of the same parent

html

javascript

jquery

automated-tests

testcafe