How to extract dynamic content on puppeteer?

Question

Parsing

There is a site on which you need to click on an element, after which it loads the data through AJAX and displays them in a block. How to wait for block update and extract data?

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);
});

Answer 1

I solved the problem using the waitForSelector() method.
Here is (almost) ready-made code for extracting a number from Avito (we make it as a function and pass the link as an argument and that's it :) )

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);
});