No Chrome 89, o DevTools adiciona suporte experimental para scripts JS de geração automática no Puppeteer .
Esquematicamente, funciona assim: você abre a página desejada, habilita o registro das ações no DevTools e depois faz algo na página da maneira usual (clicar em links e botões, ir para outras páginas, inserir texto). Conforme as ações são realizadas, o navegador preenche a guia DevTools com um arquivo de registro virtual com código JS que descreve todas as ações por meio da API Puppeteer. Depois disso, você pode parar de gravar e salvar o código resultante como um arquivo JS real.
Para demonstrar a nova funcionalidade (chamada Puppeteer Recorder ), os autores prepararam uma pequena página de demonstração (embora você possa verificá-la em qualquer página, nenhuma pré-condição do site é necessária).
Mas primeiro, uma vez que este ainda é um recurso experimental inicial (embora os autores planejem desenvolver e expandir o Registrador de Puppeteer ), ele deve ser habilitado nas configurações do DevTools, na guia Experimentos, como um item do Registrador:
Agora você pode abrir o painel Fonte no DevTools e selecionar a guia Gravações que aparece nele:
Vamos adicionar um novo arquivo de gravação com o nome test01.js
:
E comece a gravar ações usando o botão Gravar na parte inferior da tela:
O navegador preenche imediatamente o arquivo com o código inicial e complementa o código após cada uma de nossas ações na página:
Após outro clique no botão Gravar, o navegador para de gravar, complementa o código com os colchetes de fechamento necessários e o arquivo resultante pode ser salvo:
:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto("https://jec.fyi/demo/recorder?");
{
const targetPage = page;
const frame = targetPage.mainFrame();
const element = await frame.waitForSelector("aria/your email");
await element.click();
}
{
const targetPage = page;
const frame = targetPage.mainFrame();
const element = await frame.waitForSelector("aria/your email");
await element.type("foo@bar.com");
}
{
const targetPage = page;
const frame = targetPage.mainFrame();
const element = await frame.waitForSelector("aria/your name");
await element.type("baz");
}
{
const targetPage = page;
const frame = targetPage.mainFrame();
const element = await frame.waitForSelector("html > body > main > form > input[type=number]:nth-child(3)");
await element.type("23");
}
{
const targetPage = page;
const frame = targetPage.mainFrame();
const element = await frame.waitForSelector("html > body > main > form");
await element.evaluate(form => form.submit());
}
await browser.close();
})();
Puppeteer Recorder :
( , ) ( , Puppeteer)
( ), ( , , , )
expect-, e2e-
, , Puppeteer Recorder ( ): , Puppeteer Recorder , , ( , Puppeteer). Puppeteer ( Cypress ), Jest , Playwright .
Uma vez que geralmente é caro para os desenvolvedores escrever e manter testes de integração (geralmente esses testes são menos estáveis e mais complexos do que os testes de unidade), essas ferramentas de teste de geração automática podem economizar significativamente tempo e recursos de negócios.