Automatizar pruebas con Puppeteer y Edge: guía práctica completa

Automatizar pruebas end‑to‑end en Microsoft Edge con Puppeteer es hoy una jugada segura: Edge está basado en Chromium y Puppeteer habla el mismo idioma (CDP), así que encajan como un guante para pruebas rápidas, fiables y con control fino del navegador.

En esta guía hilamos fino con todo lo que necesitas: instalación, diferencias entre puppeteer y puppeteer-core, arranque de Edge con y sin interfaz, detección del ejecutable, ejemplos de código (Mocha/Chai, Page Object Model, formularios, capturas), trucos de depuración, integración en CI/CD y herramientas del ecosistema (DevTools Protocol, Playwright, WebDriver, webhint, Pruebas de origen), además de notas sobre wrappers como Puppeteer‑Sharp o el paquete de Dart.

Qué es Puppeteer y por qué encaja con Microsoft Edge

Puppeteer es una librería de Node.js que controla navegadores basados en Chromium (Chrome y Edge) mediante el Chrome DevTools Protocol (CDP). Por defecto arranca en modo headless (sin UI), pero puedes mostrar la ventana para ver la ejecución en vivo.

Edge y Puppeteer funcionan mano a mano porque Edge comparte la base Chromium. Así, con puppeteer-core puedes dirigir una instalación existente de Microsoft Edge, aprovechando su motor real y evitando descargar Chromium extra si ya tienes Edge instalado.

¿Para qué lo usarás en el día a día? Pruebas de GUI, scraping de contenido dinámico, mediciones de rendimiento, generación de PDF/capturas y validaciones de regresión visual, todo con una API de alto nivel y gran estabilidad.

Instalación: puppeteer vs puppeteer-core

Existen dos sabores que conviene distinguir: puppeteer (paquete completo que descarga Chromium) y puppeteer-core (ligero, no descarga navegador y se conecta a un ejecutable existente como Edge).

Instalación recomendada para Edge si ya tienes el navegador: usa puppeteer-core con npm o yarn para ahorrar descargas y trabajar directamente sobre tu Edge local.

Comandos rápidos de instalación para el núcleo: npm i puppeteer-core o yarn add puppeteer-core, asegurándote de tener Node actualizado (en guías antiguas se citan v8.9+ y soporte de async/await desde v7.6; hoy en día se recomienda v14+).

Arrancar Microsoft Edge con puppeteer-core paso a paso

La secuencia típica es crear la instancia del navegador, abrir una nueva página, navegar a una URL y realizar acciones (clics, escrituras, capturas). Con Edge solo necesitas indicar el ejecutable correcto.

Ejemplo mínimo funcional que abre Edge, visita una página y guarda una captura. Sustituye la ruta si prefieres localizarla de forma programática (lo vemos en la siguiente sección).

const puppeteer = require('puppeteer-core');

(async () => {
  const browser = await puppeteer.launch({
    executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
    headless: true
  });
  const page = await browser.newPage();
  await page.goto('https://www.microsoft.com/edge/download/insider');
  await page.screenshot({ path: 'example.png' });
  await browser.close();
})();

Si usas macOS o Linux, ajusta executablePath a la ubicación de Edge en tu sistema (por ejemplo, en macOS Canary podría ser /Applications/Microsoft\ Edge\ Canary.app/Contents/MacOS/Microsoft\ Edge\ Canary).

Localizar la ruta ejecutable de Edge (manual y programática)

Método manual sencillo: escribe edge://version en la barra de direcciones de Edge y copia la Ruta de acceso ejecutable que aparece en esa página.

Vía programática en Node: usa el paquete edge-paths para recuperar la ruta correcta en cada SO y así no codificar valores específicos.

const edgePaths = require('edge-paths');
const EDGE_PATH = edgePaths.getEdgePath();

// Luego úsalo en el launch
const puppeteer = require('puppeteer-core');
(async () => {
  const browser = await puppeteer.launch({ executablePath: EDGE_PATH });
  const page = await browser.newPage();
  await page.goto('https://www.microsoft.com/edge/download/insider');
  await page.screenshot({ path: 'edge-insider.png' });
  await browser.close();
})();

Ventaja de este enfoque multiplataforma: tu pipeline o tu equipo no tienen que editar el path a mano en Windows, macOS o Linux.

Modos de ejecución: headless y con interfaz

Headless es más rápido y ligero, ideal para CI/CD. Puedes alternar a UI visible (headful) para ver qué ocurre en cada paso, o activar slowMo para depurar interacciones.

Novedad en versiones modernas: Puppeteer puede usar un modo headless basado en chrome-headless-shell configurando headless: ‘shell’, lo que mejora rendimiento en ciertos entornos.

const browser = await puppeteer.launch({
  executablePath: EDGE_PATH,
  headless: 'shell', // o true/false según necesites
  args: ['--no-sandbox'] // útil en contenedores
});

Ten en cuenta compatibilidades: algunas funciones como la impresión a PDF pueden requerir headless true en determinadas versiones; verifica en tu pipeline.

Ecosistema de herramientas relacionadas en Edge

• Protocolo DevTools: es la base de Puppeteer. Permite instrumentar, inspeccionar, depurar y perfilar navegadores, incluido Microsoft Edge, con paridad de APIs respecto a Chromium.
• Pruebas de origen (Origin Trials): mecanismo para evaluar APIs experimentales en sitios reales por tiempo limitado, aportando feedback a los equipos de estándares y a los ingenieros del navegador.
• Playwright: alternativa de alto nivel con soporte multibrowser mediante una única API, fiable y rápida, también compatible con Edge. Útil si necesitas cubrir Firefox y WebKit en paralelo.
• WebDriver: estándar para automatizar navegadores simulando interacción real del usuario (ventanas, pestañas, eventos del SO). Ventajoso cuando buscas cobertura entre navegadores y lenguajes.
• webhint y su extensión para VS Code: linting de buenas prácticas que detecta problemas comunes de accesibilidad, rendimiento, compatibilidad cross‑browser, PWA y seguridad, integrable en tu flujo de trabajo.

Puppeteer vs Selenium: cuándo elegir cada uno

Puppeteer brilla en velocidad y control sobre navegadores Chromium, con API sencilla para equipos JS/Node y gran precisión de acciones, perfecto para pruebas headless o scraping avanzado.

Selenium aporta amplitud (browsers e idiomas): si tu objetivo es validar en Chrome, Firefox, Safari y Edge y/o tu equipo programa en Java, C#, Python o Ruby, la cobertura y ecosistema de Selenium siguen siendo una garantía.

¿Y en Edge concreto? Si solo apuntas a Edge/Chromium, Puppeteer es directo, rápido y muy estable; si tu matriz de compatibilidad exige más navegadores, plantéate Selenium o Playwright.

Buenas prácticas de testing con Mocha/Chai y Page Object Model

Mocha como test runner y Chai como librería de aserciones encajan perfecto con Puppeteer. beforeEach/afterEach ayudan a abrir/cerrar el navegador y mantener tests aislados.

Page Object Model (POM) estructura el proyecto en clases por página, encapsulando selectores y acciones. Con ello mejoras mantenibilidad, reusabilidad y legibilidad de las pruebas.

// pages/HomePage.js
class HomePage {
  constructor(page) { this.page = page; }
  async title() { return this.page.title(); }
  async search(word) {
    await this.page.type('input[id=search_form_input_homepage]', word);
    await this.page.click('input[type="submit"]');
  }
}
module.exports = HomePage;

// pages/ResultsPage.js
class ResultsPage {
  constructor(page) { this.page = page; }
  async linksCount() {
    await this.page.waitForSelector('h2 a');
    return await this.page.$$eval('h2 a', as => as.length);
  }
}
module.exports = ResultsPage;

Test de ejemplo con DuckDuckGo que valida el título y que una búsqueda genera resultados, mostrando el patrón POM en acción.

const puppeteer = require('puppeteer');
const { expect } = require('chai');
const HomePage = require('./pages/HomePage');
const ResultsPage = require('./pages/ResultsPage');

describe('Búsqueda en DuckDuckGo con POM', () => {
  let browser, page;
  beforeEach(async () => {
    browser = await puppeteer.launch();
    page = await browser.newPage();
    await page.goto('https://duckduckgo.com');
  });
  afterEach(async () => { await browser.close(); });

  it('muestra el título esperado', async () => {
    const home = new HomePage(page);
    expect(await home.title()).to.include('DuckDuckGo');
  });

  it('devuelve resultados al buscar', async () => {
    const home = new HomePage(page);
    await home.search('puppeteer');
    const results = new ResultsPage(page);
    expect(await results.linksCount()).to.be.greaterThan(0);
  });
});

Consejo práctico: centraliza tus selectores en las clases POM y evita duplicarlos en los tests para facilitar refactors cuando cambie el DOM.

Automatización de formularios, capturas y PDF

Rellenar inputs, pulsar botones y comprobar mensajes es el pan de cada día. Puedes tomar screenshots en pasos clave y validar textos del DOM para confirmar flujos completos.

Ejemplo inspirado en una SPA Angular con validaciones de formulario, navegación y capturas entre pantallas:

await page.goto('https://angular-6-registration-login-example.stackblitz.io/register');
await page.click('a.btn.btn-link'); // Cancel
await page.click('a.btn.btn-link'); // Register
await page.click('button.btn.btn-primary'); // Validaciones vacías
await page.screenshot({ path: 'form-feedback.png' });

await page.type('input[formcontrolname="firstName"]', 'Monitor');
await page.type('input[formcontrolname="lastName"]', 'Pruebas');
await page.type('input[formcontrolname="username"]', 'pruebas');
await page.type('input[formcontrolname="password"]', 'MISO4208');
await page.click('button.btn.btn-primary');
await page.waitForSelector('div.alert.alert-success');

await page.type('input[formcontrolname="username"]', 'pruebas');
await page.type('input[formcontrolname="password"]', 'MISO4208');
await page.click('button.btn.btn-primary');
await page.waitForSelector('h1');
await page.screenshot({ path: 'after-login.png' });

Generar PDF es directo con page.pdf; útil para reportes o comprobantes visuales de una vista concreta en el pipeline.

Depuración y rendimiento: trucos que ahorran tiempo

Usa waitForSelector para sincronizarte con el DOM y evita sleeps arbitrarios. Añade registros y listeners de red para diagnosticar fallos de carga o 404/500.

page.on('requestfailed', req => {
  console.error('Fallo de solicitud:', req.url(), req.failure()?.errorText);
});

await page.waitForSelector('#mi-elemento', { timeout: 10000 });

Depuración visual: alterna headless: false y slowMo para ver paso a paso; en headless moderno prueba headless: ‘shell’ para mejorar estabilidad y rendimiento en CI.

Bloquea recursos innecesarios (imágenes, fuentes) si solo te importa el DOM/texto para reducir consumo y acelerar las pruebas de scraping.

Integración en CI/CD y ejecución en contenedores

En CI conviene headless y args como –no-sandbox en entornos root o contenedores. Mantén Node actualizado y considera reusar el Chromium/Edge del sistema para evitar descargas en cada build.

Estrategias para pipelines eficientes: paraleliza suites, cachea node_modules y la carpeta de navegadores, y separa pruebas rápidas de humo de las end‑to‑end más pesadas.

Servicios en la nube tipo BrowserStack pueden ayudarte con matrices entre navegadores; para Edge/Chromium puro, Puppeteer en runners Linux es rápido y estable.

Monitorización y métricas durante las pruebas

Si necesitas observabilidad, integra módulos que recojan métricas de rendimiento del navegador (nodos DOM, tiempos de layout y recálculo de estilos, duración de scripts/tareas, heap JS y códigos HTTP) y las envíen a tu plataforma APM.

Herramientas como webhint y Performance en DevTools ayudan a detectar cuellos de botella, oportunidades de optimización y problemas de compatibilidad que pueden romper tus tests intermitentemente.

Más allá de Node: wrappers y compatibilidad ampliada

Puppeteer‑Sharp (C#) ha demostrado alta compatibilidad con Edge al ser este Chromium‑based; experiencias reales muestran que la mayoría de pruebas pasan con mínimos ajustes.

Paquete de Dart también existe, útil si trabajas con ese ecosistema: puedes lanzar el navegador, navegar y automatizar acciones con una API familiar.

Compatibilidad en expansión: versiones recientes de Puppeteer han trabajado soporte para otros navegadores como Firefox y avanzan hacia estándares como WebDriver BiDi, acercando lo mejor de CDP y WebDriver clásico.

Otras herramientas y enfoques para pruebas en Edge

Playwright ofrece automatización multi‑navegador con una sola API; si necesitas Firefox/WebKit además de Edge, te ahorra dolores de cabeza con una sintaxis moderna y robusta.

WebDriver sigue siendo clave en escenarios empresariales multilenguaje y con fuerte integración en frameworks existentes, con ventajas en gestión de ventanas y eventos de usuario.

Protocolo DevTools directamente: si requieres instrumentación muy fina (trazas, interceptación de red avanzada, cobertura), puedes combinar CDP con Puppeteer para diagnósticos a bajo nivel.

Recetas útiles con Edge: del cero al valor

Captura de pantalla a tamaño completo de una página crítica para revisar cambios de UI en pull requests o ejecutar pruebas de regresión visual.

await page.goto('https://tu-sitio');
await page.screenshot({ path: 'full.png', fullPage: true });

Esperas inteligentes combinando navegación y ociosidad de red para aplicaciones SPA pesadas que cargan recursos en cascada.

await page.goto('https://app.tu-sitio', { waitUntil: 'networkidle0' });

Extracción de datos dinámica con $$eval y evaluate para transformar el DOM en estructuras de datos listas para tu backend.

const items = await page.$$eval('.card', cs => cs.map(c => ({
  title: c.querySelector('h2')?.textContent?.trim() || '',
  link: c.querySelector('a')?.href || ''
})));

Control de errores robusto con try/catch y logs enriquecidos para entender fallos intermitentes y reducir flakiness.

try {
  await page.waitForSelector('#checkout', { timeout: 8000 });
} catch (e) {
  console.error('Elemento checkout no apareció a tiempo');
  await page.screenshot({ path: 'timeout-checkout.png' });
  throw e;
}

Este recorrido te deja listo para pasar de la teoría al valor: pruebas fiables, rápidas y mantenibles sobre Microsoft Edge con una fricción mínima.