Dynamically load page contents

Question

Basically I am trying to create a function that when receiving a name variable, looks for the name of the player on the site of the game and returns the information of that player if it exists in the game record. For this I am using Puppeteer for the web Scrapping.

In short, I want the code, through Puppeteer, to enter the game page, enter the username sent by the user in the search box, click to search, update the list of players below revealing whether or not it contains the player, if it contains, click again on the link that will show to that player’s profile page, where I will be extracting the information such as patent, Exp, clan, etc...

The code I have so far is:

const puppeteer = require('puppeteer');

async function getProfile(Player){
    if(Player.toString().length > 12){
        console.log('O nome deve conter no máximo 12 caracteres!')
        return;
    }
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setViewport({
        width: 1920,
        height: 1080
    })
    await page.goto('https://br.crossfire.z8games.com/playerranking.html');
    await page.evaluate((Player) => {
        document.querySelector('input#searchranks').value = Player;
    }, Player).then(async() => {
        await page.click('input#submitsearch');
    })
}
getProfile('teste');

Just don’t know how I can do to return the HTML content of the updated page after function page.click(). Someone could give me a light and help me?

Answer 1

If the search is done on the same page you just need to wait for the result to load

await page.waitFor(5000)
// espera por 5 segundos

and continue scraping the page :)

await page.evaluate(() => {
    // ...
})

Edit: There are other methods Wait also.. I also advise developing with Puppeteer without headless mode for you to see the actions on the page with Chromium:

const browser = await puppeteer.launch({ headless: false });