Inspección y grabación de sesiones

Ve cómo depurar sesiones de automatización mediante una interfaz gráfica en tiempo real.

Oxylabs Headless Browser proporciona Inspección de sesión y Grabación de sesión para observar la automatización del navegador en tiempo real o revisar reproducciones en video de sesiones anteriores. Estas funciones de depuración visual le permiten:

• Diagnosticar problemas complejos que no son evidentes en los registros ni en los mensajes de error
• Entender el renderizado de la página exactamente como lo ve el navegador
• Verificar la ejecución correcta de sus flujos de trabajo de automatización
• Solucionar comportamientos inesperados en tiempo real

Ambas herramientas enrutan sus datos visuales a través del headlesify.io dominio (separado de oxylabs.io utilizado para las conexiones).

Inspección de sesión (VNC)

La herramienta de Inspección de sesión es una función de depuración que usa VNC (Virtual Network Computing) para proporcionar acceso visual en tiempo real a sus sesiones de automatización del navegador.

Puede habilitar la herramienta de Inspección de sesión usando el vnc.headlesify.io endpoint. Esto abre un noVNC visor que puede ver en su navegador. Obtenga la URL del visor a partir del ID de sesión:

const cdp = await ctx.newCDPSession(page);
const { value: sid } = await cdp.send("__session_id");
const vncUrl = `https://vnc.headlesify.io/novnc/?id=${sid}`;
console.log(vncUrl);  // open this URL in your browser

Grabación de sesión

Grabe toda su sesión de Headless Browser como un video para depuración, auditoría o revisiones. Para grabar una sesión, añada el record=true parámetro de consulta a su URL de conexión:

wss://USER:[e-mail]?record=true

Personalización de nombres de grabación

Organice y filtre sus grabaciones dentro de su panel asignando nombres personalizados a sus videos usando el record_name parámetro. Puede usar caracteres alfanuméricos con guiones y guiones bajos, hasta una longitud máxima de 64 caracteres (^[a-zA-Z0-9_-]{1,64}$):

wss://USER:[e-mail]?record=true&record_name=payment_checkout_flow_01

Acceso a las reproducciones

Todas las grabaciones completadas se codifican y guardan automáticamente en su portal seguro. Puede buscar, filtrar y revisar sus grabaciones en https://dashboard.headlesify.io/#recordings.

Ejemplos de código

El siguiente ejemplo de Node.js muestra cómo conectarse al navegador con las opciones visuales habilitadas, extraer programáticamente el ID de sesión VNC y mostrar el enlace de la transmisión en vivo en su consola.

Las funciones admiten tanto las bibliotecas Playwright como Puppeteer.

import { chromium } from "playwright";

const username = "USERNAME_abc12";
const password = "PASSWORD";
const endpoint = "ubc.oxylabs.io";

// Enable VNC stream and video recording under a custom name
const params = "o_vnc=true&record=true&record_name=chrome_vnc_test";
const browserUrl = `wss://${username}:${password}@${endpoint}?${params}`;

(async () => {
    // Connect to the browser
    const browser = await chromium.connectOverCDP(browserUrl);
    const ctx = browser.contexts()[0] || (await browser.newContext());
    const page = ctx.pages()[0] || (await ctx.newPage());

    try {
        // 1. Initialize a CDP session on the active page
        const cdpSession = await ctx.newCDPSession(page);
        
        // 2. Query the custom session identifier
        const { value: sessionId } = await cdpSession.send("__session_id");
        
        // 3. Construct and output the VNC viewer link
        console.log(`Live VNC Link: https://vnc.headlesify.io/novnc/?id=${sessionId}`);

        // Execute your automation steps
        await page.goto("https://example.com");
        
        // Hold session open briefly to allow visual monitoring via VNC link
        await new Promise(resolve => setTimeout(resolve, 10000));

    } catch (error) {
        console.error("Visual session execution failed:", error.message);
    } finally {
        await browser.close();
        console.log("Recording compiled. Access playback at https://dashboard.headlesify.io/#recordings");
    }
})();