Как подождать загрузку элемента в puppeteer?

Question

[Alex Ozerov]

Сайт easypay. сделан на ангуляре. я с помощью puppeteer логинюсь в лк, далее жму историю платежей > расширенный поиск > в поле "Інструмент платежу" и пытаюсь выбрать "грн", НО изначально в html этого нет. Cписок с вариантами выбора вставляется в код по клику, но puppeteer видимо ищет в начальном коде который он считывает сразу после загрузки. Как заставить его кликнуть по элементу списка? П.С. - "да, я вижу что в консоле пишет что он не находит элемент с этим айди, но в этом то и проблема, что после клика этот элемент существует";

const pup = require('puppeteer');
const fs = require('fs');
const cheerio = require('cheerio');

const user = {
    name: '[phone]',
    pass: 'password'
};


const parse = async () => {
    try {
        let browser = await pup.launch({headless: false});
        let page = await browser.newPage();

        await page.setViewport({
            width: 900,
            height: 1000
        })
        await page.goto('https://easypay.ua/ua/', { waitUntil: 'networkidle0' });

        await page.click(`button[class*="header__sign-in"]`);

        await page.focus(`input[id*="sign-in-phone"]`)
        await page.keyboard.type(`${user.name}`)

        await page.focus(`input[name*="password"]`)
        await page.keyboard.type(`${user.pass}`)

        await page.click(`#sign-in > div.sign-in_content > form > button`, {delay: 1000})

        await page.waitForTimeout(1000)
        await page.goto('https://easypay.ua/ua/profile/history', { waitUntil: 'networkidle0' });

        await page.click(`body > app-root > app-layout > app-main-layout > app-profile-component > app-history > main > section > app-history-search-form > form > div.profile-history__filter-more.small-16.column > span`, {delay: 1000})


        await page.click(`body > app-root > app-layout > app-main-layout > app-profile-component > app-history > main > section > app-history-search-form > form > div.profile-history__filter-tool.form-row.small-16.medium-8.large-4.column.ng-star-inserted > ng-select > div`, {delay: 2000})

        await page.click(`#a49f0f8a5e8e`, {delay: 2000}) // Клик по гривне
        

        // await page.click(`.is-dropdown-submenu-parent > ul > li:nth-child(2)`, {delay: 1000})


        // await browser.close()
    } catch (e) {
        console.error(e)
    }
}
parse();

Answer 1

[WbICHA]

https://github.com/puppeteer/puppeteer/blob/main/d...

Comments

[Alex Ozerov]

да, я пробовал, но к сожалению эта функция не помогает, он ждет до бесконечности, у элемента динамичный айди, по полному пути типа "body > div > ul > li:nth-child(3)" тоже не находит

[WbICHA]

Alex Ozerov, а в хтмле есть?
Сделай таймаут в 10 секунд и выведи результат:

const html = await page.evaluate(() => document.documentElement.outerHTML);

[Alex Ozerov]

WbICHA, да, в константе html элемент существует. Не пойму тогда, почему не находит.
все содержимое константы поместил в index.html. Далее написал вот такой код:

fs.readFile('index.html', 'utf-8', (err,data) => {
        if(err) console.log(err)

        let res = data.includes('ng-option-label');
        console.log(res) // true
    })

И он находит нужный мне селектор. Парадокс...

[WbICHA]

Alex Ozerov, ну тогда хз, я в пупитере не силён, сам недавно столкнулся, что он выдавал пустой пдф, хотя хтмл весь был. Проблему так и не решил, пошёл обходным путём, который для твоего случае неприменим.
Попробуй на том же стаковерфлоу спросить.

[Alex Ozerov]

WbICHA, stackoverflow как будто умер в разделе node.js. Решил вопрос тем что тупо перебирал комбинации селекторов, наверное с десяток минимум, и подошел самый нелогичный и неочевидный. Спасибо за внимание!