Javascript 木偶问题：通过DOM使用JS路径选择器输入登录文本

我正在尝试让木偶演员登录到各种网站

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

const browser=wait puppeter.launch（{headless:false}）；
const page=wait browser.newPage（）；
等待页面。转到（'https://www.site1.com');
wait page.waitFor（'input[name=UserID]'）；
等待页面。$eval（'input[name=UserID]'，el=>el.value='myusername1'）；

这在其他站点上不起作用。用户名是一个名为

id=“username”

的选择器。因此，我运行了它

headless=false

，它打开了登录页面，因此我得到了名为“username”的选择器的完整JS路径，即：

document.querySelector（“body>banno-web>bannoweb登录”）.shadowRoot.querySelector（“div>jha-card>article>bannoweb登录表单”）.shadowRoot.querySelector（“用户名”）

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

wait page.$eval（'input[id=username]'，el=>el.value='myusername2'）；

使用

页面。评估

您可以使用在页面本身上运行JavaScript

代码示例

const result=wait page.evaluate（（）=>{
document.querySelector（“body>bannoweb>bannoweb登录”）
.shadowRoot.querySelector（“div>jha卡>文章>bannoweb登录表单”）
.shadowRoot.querySelector（“用户名”）
.value='myusername2'；
});

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

代码示例

const jsHandle=wait page.evaluateHandle(
（）=>document.querySelector（“body>bannoweb>bannoweb登录”）
.shadowRoot.querySelector（“div>jha卡>文章>bannoweb登录表单”）
.shadowRoot.querySelector（“用户名”）
);
const elementHandle=await jsHandle.asElement（）；
wait elementHandle.type（'myusername2'）；

此代码使用
page.evaluateHandle
和
jsHandle.asElement
从JavaScript选择器获取ElementHandle。然后，使用
elementHandle.type
填充文本。
第一部分有效，第二部分（page.type）无效。谢谢你！但是，由于某种原因，当我使用与第一个代码片段类似的代码添加用户名和密码时。。。“登录”按钮未激活。@也许您必须表现得更“人性化”，并使用
页面。请键入
，否则很难说没有看到页面。只有在使用DevTools时选择“复制选择器”而不是“复制JS路径”选项时，第一个代码段才起作用。我选择了“复制选择器”，得到的是：#username，所以我只使用了以下代码：
page.type（'#username'，myusername2'）并且通过Powershell的输出为：（节点：13608）未处理PromisejectionWarning:错误：找不到选择器的节点：#username@downstairs你能显示网页的HTML吗？或者你有网页的链接吗？如果不查看代码，则很难进行调试。：）@楼下改进了我的答案。它应该与第二个代码段一起使用。
input#username