получить дескриптор элемента в контексте другого

Question

У меня есть типичная страница, содержащая разделы пар метка / поле, но с одним и тем же именем метки в разных разделах. Разделы названы так, чтобы я мог их идентифицировать по имени. HTML структурирован таким образом, что имя раздела является родственным элементом другого элемента, содержащего метку / поля

<div class="section">Business Address<\div>
<div>
  <div class="field">
    <div class="label">Country<\div>
    <input type="text">
....

Если бы я мог идентифицировать элемент метки, используя только селектор, я мог бы сделать что-то вроде: -

const siblingHandle = page.evaluateHandle(() => {
  const sectionLabelHandle = Array.from(document.querySelectorAll('.blah')).find(el=>el.textContent.includes('section label name'))
  return sectionLabelHandle.nextElementSibling
})
const label = await siblingHandle.$('label selector')

Но мне нужен дескриптор элемента label, чтобы я мог получить его родственное поле, чтобы я мог ввести в него значение.

Я не могу использовать siblingHandle. $ Eval (), поскольку он не возвращает дескриптор.

Я также рассмотрел использование page.waitForFunction, передавая дескриптор, чтобы его можно было использовать вместо «документа»

const labelHandle = page.waitForFunction(
  handle => Array.from(handle.querySelectorAll('sel')).find(el=>el.textContent.includes('text'),
  {},
  siblingHandle
)

но я получаю ошибку JSON за циклом, если я это делаю.

Итак, пара вопросов,

1) Есть ли способ получить братьев и сестер в Puppeteer без необходимости использовать nextElementSibling в функции оценки?

2) Как я могу найти элемент, содержащий указанный текст, но в контексте родительского дескриптора, а не документа?

Answer 1

Селекторы Xpath, в отличие от селекторов CSS, могут ответить на оба ваших вопроса.

Поиск элемента по заданному тексту: const xpathWithText = '//div[text()="Country"]';

Используя его, чтобы получить следующего брата: const xPathTextToSibling = '//div[text()="Country"]/following-sibling::input';

На практике:

const myInput = await page.waitForXPath(xPathTextToSibling);
await myInput.type('Text to type');

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