Como utilizar meu script com o meu HTML

22/12/2021

Ola bom dia professor! Minha duvida seria sobre um projeto que estou fazendo com o DOM e o puppeter. Bem eu criei uma pagina HTML onde tem o campo de input segue o site. (http://pontofull.com/robo/) bem eu queria que quando a pessoa colocasse o ID e clicasse em buscar ele rodasse esse script por baixo dos panos e mostrasse o email que ele localizou de acordo com o ID digitado mostrando um alert na pagina HTML no fim da execu��o do script. Com isso a parte que deveria ser preenchido dinamicamente de acordo com o que o usuario digitasse no input do HTML seria essa parte aqui (await page.type(''[name="lead_id"]'', ''12510759'')) onde esse valor setado de ''12510759'' deveria se preenchido dinamicamente de acordo com o que o usuario digitar o input do HTML e logo apos ele pegar esse ID ele rodasse todo o script normalmente mostrando no final o alert do email localizado.

Duvida!: Com isso minha duvida seria:

1� como eu faco para deixar o preenchimento do input do HTML dinamico de acordo com o que o usuario digitar ja ir direto para o script do puppeter.

2� Como eu chamo essa funcao do puppeter atraves do click no butao do HTML

3� como eu faco para que no final do script ele mostra um alert ou uma div mostrando o resultado "email" localizado.

const puppeteer = require(''puppeteer'');

; (async () => {

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

const page = await browser.newPage();

await page.goto(''https://cb10.td.commpeak.com/auth/login?redirect=/index/index'');

// - Acessando a p�gina de login

await page.click(''[name="username"]'');

await page.type(''[name="username"]'', ''felipepereira'');

await page.click(''[name="password"]'');

await page.type(''[name="password"]'', ''123456'');

let login = ''[name="submit"]'';

await page.click(login);

await page.goto(''https://cb10.td.commpeak.com/search/lead'', { waitUntil: ''domcontentloaded''});

await page.click(''[name="lead_id"]'');

await page.type(''[name="lead_id"]'', ''12510759'') // valor que deve ser preenchido dinamicamente de acordo com o que o usuario digitar no input do HTML

await page.click(''[type="submit"]'');

await page.waitForNavigation();

const resultado = ''body > div:nth-child(7) > table > tbody > tr > td.lead-email'';

await page.waitForSelector(resultado)

const titles = await page.evaluate((resultado) => {

const anchors = Array.from(document.querySelectorAll(resultado))

return anchors.map(anchor => anchor.textContent) // resultado deveria mostra na tela do HTML no final da execu��o do script

}, resultado)

console.log(titles)
})();

Segue o HTML:

<body>

<div class="limiter">
<div class="container-login100" style="background-image: url(''images/fundo.jpg'');">
<div class="wrap-login100 p-t-190 p-b-30" style="margin-top: -95px">
<form class="login100-form validate-form">
<div class="login100-form-avatar">
<img src="robo.gif" alt="AVATAR">
</div>

<span class="login100-form-title p-t-20 p-b-45">
Rob么 ID
</span>

<div class="wrap-input100 validate-input m-b-10" data-validate = "Digite um ID valido">
<input class="input100" id="idValor" type="number" name="username" placeholder="Digite o ID">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-user"></i>
</span>
</div>

<div class="container-login100-form-btn p-t-10">
<button class="login100-form-btn" id="btnClique">
Buscar
</button>
</div>

</form>
</div>
</div>
</div>

Obrigado pela aten��o!

Felipe Pereira

Curtir t�pico + 0

Responder