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

by

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: Haga Clic en esta página 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 de Puppeteer. Hay muchas herramientas disponibles que se pueden usar como un editor de código Java que incluye Visual Studio Code, Note Pad ++, Edit Plus, etc. Incluso podemos escribir código de titiritero en la aplicación predeterminada "Bloc de notas". En este "Instalar Titiritero" tutoriales, usaremos VSCode ya que es gratuito 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: Haga Clic en esta página 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 titiritero = require('titiritero'); //incluye la biblioteca Puppeteer puppeteer.launch({headless:true}).then(async browser => { const pageNew = await browser.newPage(); // Inicie el navegador console.log('Step1 - Open Browser'); / /Mostrar mensaje en espera de páginaNueva .setViewport({ ancho: 1280, alto: 800 }) en espera de páginaNueva .goto('https://techiescience.com/'); //Abrir LambdaGeeks //Capturar captura de pantalla en espera de páginaNueva .screenshot({ ruta : 'screenshot_lambda.png' }); console.log('Paso 2 - Navegar por LambdaGeeks y tomar captura de pantalla'); await browser.close(); console.log('Paso 3 - Navegador cerrado'); });

Este código debe almacenarse en el directorio raíz del proyecto de ejemplo de titiritero con el nombre del archivo ejemplo_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:

nodo npm 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 Buscar en Amazon
*/
const titiritero = require('titiritero');
const reportPathDir = 'C:\\\\LambdaGeeks\\\\puppteer_proj_sample\\\\output\\\\';
const captureFile = 'pantalla1.png';
intentar {
  (asincrónico () => {
    
\t//Crear una instancia de navegador y objeto de página y navegar hasta la URL
    const browserWeb = aguarda titiritero.launch({ sin cabeza: falso });
    const pageWeb = espera browserWeb.newPage()
    espere pageWeb.setViewport ({ ancho: 1280, alto: 800 });
    espere pageWeb.goto('https://www.amazon.in/');
\ t
\t//Ingrese los criterios de búsqueda de Amazon
\tlet searchBoxAmazon = await pageWeb.waitForXPath("//*/input[@id='twotabsearchtextbox']",{ visible: true });
\tif (searchBoxAmazon === nulo)
\t{
\t\tconsole.log('No se muestra la pantalla de Amazon');
\t}
\telse{\t\t
\t\tawait searchBoxAmazon.type("Libro de pruebas");
\t\tconsole.log('Se han ingresado criterios de búsqueda');
\t} \t\t
\ t
\t//Hiciste clic en el botón de búsqueda
\tlet btnSearchAmazon = await pageWeb.waitForXPath("//*/input[@id='nav-search-submit-button']",{ visible: true });
\tif (btnSearchAmazon === nulo)
\t{
\t\tconsole.log('El botón Buscar no se muestra');
\t}
\telse{
\t\tawait btnSearchAmazon.click();
\t\tconsole.log('Se hizo clic en el botón de búsqueda');
\t}\t
\ t
\t//Haga clic en un resultado de búsqueda específico
\tlet myBookAmazon = await pageWeb.waitForXPath("//*[contains(text(),'Selenium Testing Tools Cookbook Segunda edición')]",{ visible: true })
\tif (miLibroAmazon === nulo)
\t{
\t\tconsole.log('El libro no está disponible');
\t}
\telse{
\t\tawait myBookAmazon.click();
\t\tconsole.log('Haga clic en un libro específico para realizar el pedido');
\t} \t
\ t
\t// Identificar si se ha abierto la nueva pestaña
\tconst pageTarget = pageWeb.target();
\tconst newTarget = await browserWeb.waitForTarget(target => target.opener() === pageTarget);
\t//obtener el nuevo objeto de página:
\tconst page2 = espera newTarget.page();\t
\tawait page2.setViewport({ ancho: 1280, alto: 800 });
\ t
\t//Añadir al carrito
\tlet addToCartAmazon = await page2.waitForXPath("//*/input[@id='add-to-cart-button']",{ visible: true });
\tif (addToCartAmazon === nulo)
\t{
\t\tconsole.log('El botón Agregar al carrito no está disponible');
\t}
\telse{
\t\tconsole.log('Haga clic en el botón Agregar al carrito');
\t\tawait addToCartAmazon.click();\t\t
\t} \t\t
\t//Verificar el proceso de agregar al carrito\t
\tlet SuccessMessageAmazon = await page2.waitForXPath("//*[contains(text(),'Added to Cart')]",{ visible: true });
\tif (mensaje de éxitoAmazon === nulo)
\t{
\t\tconsole.log('El artículo no se agregó al carrito');
\t}
\telse{
\t\tconsole.log('El artículo se agregó al carrito correctamente');\t\t
\t} \t
\ t
\t// Capturar nº de carrito
\tlet cartCountAmazon = await page2.waitForXPath("//*/span[@id='nav-cart-count']",{ visible: true});
\tlet valueCount = await page2.evaluate(el => el.textContent, cartCountAmazon)
\tconsole.log('Recuento de carritos: ' + valueCount);
\tcartCountAmazon.focus();
\tawait page2.screenshot({ ruta: archivo de captura de pantalla });
\ t
\tawait pageWeb.waitForTimeout(3000);
\tawait página2.close();
\tawait pageWeb.close();
    espere browserWeb.close();
  })()
} atrapar (e) {
  consola.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  esta página para leer del portal de referencia.

     

Deja un comentario