Как дождаться включения кнопки и щелкнуть кукольником?

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

вы можете использовать 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();
})();

Answer 2

Правильный способ - использовать await page.waitFor(selector). Для получения дополнительной информации проверьте документы здесь

// First you wait for button to appear on screen
await page.waitFor('#default-next-btn');

// Then you click it
await page.click('#default-next-btn');