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

Question

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

5

我正试图自动登录Cisco Webex会议。在网上找不到任何资料，于是决定尝试使用puppeteer并编写自己的脚本来实现。所以我面临的问题是，我无法选择输入字段，因为它们的属性是动态生成的，而且它们只有类属性。我尝试选择父级div并缩小到输入，但失败了。我还尝试使用page.evaluate()和querySelectorAll()列出页面中的输入，然后使用click()从中选择输入。但不知何故返回一个空对象。我也尝试添加6秒的超时，但仍然没有成功。顺便说一句，这在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

期望的结果是什么？ 选择输入框并在其中输入。

实际发生了什么？ 错误：评估失败：类型错误：无法读取null属性

编辑1：直接选择输入框会给我这个 错误：找不到选择器的节点

编辑2：waitForSelector() 出现 超时30000ms 错误

编辑3：编辑了我需要处理的确切链接

编辑4：我尝试获取占位符属性，但没有成功

- Monarch Maisuriya

你可以尝试使用这样的选择器吗？'input[aria-label="Your email address"]' - vsemozhebuty

@vsemozhebuty 我尝试使用'input[placeholder="Your full name"]'，但是它给出了错误：未找到选择器的节点。我尝试使用waitForSelector()，但它会给出超时30000毫秒的错误。添加{timeout:0}会使进程停止（没有任何反应）。 - Monarch Maisuriya

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- yeniv · Accepted Answer

对我来说，当需要根据父/祖先类别唯一选择元素时，使用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');
})();