Как извлечь динамический контент на puppeteer?

Question

[tempick]

Есть сайт, на котором нужно сделать клик по элементу, после чего он через AJAX подгружает данные и отображает их в блоке. Как дождаться обновления блока и извлечь данные?

const puppeteer = require('puppeteer');

let scrape = async () => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    await page.setDefaultNavigationTimeout(0);
    await page.setUserAgent('Mozilla/5.0 (Linux; Android 7.0; NEM-L51) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.81 Mobile Safari/537.36');
    await page.setViewport({width: 480, height: 920})
    await page.goto('https://m.avito.ru/samara/avtomobili/chevrolet_captiva_2009_2005746471');
    await page.click('a[data-marker="item-contact-bar/call"]');

    //вот это нужно выполнить после того как прошел клик и получить текст
    const result = await page.evaluate(() => {
        const phone = document.querySelector('span[data-marker="phone-popup/phone-number"]').innerText;
        return phone;
    });

};

scrape().then((value) => {
    console.log(value);
});

Comments

[twoone]

как минимум в данном примере scrape должна возвращать value

[tempick]

twoone, да, действительно, я дурак) Спасибо. Но проблема все же осталось - querySelector возвращает null, т.к. выполняется раньше чем был получен телефон и записан в блок. Тут скорее, решение не уровне библиотеки, а на уровне js, но я в нём слаб((

[twoone]

tempick, с этим помочь уже не смогу, так как это нужно на конкретном примере вникать. Кто его знает что там за разметка,как открывается попап (от этого очередь выполнения программы зависит) и т.д.

[tempick]

twoone, уже решил, опубликовал решение. Но все равно спасибо)

Answer 1

[tempick]

Решил проблему с помощью метода waitForSelector()

Вот (почти) готовый код для извлечения номера с авито (оформляем в виде функции и передаем ссылку как аргумент и всё :) )

const puppeteer = require('puppeteer');

let scrape = async () => {
    const browser = await puppeteer.launch({headless: true});
    const page = await browser.newPage();
    await page.setDefaultNavigationTimeout(0);
    
    //имитируем мобилку
    await page.setUserAgent('Mozilla/5.0 (Linux; Android 7.0; NEM-L51) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.81 Mobile Safari/537.36');
    await page.setViewport({width: 480, height: 920});
    
    //переходим по ссылке
    await page.goto('https://m.avito.ru/samara/avtomobili/chevrolet_captiva_2009_2005746471');
    
    //кликаем по ссылке "позвонить"
    await page.click('a[data-marker="item-contact-bar/call"]');
    
    //ждем, когда загрузится блок с номером
    await page.waitForSelector('span[data-marker="phone-popup/phone-number"]');
 
    //извлекаем номер и возвращаем
    const result = await page.evaluate(() => {
        return document.querySelector('span[data-marker="phone-popup/phone-number"]').innerHTML;

    });

    return result;


};

scrape().then((value) => {
    console.log(value);
});