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')

但我需要的是标签元素上的句柄，以便我可以获得其兄弟字段，以便我可以在其中键入值。

我不能使用siblingHandle。$ eval（），因为它没有返回句柄。

我还考虑过使用page.waitForFunction，传入句柄以便可以用来代替＆＃39; document＆＃39;

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

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

所以，有几个问题，

1）有没有办法让Puppeteer中的兄弟姐妹不必在评估函数中使用nextElementSibling？

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

Answer 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');

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

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

1 个答案: