javascript - 如何等待按钮启用并用 puppeteer 单击？

Question

我有一个包含两个字段用户名和密码的表单。输入用户名后，将启用下一个按钮，单击它后，它会显示一个密码字段，输入后，它会再次启用下一个按钮。如何在表单更新之间等待按钮启用？

我尝试了以下方法，一种有注释，另一种没有。两者都不适合我。

(async () => {
    const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('http://localhost:9000/start#!');

await page.type('#login-form-un-field', 'xxxx')
// await page.waitForTarget('#default-next-btn:not([disabled])')
await page.$eval('#default-next-btn:not([disabled])', elem => elem.click());
// const btnNext = await page.$('#default-next-btn');
// btnNext.click();
await page.type('login-form-passcode', '1234');
await page.click('#default-next-btn');
await browser.close();
})();```

Thanks for the help in advance.

Edit: the button is always present on the page. It is just disabled while form entries are being validated.

Answer 1

等待按钮(或输入)不再被禁用，即 <button id="id" disabled>使用:not([disabled])在传递给 waitForSelector 的选择器字符串中。

示例:

page.waitForSelector('button#id:not([disabled])');