Выберите дочерний элемент из родителя, используя двоюродный узел того же родителя

Я использую TestCafe Selectors для выбора элементов. Это сложный вложенный сценарий двоюродного ребенка.

Вот HTML, чтобы получить представление о том, что я упомянул выше:

html

На рисунке я упомянул 1 и 2, которые являются родительским элементом (имеющим тот же DOM), у которого есть внучатый дочерний элемент path, а в другом дереве внучатый дочерний элемент того же родителя - <span title='John' /span>. Мне нужен узел path, но нужно связать <span title='John' /span>, потому что все родители имеют одинаковый DOM.

Я не знаю, как разрешить эту ситуацию с помощью TestCafe. Должен ли я использовать jQuery? Если да, то как? Я много пробовал, но не мог понять.


javascript html jquery automated-tests testcafe
person Prr    schedule 08.03.2019    source источник
comment
Сэр, можно ли скопировать/вставить html-дом, чтобы понять вопрос?   -  person M. Gara    schedule 08.03.2019
comment
Я не могу вставить изображение. Я думал, что сделал, но он не появляется. Позвольте мне попытаться быстро исправить это   -  person Prr    schedule 08.03.2019

Ответы (2)


arrow_upward
3
arrow_downward

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")}`);
person hdorgeval    schedule 08.03.2019

arrow_upward
2
arrow_downward

В 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
person omikes    schedule 08.03.2019
comment
это тоже решение, но я ищу решение TestCafe, которое мне показалось более удобным. - person Prr; 12.03.2019