O Puppeteer é um framework baseado em biblioteca node js que está disponível como código aberto. Ele pode ser usado para ferramentas de raspagem da web. Também é usado para ferramentas de automação de teste. Hoje em dia, o uso do Puppeteer está aumentando rapidamente no espaço de teste de software automatizado. Conhecimento básico de linha de comando, Javascript e estrutura HTML DOM é necessário para entender tutorial de marionetista. Todo o tutorial é segregado nos artigos abaixo.
Tutorial do Titereiro
Tutorial Tosca # 1: Visão geral do titereiro
Tosca Tutorial # 2: Variáveis de ambiente do titereiro
Tosca Tutorial # 3: Visão geral da criação da Web do Puppeteer e da automação do teste do Puppeteer
Tosca Tutorial # 4: Instale o Puppeteer
Tosca Tutorial # 5: Exemplo de projeto de titereiro
Tutorial Tosca # 6: Teste de automação de titereiro
Neste tutorial “Teste de automação do Puppeteer”, explicaremos as etapas detalhadas para a automação do Puppeteer desde o início. Os recursos abaixo serão explicados para entender os testes de automação do Puppeteer do zero -
· Instalar o Puppeteer
· Iniciar aplicativo da Web
· Identificar as propriedades do objeto no navegador Chrome
· Etapas de envio do formulário - Digite o texto, clique no evento, verificação
· Captura de tela
· Executar scripts para Puppeteer Automation
Automação de Marionetes
O teste é necessário para garantir a qualidade dos produtos de software. Existem vários níveis de teste definidos nos processos de desenvolvimento de software. Para testar as funcionalidades de um software, pode ser feito manualmente ou por meio de processo automatizado. Os principais objetivos dos testes de software automatizados são -
- Ciclo de execução de teste rápido.
- Evite as chances de erros humanos.
- Reduza o tempo de execução do teste.
- Reduza o tempo do ciclo de liberação.
- Ensine mais funcionalidade sem comprometer a qualidade.
- A execução múltipla pode ser feita em paralelo.
Puppeteer é uma biblioteca Node baseada em javascript que oferece uma interface de aplicativo de alto nível (API) para controlar o navegador Chrome sobre o protocolo Chrome DevTools. A maioria das operações manuais realizadas no navegador Chrome pode ser automatizada usando o Puppeteer. Portanto, o Puppeteer é uma boa escolha para testes de unidade em aplicativos da web de maneira rápida e fácil.
Abordagem de teste de automação de titereiro:
As etapas envolvidas com o teste de automação do Puppeteer são explicadas abaixo -
Etapa 1 # Identificar o cenário de teste funcional:
Mostraremos a abordagem passo a passo para realizar a automação do Puppeteer para o cenário abaixo -
· Inicie o navegador da web.
· Chame o aplicativo Amazon Web.
- Procure o livro “Livro de Teste”.
- Adicione o livro ao carrinho a partir do resultado.
- Abra o carrinho e verifique se o livro está disponível no carrinho.
- Capture a tela e feche o navegador.
Etapa 2 # Instale o Puppeteer e crie o caso de teste:
Crie um arquivo javascript vazio como “sample_script.js” em uma pasta específica. Aqui, consideraremos a pasta raiz como SampleProject. Para instalar o Puppeteer, usaremos o comando - “npm install puppeteer”. O procedimento de instalação leva algum tempo com base na velocidade da rede. Ele irá baixar aproximadamente 350 MB de dados. Após a instalação, a pasta node_modules, que contém diferentes componentes do puppeteer e o arquivo package-lock.json, será criada para a pasta raiz do projeto de amostra do Puppeteer.
Etapa 3 # Capturar propriedades de identificação do objeto de teste:
Podemos capturar as propriedades de identificação usando a ferramenta de desenvolvimento do navegador Chrome. Analisando as diferentes propriedades como id, nome, XPath, etc., iremos escolher a correta que pode ser usada no script para realizar qualquer operação. Neste tutorial “Teste de automação do Puppeteer”, usaremos o XPath no script. Abaixo as etapas a seguir para obter o XPATH ou qualquer outra propriedade,
1. Abra as Ferramentas do desenvolvedor que estão disponíveis em “Menu -> Mais ferramentas” e vá para a guia Elementos.
2. Usando a ferramenta Finder (clicando no ícone de seta disponível no canto superior esquerdo da guia Elementos), realce o objeto de teste do aplicativo. Aqui, vamos inspecionar a caixa de pesquisa.
3. Analise o código-fonte destacado para identificar as propriedades desejadas. Para obter a propriedade XPATH do objeto de teste, clique com o botão direito na seção destacada e clique em “Copiar-> Copiar Xpath” para copiar a propriedade XPATH para a área de transferência.
4. Agora, cole o Xpath na caixa de texto do localizador e pressione Enter para verificar se o Xpath está identificando o objeto de forma exclusiva.
5. Da mesma forma, precisamos capturar as propriedades de identificação de outro objeto de teste também.
Etapa 4 # Etapas de desenvolvimento da automação do Puppeteer:
Para concluir o caso de teste, precisamos realizar certas operações em páginas da web. Para cada operação, existem diferentes métodos disponíveis. Os métodos que são usados em nosso cenário para “Teste de Automação de Puppeteer” são explicados aqui.
Iniciar aplicativo - Depois de incluir o titereiro, precisamos iniciar o navegador usando o titereiro - método de lançamento. Uma referência de objeto pode ser passada para este método para definir para navegador headless ou headful. Em seguida, precisamos criar a instância do navegador da web necessária para navegar na URL. Aqui, a função assíncrona é usada para usar a palavra-chave await para lidar com o sincronizador da web.
//Inclui o pacote marionetista const puppeteer = require('puppeteer'); (async () => { //iniciando o navegador headless const browser = await puppeteer.launch({ headless: true }); //Cria instância do navegador const page = await browser.newPage(); //Navega para o url await page.goto('https://www.amazon.in/'); })()Todo o teste será feito em um navegador sem cabeça. Se quisermos abrir o navegador headful, precisamos passar o objeto para o método de inicialização como “{Sem cabeça: falso}”.
Verifique a existência - Precisamos usar o método página.waitForXpath que irá verificar a existência do Xpath e retornar a referência do objeto de teste. Ao testar a referência de retorno, podemos adicionar um ponto de verificação no caso de teste.
\tlet searchBox = await page.waitForXPath("//*[@id='twotabsearchtextbox']",{ visível: true });
\tif (searchBox === null) //Verificação do objeto de teste
\t{
\t\tconsole.log('A tela da Amazon não é exibida');
\t}Inserir dados - Usando o tipo método dessa referência de objeto, podemos inserir o texto.
await searchBox.type("Livro de testes");Clique no elemento - Da mesma forma, usando o clique método de qualquer referência de objeto, podemos realizar operações de clique.
let btnSearch = await page.waitForXPath("//*/input[@id='nav-search-submit-button']",{visible:true }); btnSearch.click();Imprimir mensagem no console - Usando o método console.log, podemos imprimir qualquer mensagem no console como saída.
console.log('O atraso do console foi gerado');Consulte a nova guia - Usando os métodos page.target e browser.waitforTarget, podemos verificar e armazenar a referência sobre a nova guia em uma variável.
\tconst pageTarget = página.target(); \tconst newTarget = aguarda navegador.waitForTarget(target => target.opener() === pageTarget); \t//obtém o novo objeto de página: \tconst página2 = aguarda newTarget.page();
Captura de tela - Usando o método página. Captura de tela, um instantâneo da página específica foi tirado e salvo de acordo com o nome do arquivo fornecido como um argumento.
aguardar page.screenshot({ path: 'screenshot1.png' });Fechar página e navegador - Usando o método fechar, podemos fechar a página da web e o navegador.
\tawait page.close(); \tawait navegador.close();
Tempo de espera - Em certos casos, é necessário aguardar o carregamento da página ou o término de qualquer tarefa dependente; precisamos pausar a execução por um tempo pré-definido. Para fazer isso, podemos usar o page.waitForTimeout método que pode pausar a execução com base no valor (em milissegundos) passado pelo argumento.
aguarde page.waitForTimeout(2000);
Agora aprendemos sobre as etapas técnicas básicas para automatizar nosso cenário funcional. Com base no conhecimento, podemos passar pelo caso de teste de automação do Puppeteer abaixo. A visão geral detalhada das classes e métodos usados com mais frequência será explicada em postagens subsequentes.
/**
* @nome Pesquisa na Amazon
*/
const titereiro = require('titereiro');
const reportPath = 'C:\\\\LambdaGeeks\\\\puppteer_proj_sample\\\\output\\\\';
const captura de tela = 'tela1.png';
// Usado para exportar o arquivo para um arquivo .docx
tentar {
(assíncrono() => {
navegador const = aguarda puppeteer.launch ({ headless: false });
const pageNew = aguarda navegador.newPage()
aguarde pageNew.setViewport({ largura: 1280, altura: 800 });
aguarde pageNew.goto('https://www.amazon.in/');
\t//Insira os critérios de pesquisa
\tlet searchBox = await page.waitForXPath("//*[@id='twotabsearchtextbox']",{ visível: true });
\tif (caixa de pesquisa === nulo)
\t{
\t\tconsole.log('A tela da Amazon não é exibida');
\t}
\telse{\t\t
\t\tawait searchBox.type("Livro de testes");
\t\tconsole.log('Os critérios de pesquisa foram inseridos');
\t} \t\t
\t//Clicou no botão de pesquisa
\tlet btnSearch = await pageNew.waitForXPath("//*/input[@id='nav-search-submit-button']",{ visível: true });
\tif (btnPesquisa === nulo)
\t{
\t\tconsole.log('O botão Pesquisar não está aparecendo');
\t}
\outro{
\t\tawait btnSearch.click();
\t\tconsole.log('Clicado no botão de pesquisa');
\t}\t
\t//Clique no resultado da pesquisa específico
\tlet myBook = await pageNew.waitForXPath("//*[contains(text(),'Selenium Testing Tools Cookbook Second Edition')]",{ visível: true })
\tif (meuLivro === nulo)
\t{
\t\tconsole.log('Livro não disponível');
\t}
\outro{
\t\tawait meuLivro.click();
\t\tconsole.log('Clique no livro específico para encomendar');
\t} \t
\t// Identifique se a nova aba foi aberta
\tconst pageTarget = pageNew.target();
\tconst newTarget = aguarda navegador.waitForTarget(target => target.opener() === pageTarget);
\t//obtém o novo objeto de página:
\tconst página2 = aguarda newTarget.pageNew();\t
\tawait page2.setViewport({ largura: 1280, altura: 800 });
\t
\t//Adicionar ao carrinho
\tlet addToCart = await page2.waitForXPath("//*/input[@id='add-to-cart-button']",{ visível: true });
\tif (addToCart === nulo)
\t{
\t\tconsole.log('O botão Adicionar ao carrinho não está disponível');
\t}
\outro{
\t\tconsole.log('Clique no botão Adicionar ao carrinho');
\t\tawait addToCart.click();\t\t
\t} \t\t
\t//Verificar o processo de adição ao carrinho\t
\tlet sucessoMessage = await page2.waitForXPath("//*[contains(text(),'Adicionado ao carrinho')]",{ visível: true });
\tif (successMessage === nulo)
\t{
\t\tconsole.log('O item não foi adicionado ao carrinho');
\t}
\outro{
\t\tconsole.log('O item foi adicionado ao carrinho com sucesso');\t\t
\t} \t\t
\t// Número de captura do carrinho
\tlet cartCount = await page2.waitForXPath("//*/span[@id='nav-cart-count']",{ visível: true});
\tlet valor = aguardar page2.evaluate(el => el.textContent, cartCount)
\tconsole.log('Contagem de carrinho: ' + valor);
\tcartCount.focus();
\tawait page2.screenshot({ caminho: captura de tela });
\t
\tawait pageNew.waitForTimeout(2000);
\tawait page2.close();
\tawait pageNew.close();
aguarde navegador.close();
})()
} pegar (errar) {
console.error(erro)
}Etapa 5 # Execução do teste de automação do Puppeteer:
Podemos iniciar a execução usando o comando nó sample_script.js por meio do prompt de comando. Durante a execução, o navegador Chromium será aberto e executado automaticamente as etapas funcionais e armazenará a captura de tela da página final. A captura de tela e a saída do console terão a aparência abaixo.
Conclusão:
Ao longo deste tutorial de teste de automação do Puppeteer, aprendemos sobre as etapas detalhadas do teste de automação do Puppeteer. No próximo tutorial do Titereiro, aprenderemos sobre a visão geral detalhada das classes e métodos de titereiro usados com mais frequência. Por favor clique SUA PARTICIPAÇÃO FAZ A DIFERENÇA para visitar o portal de referência para este Tutorial do Puppeteer.
Olá, sou K. Mondal e estou associado a uma organização líder. Tenho mais de 12 anos de experiência profissional em domínios, por exemplo, desenvolvimento de aplicativos, testes de automação, consultor de TI. Estou muito interessado em aprender diferentes tecnologias. Estou aqui para cumprir minha aspiração e atualmente contribuindo como autor e desenvolvedor de sites no LambdaGeeks.
Vamos nos conectar através do LinkedIn-