从带有puppeteer的元素中检索数据

Question

我需要程序点击10个元素，点击后，搜索选择器(#txtProdDescricao)。

URL: wavenfe.com.br/viewria nfeApplication/简单/produto.html

测试访问数据:
登录:wave
密码:1234

我使用的是puppeteer，如果我添加这样的代码:

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)

他把我送回控制台:

[
{ 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' }
]

也就是说，他没有单击元素并移动到下一个元素，以检索新数据。

如果我碰巧直接尝试通过导航器，它会给我带来与上面打印的结果相同的结果。然而，在浏览器中，为了解决它，我只是放了一个setTimeout()。但是如果我把setTimeout放到木偶中，控制台返回给我[]。

如何使脚本单击每个元素并检索该特定产品的数据?

谁能帮帮我，我是初学者。

Answer 1

每次单击链接时，页面都会发送XHR请求，获取数据并更新输入。因此，您需要等待响应或输入值更改。但也许最简单的变体是在异步回调中适当地添加超时:

// 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)