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

Question

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

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');
})();