Как вы используете Puppeteer для работы с ручкой относительного элемента

Question

Учитывая это

<div class="slot">
  <div class="label">
    <span>Name</span>
  </div>
  <input type="text"/>
</div>

или это

<div class="button">
  <span class="button-wrap">
    ...
    <span class="caption">Save</span>
  </span>
<div>

Как мне работать с элементами, относящимися к тем, которые я могу идентифицировать? Я пытаюсь протестировать веб-интерфейс стороннего продукта, поэтому не имею никакого контроля над классами или идентификаторами, назначенными элементам, и во многих случаях элементы, с которыми я хочу работать, являются «анонимными» и различаются только элементами, относящимися к ним.

Это то, что я пробовал

const labelElement = page.evaluateHandle(
  () => {
    const labels = Array.from(document.querySelectorAll('.slot'))
    return labels.find(label => label.textContent === 'Name')
  }
)

Итак, я получаю элемент label, но как мне получить текстовый ввод?

Answer 1

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

Используйте .nextElementSibling, чтобы получить следующий непосредственный элемент родного брата. Т.е.,

const specificLabel = labels.find(label => label.textContent === 'Name')
const previousElem = specificLabel.previousElementSibling;
const nextElem = specificLabel.nextElementSibling;
const parentElem = specificLabel.parentElement;