如何等待按钮被启用并点击 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

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

例子：

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

Answer 2

你可以使用await page.waitForSelector(selector)=>文档

你的代码变成：

(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.waitForSelector('YOUR_SELECTOR_1')
    await page.click('YOUR_SELECTOR_1')

    await page.type('login-form-passcode', '1234');

    await page.waitForSelector('YOUR_SELECTOR_2')
    await page.click('YOUR_SELECTOR_2')

    await browser.close();
})();