Puppeteer - 通过 xPath 获取元素

Question

嗨，我一直在到处寻找关于如何通过 xPath 查找元素的非常简单的解释。

我想要的只是一种简单的方法来查找元素，但我设法找到的所有帮助都需要执行

page.evaluate()

。这对我不起作用。这就是我正在尝试做的事情：

加载 URL > 等待页面完全加载（旋转器停止移动）> 查找给定 xpath 的

<input>

元素。

这是我的代码：

          await page.goto(url, { waitUntil: 'networkidle0' });

          console.log("Page Loaded");

          let loggedIn = await page.evaluate(() => {

            let emailInput = document.evaluate("//input[@type='email' and @placeholder='Email address']", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

            return{
              emailInput
            }

          });
          
          console.log(loggedIn);

当我这样做时，我没有获取元素，而是得到了 null

waitUntil : 'load'

当我这样做时，我变得不确定

waitUntil : 'networkidle0'

有没有更简单的获取元素的方法？也许像......

page.getElementByXPATH(xpath)

Answer 1

不幸的是，

page.evaluate()

只能传输可序列化的值（大致来说，JSON可以处理的值）。由于

document.evaluate()

返回一个或多个不可序列化的 DOM 元素（它们包含方法和循环引用），因此该元素将被替换为空对象或未定义的对象。您需要返回可序列化的值（例如，它们的文本、属性或数组/对象）或使用类似

page.$x(xpath)

和更复杂的

ElementHandle

API。

Answer 2

这篇文章中有一个小片段似乎正是这样做的：

await page.evaluate(() => {
    window.getElementByXpath = (xpath: string): HTMLElement | null => {
        return <HTMLElement | null>document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null)?.singleNodeValue;
    };
    const yourEl: HTMLElement | null = window.getElementByXpath(`xPath_selector`);
    const elText: string | null = usernameEl?.textContent || "Not found";
    return elText;
}