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

Question

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

环境：

• 傀儡版本：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

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

CODE

预期的结果是什么？ 选择输入字段并输入。

会发生什么？ 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');
})();