Como utilizar meu script com o meu HTML
22/12/2021
0
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!
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
Clique aqui para fazer login e interagir na Comunidade :)
