如何使用 Puppeteer 选择并输入具有动态生成属性的输入字段？

Question

我正在尝试自动登录 Cisco Webex 会议。在网上找不到任何东西，所以决定尝试 puppeteer 并制作我自己的脚本来做到这一点。所以我面临的问题是我无法选择输入字段，因为它们的属性是动态生成的。另外它们只有类属性。我尝试选择父 div 并缩小到输入范围，但它不起作用。page.evaluate()我还尝试使用和列出页面中的输入querySelectorAll()，然后使用 从中选择输入click()。但不知何故，我返回了一个空对象。我也尝试过添加6秒超时但仍然没有成功。顺便说一句，这在 Chrome 控制台中有效。我很困惑为什么它不能在带有 puppeteer 的节点中工作，它可以解决我的问题（也许）。我也尝试使用mouse.click()但没有成功（实际上我是木偶操纵者的新手，我不完全知道这个方法是如何工作的。尝试输入不同的轴但没有运气，如果这实际上应该是如何完成的）。如果我有错的地方请纠正我。任何帮助将非常感激。

环境：

• 傀儡师版本：5.3.1
• 平台/操作系统版本：Mac OS Catalina
• Node.js版本：14.9.0
• Chrome 版本：83.0.4103.116（官方版本）（64 位）
• 网址：https://glsuniversity.webex.com/webappng/sites/glsuniversity/meeting/download/20868835766c4fcf82b8a7fa60a27761 ?siteurl=glsuniversity&MTID=m84fbf6908602bde9fb8f025ee45308ac

哪些步骤将重现该问题？ 尝试选择动态生成属性的输入字段或按钮

代码

预期结果是什么？ 选择输入字段并在其中键入。

相反会发生什么？ Error: Evaluation failed: TypeError: Cannot read property of null

编辑1：直接选择输入给了我这个 Error: No node found for selector

编辑2：waitForSelector()给出timeout 30000ms exceeded错误

编辑3：编辑了我必须处理的确切链接

编辑4：我尝试获取占位符属性但没有运气

Answer 1

对我来说，当我也需要根据其父/祖先类唯一选择一个元素时，使用 xpath 似乎效果更好。

Puppeteer 的page.waitForXpath在处理这些元素时非常方便。

下面，我尝试了这些 API，并且能够在输入框中输入一些文本，然后单击按钮。

const puppeteer = require('puppeteer');
const SERVER_URL = "https://globalpage-prod.webex.com/signin?surl=https%3A%2F%2Fsignin.webex.com%2Fcollabs%2Fauth%3Flanguage%3Den_US&language=en_US";

(async () => {

    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.goto(SERVER_URL);

    let elem = await page.waitForXPath("//div[contains(@class, 'el-form')]//input");
    await elem.type('foo.bar@example.com');

    elem = await page.waitForXPath("//div[contains(@class, 'el-form')]//button");
    await elem.click();

    await page.close();
    console.log('Done');
})();