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: Si prefieres localizadores semánticos basados en accesibilidad (getByRole, getByLabel, etc.), usa 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 Flow/Smart Locators. Ú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.

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

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).

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 }}

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.

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