Instalar Puppeteer: una excelente guía de aprendizaje del Tutorial Titiritero 4 y 5

Tutorial de titiritero - Imagen destacada

Puppeteer es una biblioteca js de nodo de código abierto que se puede utilizar para herramientas de raspado web. También se puede utilizar para realizar la automatización de pruebas en aplicaciones web. Hoy en día, el uso de Puppeteer está aumentando rápidamente en el espacio de prueba de software automatizado. Se requieren conocimientos básicos de la línea de comandos, Javascript y la estructura DOM de HTML para comprender el tutorial de titiritero. El tutorial completo se divide en los siguientes artículos. 

Tutorial de titiritero

Tutorial de Tosca # 1: Descripción general del titiritero

Tosca Tutorial # 2: Variables de entorno del titiritero

Tosca Tutorial # 3: Descripción general de la automatización de pruebas de titiritero y raspado web de titiritero

Tosca Tutorial # 4: Instalar Titiritero

Tosca Tutorial # 5: Proyecto de muestra de titiritero

En este Tutorial de Puppeteer, aprenderemos sobre los pasos para instalar Puppeteer con sus dependencias, como instalar NodeJs, instalar el editor para Puppeteer, etc. Además, después de la instalación, crearemos y ejecutaremos un proyecto de Puppeteer de muestra.

Instalar Titiritero

Para comenzar el desarrollo de los scripts de Puppeteer, necesitamos instalar y configurar los siguientes componentes: 

1. Instale NodeJS

2. Instalar Editor

3. Instalar Puppeteer

Instale NodeJS:

NodeJs es un entorno de servidor de código abierto gratuito que se puede ejecutar en diferentes plataformas. Utiliza javascript en el lado del servidor. Puppeteer es un tipo de aplicación de NodeJS. Entonces, el primer paso de la configuración de Puppeteer es instalar el marco NodeJS. El framework NodeJS está disponible para múltiples plataformas, incluyendo Windows, Ubuntu, macOS, etc. En este contexto, trabajaremos en la versión para el sistema operativo Windows de 64 bits. Los pasos para instalar NodeJS son:

Paso 1 # Descarga NodeJS: Hacé click aquí para navegar por el enlace de descarga de NodeJS. Aquí, descargaremos el instalador de Windows de 64 bits (.mts). 

Tutorial de titiritero - Instalar NodeJs
Tutorial de titiritero - Instalar NodeJs

Paso 2# Instale NodeJS: Después de completar la descarga, necesitamos instalar NodeJs haciendo doble clic en el archivo del instalador (.msi). Durante la instalación, debemos proceder de acuerdo con las instrucciones.

Paso 3# Verificar NodeJS: Después de completar la instalación, debemos abrir el símbolo del sistema e ingresar el comando como "nodo". Si aparecen los siguientes detalles, la instalación es correcta. En caso de que aparezca algún error, eso significa que la instalación no es correcta.

Tutorial de titiritero - Verificar NodeJs
Tutorial de titiritero - Verificar NodeJs

Instalar Editor para Titiritero:

Un editor no es más que una herramienta que nos ayuda a escribir, compilar y ejecutar nuestros códigos Puppeteer. Hay muchas herramientas disponibles que se pueden usar como editor de código Java que incluye Visual Studio Code, Note Pad ++, Edit Plus, etc. Incluso podemos escribir código titiritero en la aplicación predeterminada "Note Pad". En este tutorial de “Instalar Puppeteer”, usaremos VSCode ya que es gratis y fácilmente compatible con la aplicación NodeJS. VSCode no es más que un componente de Visual Studio, que está disponible de forma gratuita. Los pasos para instalar VSCode son: 

Step1 # Downloadd VSCode: Hacé click aquí para abrir el enlace de descarga y descargar la versión deseada de VSCode Installer según el sistema operativo.

Paso 2 # Instale VSCode: Instale VSCode desde el archivo de instalación en el sistema como cualquier otro software. Durante la instalación, proceda únicamente con la configuración recomendada.

Step2 # Verifique VSCode: Una vez completada la instalación, abra la aplicación para comprobar si está instalada correctamente.

Tutorial de titiritero - Editor para titiritero
Tutorial de titiritero - Editor para titiritero

Instalar paquetes de titiritero:

Desde la versión v1.7.0 de puppeteer, cada lanzamiento contiene a continuación dos paquetes:

  • paquete titiritero-core
  • paquete titiritero

Ambas versiones de Puppeteer se pueden instalar usando los comandos de la consola. Los comandos para instalar Puppeteer son: 

Instale el paquete Puppeteer-core: Es una colección de la biblioteca Node JS desarrollada en Java. Tiene la capacidad de trabajar en el protocolo devtools. El navegador Chromium no se descarga mientras se instala el paquete puppeteer-core. La interfaz programática de Puppeteer impulsa completamente la biblioteca del núcleo del titiritero. Otra limitación importante es que las características del núcleo del titiritero no se pueden alterar cambiando ninguna de las variables de entorno PUPPETEER_ *. 

Comando de instalación: npm instalar puppeteer-core

Nota: La herramienta Node JS debe instalarse antes de instalar el paquete puppeteer-core.

Instale el paquete de productos Puppeteer: Puppeteer es el producto completo desarrollado por Google para controlar los navegadores Chrome. Al ser el paquete completo de productos Puppeteer, las últimas versiones del navegador chromium se descargan durante la instalación. Después de eso, la instalación es impulsada por puppeteer-core. Es posible personalizar las funciones de Titiritero cambiando las variables de entorno PUPPETEER_ *. 

Comando de instalación: npm instalar titiritero

En este tutorial de “Instalar Puppeteer”, trabajaremos en la instalación del paquete Puppeteer ya que no hay muchas diferencias entre estas dos versiones.

Proyecto de muestra de titiritero

El Puppeteer es compatible con navegadores cromados con cabeza (no sin cabeza) y sin cabeza. En caso de estar sin cabeza, las actividades del navegador se realizan en segundo plano, es decir, la interfaz de usuario del navegador no es visible para nosotros. Hace que la cosa (controlar el navegador) sea más simple y fácil en un solo paso. Significa que lo mismo (controlar los navegadores) se puede hacer con varios pasos complejos.

Los pasos involucrados en la configuración del proyecto Puppeteer de muestra se muestran a continuación: 

Paso 1 # Cree una estructura de carpetas para el proyecto de ejemplo de titiritero: Cree un directorio raíz de muestra con el nombre "SampleProject" en una ruta predefinida. Este directorio raíz actuará como un proyecto de titiritero de muestra. A continuación, después de abrir el símbolo del sistema, debemos navegar a este directorio raíz.

Step2 # Instalar Titiritero: Usando el siguiente comando, podemos instalar el paquete completo de Puppeteer en el directorio raíz. Este comando básicamente descarga todas las bibliotecas NodeJS de código abierto en el proyecto de muestra carpeta. El procedimiento de instalación lleva algún tiempo según la velocidad de la red. Descargará aproximadamente 350 MB de datos. Después de la instalación, la carpeta node_modules, que contiene diferentes componentes de titiritero y el archivo package-lock.json, se creará en la carpeta raíz del proyecto de muestra Pupeteer.

Tutorial de titiritero - Registro de instalación
Tutorial de titiritero - Registro de instalación

Paso 3 # Crear ejemplo de guion de titiritero: Ahora, escribiremos un guión de muestra de titiritero que invoca los LambdaGeeks sitio web, muestra mensajes de la consola después de cada paso y captura la captura de pantalla. En este ejemplo, se invocará un navegador cromado sin cabeza en segundo plano. El guión de titiritero de muestra será: 

const puppeteer = require('puppeteer'); //include Puppeteer Library
 
puppeteer.launch({headless:true}).then(async browser => {
     const pageNew = await browser.newPage(); // Launch browser
     console.log('Step1 - Open Browser'); //Display message
     await pageNew .setViewport({ width: 1280, height: 800 })
     await pageNew .goto('https://lambdageeks.com/'); //Open LambdaGeeks
     //Capture Screenshot
     await pageNew .screenshot({ path: 'screenshot_lambda.png' });
     console.log('Step2 - Navigate LambdaGeeks and take screenshot');
     await browser.close();
     console.log('Step3 - Browser Closed');
 });

Este código debe almacenarse en el directorio raíz del proyecto de ejemplo de titiritero con el nombre del archivo sample_script.js. En el caso de Puppeteer-core, necesitamos incluir 'puppeteer-core' en lugar de 'titiritero' al comienzo del guión. Para el navegador completo, necesitamos reemplazar el código "{headless:true}” with “{headless:false}”.

Paso 4 # Ejecutar ejemplo de script de titiritero: El script de muestra se puede ejecutar desde el símbolo del sistema usando el siguiente comando:

npm node sample_script.js

Después de la ejecución, la captura de pantalla se capturará y almacenará en el directorio raíz como “'screenshot_lambda.png”.

Tutorial de titiritero - Ejemplo de proyecto titiritero
Tutorial de titiritero - Ejemplo de proyecto titiritero

Ahora mostraremos otro script de muestra de Puppeteer en la aplicación web de Amazon. Este script realizará los siguientes pasos junto con las verificaciones en cada paso:

  • Invocar la aplicación de Amazon.
  • Busca un libro predefinido.
  • Agregue el libro buscado al carrito.
  • Abra el carrito y compruebe si el libro está disponible en el carrito.
  • Capture la pantalla y cierre el navegador.

Solo repasaremos el siguiente guión. Aprenderemos en detalle sobre los diferentes pasos a realizar en el próximo artículo. El script de muestra se muestra a continuación:

/**
 * @name Search in Amazon
*/
const puppeteer = require('puppeteer');
const reportPathDir = 'C:\\LambdaGeeks\\puppteer_proj_sample\\output\\';
const screenshotFile = 'screen1.png';

try {
  (async () => {
    
	//Create browser and page object instance and navigate to the URL
    const browserWeb = await puppeteer.launch({ headless: false });
    const pageWeb = await browserWeb.newPage()
    await pageWeb.setViewport({ width: 1280, height: 800 });
    await pageWeb.goto('https://www.amazon.in/');
	
	//Enter the amazon Search criteria
	let searchBoxAmazon = await pageWeb.waitForXPath("//*/input[@id='twotabsearchtextbox']",{ visible: true });
	if (searchBoxAmazon === null)
	{
		console.log('Amazon screen is not displayed');
	}
	else{		
		await searchBoxAmazon.type("Testing Book");
		console.log('Search criteria has been entered');
	} 		
	
	//Clicked on search button
	let btnSearchAmazon = await pageWeb.waitForXPath("//*/input[@id='nav-search-submit-button']",{ visible: true });
	if (btnSearchAmazon === null)
	{
		console.log('Search button is not showing');
	}
	else{
		await btnSearchAmazon.click();
		console.log('Clicked on search button');
	}	
	
	//Click on specific search result
	let myBookAmazon = await pageWeb.waitForXPath("//*[contains(text(),'Selenium Testing Tools Cookbook Second Edition')]",{ visible: true })
	if (myBookAmazon === null)
	{
		console.log('Book is not available');
	}
	else{
		await myBookAmazon.click();
		console.log('Click on specific book to order');
	} 	
	
	// Identify if the new tab has opened
	const pageTarget = pageWeb.target();
	const newTarget = await browserWeb.waitForTarget(target => target.opener() === pageTarget);
	//get the new page object:
	const page2 = await newTarget.page();	
	await page2.setViewport({ width: 1280, height: 800 });
	
	//Add to cart
	let addToCartAmazon = await page2.waitForXPath("//*/input[@id='add-to-cart-button']",{ visible: true });
	if (addToCartAmazon === null)
	{
		console.log('Add to cart button is not available');
	}
	else{
		console.log('Click on add to Cart button');
		await addToCartAmazon.click();		
	} 		
	//Verify add to cart process	
	let successMessageAmazon = await page2.waitForXPath("//*[contains(text(),'Added to Cart')]",{ visible: true });
	if (successMessageAmazon === null)
	{
		console.log('Item is not added to cart');
	}
	else{
		console.log('Item is added to cart successfully');		
	} 	
	
	// Capture no of cart
	let cartCountAmazon = await page2.waitForXPath("//*/span[@id='nav-cart-count']",{ visible: true});
	let valueCount = await page2.evaluate(el => el.textContent, cartCountAmazon)
	console.log('Cart count: ' + valueCount);
	cartCountAmazon.focus();
	await page2.screenshot({ path: screenshotFile });
	
	await pageWeb.waitForTimeout(3000);    
	await page2.close();
	await pageWeb.close();
    await browserWeb.close();
  })()
} catch (e) {
  console.log(e)
}

Nota: Explicaremos los pasos detallados para escribir scripts en los próximos artículos.

Conclusión:

En este artículo introductorio sobre “Instalar Puppeteer” del “Tutorial de Puppeteer”, hemos explicado los pasos detallados para instalar diferentes paquetes de Puppeteer desde cero. La configuración del titiritero incluye diferentes instalaciones de componentes como, por ejemplo, instalar NodeJs, instalar VSCode, instalar Puppeteer, crear y ejecutar el proyecto de muestra Puppeteer. En el próximo tutorial de Puppeteer, explicaremos los pasos detallados para usar el Puppeteer como una herramienta de raspado web. Por favor haz click  aquí para leer del portal de referencia.

Sobre K Mondal

Hola, soy K. Mondal, estoy asociado con una organización líder. Tengo más de 12 años de experiencia laboral en varios dominios, por ejemplo, desarrollo de aplicaciones, pruebas de automatización, consultor de TI. Estoy muy interesado en aprender diferentes tecnologías. Estoy aquí para cumplir con mi aspiración y actualmente contribuyo como autor y desarrollador de sitios web en LambdaGeeks.
Conéctese a LinkedIn- https://www.linkedin.com/in/kumaresh-mondal/

Deja un comentario

Tu dirección de correo electrónico no será publicada.Los campos obligatorios están marcados *