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

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 并且它打开了登录页面，因此我得到了名为“username”的选择器的完整 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 填充文本。