Puppeteer é uma biblioteca node js de código aberto que pode ser usada para ferramentas de web scraping. Ele também pode ser usado para realizar automação de teste em aplicativos da web. Hoje em dia, o uso do Puppeteer está aumentando rapidamente no espaço de teste de software automatizado. É necessário conhecimento básico de linha de comando, Javascript e estrutura HTML DOM para entender o tutorial do titereiro. 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
Neste tutorial do Puppeteer, aprenderemos sobre as etapas para instalar o Puppeteer com suas dependências, como instalar NodeJs, instalar o editor do Puppeteer, etc. Além disso, após a instalação, criaremos e executaremos um projeto de amostra do Puppeteer.
Instale o Puppeteer
Para iniciar o desenvolvimento de scripts do Puppeteer, precisamos instalar e configurar os componentes abaixo -
1. Instale o NodeJS
2. Instale o Editor
3. Instale o Puppeteer
Instale o NodeJS:
NodeJs é um ambiente de servidor de código aberto gratuito que pode ser executado em diferentes plataformas. Ele usa javascript no lado do servidor. O Puppeteer é um tipo de aplicativo NodeJS. Portanto, a primeira etapa da configuração do Puppeteer é instalar a estrutura NodeJS. O framework NodeJS está disponível para múltiplas plataformas, incluindo Windows, Ubuntu, macOS, etc. Neste contexto, trabalharemos na versão para sistema operacional Windows 64 bits. As etapas para instalar o NodeJS são -
Etapa 1 # Baixe o NodeJS: Clique SUA PARTICIPAÇÃO FAZ A DIFERENÇA para navegar no link de download do NodeJS. Aqui, vamos baixar o instalador do Windows de 64 bits (.mts).
Passo 2# Instale o NodeJS: Após a conclusão do download, precisamos instalar o NodeJs clicando duas vezes no arquivo do instalador (.msi). Durante a instalação, devemos proceder de acordo com as instruções.
Passo 3# Verifique o NodeJS: Após a conclusão da instalação, precisamos abrir o prompt de comando e inserir o comando como “nó”. Se os detalhes abaixo estiverem aparecendo, a instalação está correta. No caso, se houver algum erro, isso significa que a instalação não está correta.
Instale o Editor para Puppeteer:
Um editor nada mais é que uma ferramenta que nos ajuda a escrever, compilar e executar nossos códigos Puppeteer. Existem muitas ferramentas disponíveis que podem ser usadas como um editor de código java que inclui Visual Studio Code, Note Pad ++, Edit Plus, etc. Até podemos escrever código de marionetista no aplicativo padrão “Note Pad” também. Neste “Instalar Marionetista” tutorial, usaremos o VSCode, pois é gratuito e facilmente compatível com o aplicativo NodeJS. O VSCode nada mais é que um componente do visual studio, que está disponível gratuitamente. As etapas para instalar o VSCode são –
Etapa 1 # Downloadd VSCode: Clique SUA PARTICIPAÇÃO FAZ A DIFERENÇA para abrir o link de download e baixar a versão desejada do VSCode Installer de acordo com o sistema operacional.
Etapa 2 # Instalar VSCode: Instale o VSCode a partir do arquivo do instalador no sistema como qualquer outro software. Durante a instalação, prossiga apenas com a configuração recomendada.
Etapa 2 # Verificar VSCode: Após a conclusão da instalação, abra o aplicativo para verificar se está instalado corretamente.
Instale os pacotes do Puppeteer:
A partir da versão v1.7.0 do titereiro, cada lançamento contém dois pacotes abaixo -
- pacote puppeteer-core
- pacote de titereiro
Ambas as versões do Puppeteer podem ser instaladas usando os comandos do console. Os comandos para instalar o Puppeteer são -
Instale o pacote Puppeteer-core: É uma coleção de biblioteca Node JS desenvolvida em Java. Ele tem a capacidade de trabalhar no protocolo devtools. O navegador Chromium não está sendo baixado durante a instalação do pacote puppeteer-core. A interface programática do Puppeteer dirige completamente a biblioteca principal do puppeteer. Outra limitação importante é que os recursos do puppeteer-core não podem ser alterados pela mudança de qualquer uma das variáveis de ambiente PUPPETEER_ *.
Comando de instalação: npm instalar marionetista-core
Observação: A ferramenta Node JS precisa ser instalada antes de instalar o pacote puppeteer-core.
Instale o pacote do produto Puppeteer: Puppeteer é o produto completo desenvolvido pela Google para controlar os navegadores Chrome. Sendo o pacote completo do produto Puppeteer, as versões mais recentes do navegador chromium são baixadas durante a instalação. Depois disso, a instalação é conduzida pelo núcleo do titereiro. É possível personalizar os recursos do Puppeteer alterando as variáveis de ambiente PUPPETEER_ *.
Comando de instalação: npm instalar titereiro
Neste tutorial “Instalar Puppeteer”, trabalharemos na instalação do pacote Puppeteer, pois não há muitas diferenças entre essas duas versões.
Exemplo de projeto de titereiro
O Puppeteer é compatível com navegadores cromados headful (não-headless) e headless. No caso de headless, as atividades do navegador são realizadas em segundo plano, ou seja, a IU do navegador não é visível para nós. Isso torna a coisa (controlar o navegador) mais simples e fácil em uma única etapa. Isso significa que a mesma coisa (controlar os navegadores) pode ser feita com várias etapas complexas.
As etapas envolvidas na configuração do projeto de exemplo do Puppeteer são mostradas abaixo -
Etapa 1 # Crie uma estrutura de pastas para o projeto de exemplo do Puppeteer: Crie um diretório raiz de amostra com o nome “SampleProject” em um caminho predefinido. Este diretório raiz funcionará como um Projeto de Amostra de Puppeteer. Em seguida, após abrir o prompt de comando, precisamos navegar até este diretório raiz.
Etapa 2 # Instalar o Puppeteer: Usando o comando abaixo, podemos instalar o pacote completo do Puppeteer no diretório raiz. Este comando basicamente baixa todas as bibliotecas NodeJS de código aberto no projeto de amostra pasta. 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 Pupeteer de amostra.
Etapa 3 # Criar amostra do script do Puppeteer: Agora, vamos escrever um exemplo de script de titereiro que invoca os LambdaGeeks site, exibe mensagens do console após cada etapa e captura a captura de tela. Neste exemplo, um navegador de cromo sem cabeça será invocado em segundo plano. O exemplo de Script do Puppeteer será -
const titereiro = require('titereiro'); //inclui Biblioteca Puppeteer puppeteer.launch({headless:true}).then(async browser => { const pageNew = await browser.newPage(); // Inicia o navegador console.log('Step1 - Open Browser'); / /Exibir mensagem aguarda pageNew .setViewport({ largura: 1280, altura: 800 }) aguarda pageNew .goto('https://techiescience.com/'); //Abrir LambdaGeeks //Capturar captura de tela aguarda pageNew .screenshot({caminho : 'screenshot_lambda.png' }); console.log('Etapa2 - Navegar no LambdaGeeks e fazer captura de tela'); await browser.close(); console.log('Etapa3 - Navegador fechado'); });Este código precisa ser armazenado no diretório raiz do projeto de titereiro de amostra com o nome do arquivo amostra_script.js. No caso de Puppeteer-core, precisamos incluir 'puppeteer-core' em vez de 'puppeteer' no início do script. Para o navegador headful, precisamos substituir o código “{headless:true}” with “{headless:false}”.
Etapa 4 # Executar amostra do script do Puppeteer: O script de amostra pode ser executado a partir do prompt de comando usando o comando abaixo -
nó npm sample_script.js
Após a execução, a imagem será capturada e armazenada no diretório raiz como “'screenshot_lambda.png”.
Agora vamos mostrar outro script de amostra do Puppeteer no aplicativo da web da Amazon. Este script será executado abaixo das etapas junto com as verificações em cada etapa -
- Chame o aplicativo Amazon.
- Pesquise um livro predefinido.
- Adicione o livro pesquisado ao carrinho.
- Abra o carrinho e verifique se o livro está disponível no carrinho.
- Capture a tela e feche o navegador.
Percorreremos apenas o script abaixo. Aprenderemos em detalhes sobre as diferentes etapas a serem executadas no próximo artigo. O script de amostra é mostrado abaixo -
/**
* @name Pesquise na Amazon
*/
const titereiro = require('titereiro');
const reportPathDir = 'C:\\\\LambdaGeeks\\\\puppteer_proj_sample\\\\output\\\\';
const screenshotFile = 'screen1.png';
tentar {
(assíncrono() => {
\t//Crie uma instância do navegador e do objeto de página e navegue até a URL
const browserWeb = aguarda puppeteer.launch({ headless: false });
const pageWeb = aguarda navegadorWeb.newPage()
aguarde pageWeb.setViewport({ largura: 1280, altura: 800 });
aguarde pageWeb.goto('https://www.amazon.in/');
\t
\t//Insira os critérios de pesquisa da Amazon
\tlet searchBoxAmazon = aguarda pageWeb.waitForXPath("//*/input[@id='twotabsearchtextbox']",{ visível: true });
\tif (searchBoxAmazon === nulo)
\t{
\t\tconsole.log('A tela da Amazon não é exibida');
\t}
\telse{\t\t
\t\tawait searchBoxAmazon.type("Livro de testes");
\t\tconsole.log('Os critérios de pesquisa foram inseridos');
\t} \t\t
\t
\t//Clicou no botão de pesquisa
\tlet btnSearchAmazon = await pageWeb.waitForXPath("//*/input[@id='nav-search-submit-button']",{ visível: true });
\tif (btnSearchAmazon === nulo)
\t{
\t\tconsole.log('O botão Pesquisar não está aparecendo');
\t}
\outro{
\t\tawait btnSearchAmazon.click();
\t\tconsole.log('Clicado no botão de pesquisa');
\t}\t
\t
\t//Clique no resultado da pesquisa específico
\tlet myBookAmazon = await pageWeb.waitForXPath("//*[contains(text(),'Selenium Testing Tools Cookbook Second Edition')]",{ visível: true })
\tif (meuBookAmazon === nulo)
\t{
\t\tconsole.log('Livro não disponível');
\t}
\outro{
\t\tawait myBookAmazon.click();
\t\tconsole.log('Clique no livro específico para encomendar');
\t} \t
\t
\t// Identifique se a nova aba foi aberta
\tconst pageTarget = pageWeb.target();
\tconst newTarget = aguarda navegadorWeb.waitForTarget(target => target.opener() === pageTarget);
\t//obtém o novo objeto de página:
\tconst página2 = aguarda newTarget.page();\t
\tawait page2.setViewport({ largura: 1280, altura: 800 });
\t
\t//Adicionar ao carrinho
\tlet addToCartAmazon = await page2.waitForXPath("//*/input[@id='add-to-cart-button']",{ visível: true });
\tif (addToCartAmazon === 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 addToCartAmazon.click();\t\t
\t} \t\t
\t//Verificar o processo de adição ao carrinho\t
\tlet sucessoMessageAmazon = await page2.waitForXPath("//*[contains(text(),'Adicionado ao carrinho')]",{ visível: true });
\tif (successMessageAmazon === 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 cartCountAmazon = await page2.waitForXPath("//*/span[@id='nav-cart-count']",{ visível: true});
\tlet valueCount = aguarda page2.evaluate(el => el.textContent, cartCountAmazon)
\tconsole.log('Contagem de carrinho: ' + valueCount);
\tcartCountAmazon.focus();
\tawait page2.screenshot({ caminho: screenshotFile });
\t
\tawait pageWeb.waitForTimeout(3000);
\tawait page2.close();
\tawait pageWeb.close();
aguarde navegadorWeb.close();
})()
} pegar (e) {
console.log(e)
}Observação: Explicaremos as etapas de detalhes para escrever scripts nos próximos artigos.
Conclusão:
Neste artigo introdutório sobre “Instalar o Puppeteer” do “Tutorial do Puppeteer”, explicamos as etapas detalhadas para instalar diferentes pacotes do Puppeteer do zero. A configuração do Puppeteer inclui diferentes instalações de componentes, como instalar NodeJs, instalar VSCode, instalar o Puppeteer, criar e executar o projeto de amostra do Puppeteer. No próximo tutorial do Puppeteer, explicaremos as etapas detalhadas para usar o Puppeteer como uma ferramenta de web scraping. Por favor clique SUA PARTICIPAÇÃO FAZ A DIFERENÇA para ler do portal de referência.
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-