javascript - Retrieve data from elements with puppeteer

Question

I need the program to click on 10 elements, after clicking, search for the selector (#txtProdDescricao).

URL: wavenfe.com.br/viewria/nfeApplication/simple/produto.html

Data for test access:
Login: wave
Password: 1234

I'm using puppeteer, if I add the code like this:

    const list = await page.$$eval("tbody > tr > td:nth-child(1) > span > a", element => {
        const produtos = []
            element.forEach((element, index) => {
                dados = {}
                element.click()
                dados.nome = document.querySelector('#txtProdDesc').value
                dados.codigo = document.querySelector('#txtProdCodigo').value
                produtos.push(dados)
        })
        return produtos
    })
    console.log(list)

He returns me to the console:

[
  { nome: '', codigo: '3005' },
  { nome: '', codigo: '3005' },
  { nome: '', codigo: '3005' },
  { nome: '', codigo: '3005' },
  { nome: '', codigo: '3005' },
  { nome: '', codigo: '3005' },
  { nome: '', codigo: '3005' },
  { nome: '', codigo: '3005' },
  { nome: '', codigo: '3005' },
  { nome: '', codigo: '3005' }
]

That is, he is not clicking on the elements and moving on to the next one, to retrieve new data.

If by chance I try directly through the navigator, it brings me the same result that I printed above. However, in the browser, to resolve it, I just put a setTimeout(). But if I put the setTimeout in the puppeteer, the console returns me [].

How do I make the script click on each element and retrieve the data for that particular product?

Can someone help me please, I'm a beginner.

question from:https://stackoverflow.com/questions/65924928/retrieve-data-from-elements-with-puppeteer

Answer 1

Each time you click on the link, the page sends XHR request, gets the data, and updates the inputs. So you need to wait for responses or input value changes. But maybe the simplest variant is to properly add timeouts in the async callback:

// Make the callback async:
const list = await page.$$eval("tbody > tr > td:nth-child(1) > span > a", async (element) => {
    const produtos = []
    // Use for...of loop:
    for (const elem of element) {
        dados = {}
        elem.click()
        // Add a timeout:
        await new Promise(resolve => setTimeout(resolve, 5000))
        // Go on:
        dados.nome = document.querySelector('#txtProdDesc').value
        dados.codigo = document.querySelector('#txtProdCodigo').value
        produtos.push(dados)
    }
    return produtos
})
console.log(list)