Nodo Web Flow

El nodo Web Flow permite automatizar interacciones con páginas web usando selectores CSS, XPath, data-testid y texto. Es ideal cuando necesitas selectores tradicionales y control detallado sobre la localización de elementos.

Consejo: Para flujos web nuevos grabados por la extensión, prefiera Smart Web Flow. Si prefiere localizadores semánticos basados en accesibilidad (getByRole, getByLabel, etc.) en flujos legados, use el nodo Smart Locators.

Descripción General

Configuración General

Navegador

Firefox y WebKit se descargan automáticamente en el primer uso si no están instalados.

Dispositivo — Desktop

Presets de viewport disponibles:

Dispositivo — Mobile

Usa perfiles reales de Playwright (viewport, user agent, escala de píxeles, touch). Modelos disponibles:

iOS: iPhone SE, iPhone 12, iPhone 13, iPhone 14, iPhone 14 Pro, iPhone 15, iPhone 15 Pro, iPad Mini, iPad (gen 9), iPad Pro 11

Android: Pixel 5, Pixel 7, Galaxy S8, Galaxy S9+, Galaxy Tab S4

En modo Mobile con Firefox, las opciones isMobile y hasTouch se eliminan automáticamente (no son compatibles con Firefox en Playwright). El viewport y el user agent del dispositivo se aplican igualmente.

Modo de Sesión

• Nueva Sesión (new): Abre un nuevo navegador para cada ejecución. Ideal para pruebas aisladas.
• Reutilizar Sesión (reuse): Usa una sesión de navegador ya abierta por otro nodo web compatible. Útil para dividir pruebas largas en múltiples nodos manteniendo el mismo navegador y cookies.

Estrategia de Storage

• En Memoria (inMemory): Las cookies y el localStorage se descartan al final de la ejecución.
• Persistido (persisted): Las cookies y el localStorage se guardan con una clave y pueden reutilizarse en ejecuciones futuras. Ideal para mantener sesiones de inicio de sesión entre ejecuciones.

Auditoría de Rendimiento

Cuando Auditoría de rendimiento está habilitada, Web Flow monitorea la sesión activa de Playwright y genera evidencias visuales de rendimiento por pantalla.

La función recoge:

• Page Load
• FCP (First Contentful Paint)
• LCP (Largest Contentful Paint)
• cantidad total de solicitudes
• cantidad de solicitudes de API
• errores de solicitud/API
• APIs lentas por pantalla

Además del resumen global, QANode genera checkpoints por pantalla con:

• nombre de la pantalla
• URL
• paso que originó la navegación
• gráfico de las APIs más lentas
• gráfico separado de errores de API cuando existan en esa pantalla

Outputs de Rendimiento

Cuando la auditoría está activa, el nodo expone:

• performancePassed
• performanceRequestCount
• performanceApiRequestCount
• performanceErrorCount
• performanceSlowRequestCount
• performance

El objeto performance contiene un resumen estructurado de la ejecución, incluidos los checkpoints por pantalla.

Self Healing

Cuando Self Healing está habilitado, Web Flow puede recuperar automáticamente un paso cuando el objetivo esperado y sus selectorStrategies dejan de funcionar.

El mecanismo considera señales como:

• texto visible y nombre accesible
• label, placeholder, title, alt
• data-testid, id y name
• role del elemento
• contexto estructural de la página, como contenedor, formulario, heading y región visual

Esto ayuda en cambios comunes de interfaz, por ejemplo:

• diferencias entre mayúsculas y minúsculas
• texto con o sin acentos
• pequeños cambios de etiqueta
• cambios simples de sinónimos, como Siguiente → Continuar

Self healing es conservador y solo se aplica cuando existe un candidato fuerte y claramente mejor que las alternativas, reduciendo falsos positivos en pantallas con varios botones parecidos.

Cuando ocurre una recuperación, los detalles de la ejecución muestran:

• el paso afectado
• la confianza de la recuperación
• el selector utilizado
• una acción Aplicar al Flujo para promover el selector recuperado al flujo original

Pasos (Web Steps)

El nodo Web Flow ejecuta una secuencia de pasos configurables. Cada paso representa una acción en el navegador.

Acciones Disponibles

Estrategias de Selector

Web Flow usa estrategias de selector para localizar elementos en la página. Cada paso puede tener múltiples estrategias ordenadas por prioridad — si la primera no encuentra el elemento, se intenta con la siguiente.

Prioridad recomendada:

1. dataTestId — Más estable, no cambia con el diseño
2. css con ID — Generalmente único en la página
3. role — Basado en accesibilidad
4. text — Puede cambiar con traducciones
5. xpath — Último recurso, más frágil

Detalles de las Acciones

navigate

Navega a una URL específica.

Ejemplo:

URL: https://misitio.com/login
URL: {{ variables.BASE_URL }}/dashboard

switchPage

Cambia la página activa cuando la automatización necesita continuar en otra pestaña o ventana abierta por el navegador.

Modos:

Cuando la extensión detecta un clic que abre nueva pestaña, puede grabar este paso automáticamente justo después del click. Esto evita que los próximos pasos intenten ejecutarse en la pestaña anterior.

click

Hace clic en un elemento de la página.

El click intenta localizar el elemento usando cada estrategia en orden. Si falla, espera y vuelve a intentar (hasta el número de intentos configurado).

type

Escribe texto en un campo de entrada.

Nota: La acción type usa fill() de Playwright, que reemplaza el valor del campo de forma instantánea. Para simular la escritura carácter por carácter, usa el nodo Smart Locators con la acción type (pressSequentially).

drag

Arrastra un elemento de origen y lo suelta sobre otro elemento o en coordenadas específicas de la página.

Web Flow intenta ejecutar el drag con el método nativo de Playwright (dragTo) cuando origen y destino son identificables. Si el destino es un área libre, como un canvas o editor visual, usa movimiento real del mouse hasta Destino X / Y.

Cuando el paso viene de la extensión, el JSON puede incluir metadatos internos del gesto. Ayudan al ejecutor a reproducir el movimiento con precisión, pero no aparecen como campos principales en el panel.

Ejemplos de uso:

• Mover cards en un Kanban
• Arrastrar ítems a una lista
• Soltar un nodo en un área libre del canvas
• Probar ordenación o upload cuando la UI depende de drag/drop

Buenas prácticas:

• Prefiere data-testid, data-qa o id estables para origen y destino
• Usa coordenadas solo cuando el destino no tenga un elemento identificable
• Captura screenshots before y after para facilitar la revisión visual
• Si la página tiene elementos repetidos, prefiere selectores más específicos para evitar ambigüedad

wait

Espera una condición antes de continuar.

Modos:

assert

Verifica una condición en la página. Si la condición falla, el paso se marca como fallido.

Modos:

Los resultados de las aserciones están disponibles en los outputs:

{{ steps["web-flow"].outputs.asserts.nombreAsercion }}  →  true o false

extract

Extrae datos de un elemento de la página.

Atributos:

Los datos extraídos están disponibles en los outputs:

{{ steps["web-flow"].outputs.extracts.nombreExtraccion }}

extractList

Itera sobre una lista de elementos repetidos (filas de tabla, cards, ítems de lista) y extrae campos nombrados de cada uno, produciendo un array de objetos como output.

Configuración de Campos:

Ejemplo de output:

{
  "extracts": {
    "productos": [
      { "nombre": "Ítem A", "precio": "$10.00" },
      { "nombre": "Ítem B", "precio": "$25.00" }
    ]
  }
}

Grabación con la extensión: Usa Ctrl+Shift+E en el Chrome Recorder para grabar una extracción de lista en dos pasos: primero haz clic en el ítem repetido, luego haz clic en los campos a extraer dentro de él.

hover

Pasa el mouse sobre un elemento.

scroll

Desplaza la página o hasta un elemento.

Modos:

refresh

Recarga la página actual.

Eventos:

select

Selecciona una opción de un elemento <select> (dropdown).

Criterios:

press-key

Presiona una tecla del teclado.

clock

Controla el reloj del navegador usando la API page.clock de Playwright. Es útil para probar reglas dependientes de fecha/hora, expiración de sesión, promociones temporales, bloqueos por horario, vencimientos, temporizadores y pantallas que cambian con el paso del tiempo.

Operaciones:

Los nuevos pasos de clock comienzan con Recargar página después de aplicar desactivado por defecto. Esto conserva el estado actual de la pantalla y funciona mejor para páginas con temporizadores activos. Activa la recarga cuando la aplicación solo recalcula fecha/hora durante la carga de la página.

frame

Cambia el contexto a un iframe.

Modos:

Evidencias (Screenshots)

Cada paso puede tener configuración de evidencia individual:

Prueba de Accesibilidad

Web Flow soporta escaneo automático de accesibilidad con axe-core integrado. Cuando está habilitado, el nodo audita la página después de cada paso que captura un screenshot, identificando violaciones WCAG/ARIA y marcando visualmente los elementos afectados.

Configuración

Cómo Funciona

Después de cada paso que toma un screenshot, axe-core es inyectado en la página y analiza el documento en busca de violaciones. Las violaciones se dibujan sobre el screenshot con cajas de colores alrededor de los elementos afectados y un panel de conteo en la esquina:

Al final de la ejecución se generan automáticamente:

• Screenshots por paso — overlay con cajas de colores + panel Critical N / Serious N / Moderate N / Minor N + top 2 reglas
• Gráfico de severidad — {id}-accessibility-severity-chart.png — distribución por nivel
• Gráfico de reglas — {id}-accessibility-rule-chart.png — top 8 reglas más violadas
• Reporte JSON — {id}-accessibility-report.json — datos completos de todas las violaciones

Criterio de Aprobación

El nodo falla si hay cualquier violación con severidad igual o superior al umbral configurado. Usa none para nunca reprobar (recolectar métricas sin bloquear el flujo).

Ejemplo: Auditoría de inicio de sesión

Configuración del nodo:
  Accessibility Scan: true
  Fail When Severity >= : serious

Pasos:
1. navigate → https://misitio.com/login    (sin screenshot = sin escaneo)
2. type → #email → "{{ variables.EMAIL }}" → screenshot after → escaneo ejecutado
3. click → button[type="submit"]            → screenshot after → escaneo ejecutado
4. wait → networkIdle
5. assert → loginOk → hasURL → /dashboard  → screenshot after → escaneo ejecutado

Si cualquier paso tiene una violación serious o critical, el nodo falla con:

"Accessibility findings at or above "serious" were detected."

Outputs

Ejemplo Completo

Inicio de sesión en un sitio

Pasos configurados en el nodo:

1. navigate → https://misitio.com/login
2. type → Selector: #email, Texto: {{ variables.USER_EMAIL }}
3. type → Selector: #password, Texto: {{ variables.USER_PASSWORD }}
4. click → Selector: button[type="submit"]
5. wait → Modo: networkIdle
6. assert → Nombre: loginOk, Modo: textContains, Selector: .welcome, Texto: Bienvenido
7. extract → Nombre: userName, Selector: .user-name, Atributo: text

Resultado: Tras la ejecución, los outputs serán:

{
  "sessionId": "abc-123",
  "extracts": { "userName": "João Silva" },
  "asserts": { "loginOk": true }
}

Consejos

• Usa data-testid como estrategia principal de selector — es más estable
• Configura screenshots en los pasos críticos para facilitar la depuración
• Usa reutilización de sesión cuando múltiples nodos Web Flow/Smart Locators necesiten compartir el mismo navegador
• Para formularios con autocompletado o máscaras, considera usar el nodo Smart Locators con la acción type (escritura carácter por carácter)
• El modo headless: false es útil durante el desarrollo para visualizar lo que hace la prueba