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>

如何处理与我能识别的元素相关的元素？我正在尝试测试第三方产品的Web界面，因此无法控制分配给元素的类或标识符，并且在许多情况下，我想要使用的元素是匿名的＃39;并且只能通过相对于它们的元素来区分。

这是我尝试过的

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;

你如何使用Puppeteer处理相对元素的句柄

1 个答案: