在另一个元素的上下文中获取一个元素的句柄答案

【问题标题】：getting a handle on an element in the context of another在另一个元素的上下文中获取一个元素的句柄
【发布时间】：2018-05-21 03:19:21
【问题描述】：

我有一个典型的页面，其中包含标签/字段对的部分，但在不同部分具有相同的标签名称。这些部分已命名，因此我可以使用名称来识别它们。 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，传入句柄，这样就可以代替'document'使用了

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

但如果我这样做，我会收到一个循环 JSON 错误。

所以，有几个问题，

1) 有什么方法可以在 Puppeteer 中获得兄弟姐妹，而不必在评估函数中使用 nextElementSibling？

2) 如何在父句柄而不是文档的上下文中搜索包含指定文本的元素？

【问题讨论】：

您是否有理由不想特别使用元素的选择器？从你上面的sn-p，我应该可以做>>>> await page.type('div > div.field > input', 'inputed text', {delay: 100})

标签： puppeteer

【解决方案1】：

与 CSS 选择器相比，Xpath 选择器可以回答您的这两个问题。

通过指定文本搜索元素： 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');

您不需要在父句柄的上下文中搜索具有特定文本的元素，因为我上面使用的第二个选择器将为您提供要直接输入的元素的句柄。

【讨论】：