javascript - 通过 DOM 使用 JS 路径选择器输入登录文本的 Puppeteer 问题

Question

我正在尝试让 Puppeteer 登录各种网站。

在一个站点上，以下代码可以正常工作:

const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('https://www.site1.com');
await page.waitFor('input[name=UserID]');
await page.$eval('input[name=UserID]', el => el.value = 'myusername1');

这在其他网站上不起作用。用户名是一个名为 id="username" 的选择器。所以我运行它 headless=false 并打开登录页面，因此我得到了名为“用户名”的选择器的完整 JS 路径，即:

document.querySelector("body > banno-web > bannoweb-login").shadowRoot.querySelector("div > jha-card > article > bannoweb-login-form").shadowRoot.querySelector("#username")

我只是想输入用户名，但我不知道通过 DOM 获取用户名字段的语法。这不起作用:

await page.$eval('input[id=username]', el => el.value = 'myusername2');

Answer 1

使用page.evaluate

您可以使用 page.evaluate在页面本身上运行 JavaScript。

代码示例

const result = await page.evaluate(() => {
  document.querySelector("body > banno-web > bannoweb-login")
  .shadowRoot.querySelector("div > jha-card > article > bannoweb-login-form")
  .shadowRoot.querySelector("#username")
  .value = 'myusername2';
});

使用elementHandle.type

但是，对于焦点、输入等具有特殊事件处理程序的复杂应用程序(如 Angular 页面)在输入字段的值发生这样的更改时无法正常工作。为了表现得更像人，我们应该使用类似 elementHandle.type 的函数。相反。

代码示例

const jsHandle = await page.evaluateHandle(
  () => document.querySelector("body > banno-web > bannoweb-login")
  .shadowRoot.querySelector("div > jha-card > article > bannoweb-login-form")
  .shadowRoot.querySelector("#username")
);
const elementHandle = await jsHandle.asElement();
await elementHandle.type('myusername2');

此代码使用 page.evaluateHandle 和 jsHandle.asElement 从 JavaScript 选择器中获取 ElementHandle。之后使用elementHandle.type填充文本。