Comandos de interacción (click, type, select…)

Comandos básicos de interacción

Una vez que dominamos la localización de elementos web, el siguiente paso natural es interactuar con ellos. Los comandos de interacción son las herramientas que nos permiten simular las acciones que realizaría un usuario real: hacer clic en botones, escribir texto en campos, seleccionar opciones de listas desplegables o marcar casillas de verificación.

¿Qué son los comandos de interacción?

Los comandos de interacción son instrucciones que le dicen a Selenium IDE cómo manipular los elementos de una página web. Estos comandos transforman nuestros tests de simples observadores pasivos a participantes activos que pueden navegar y usar aplicaciones web de manera automatizada.

Cada comando de interacción sigue la estructura estándar de Selenium IDE que ya conocemos: Command (el tipo de acción), Target (el elemento objetivo usando un localizador), y Value (el valor o dato adicional cuando sea necesario).

Categorías principales de comandos

Selenium IDE organiza los comandos de interacción en varias categorías según el tipo de acción que realizan:

• Comandos de clic: Para interactuar con botones, enlaces y elementos clickeables
• Comandos de entrada de texto: Para escribir información en campos de formulario
• Comandos de selección: Para trabajar con listas desplegables y opciones múltiples
• Comandos de verificación: Para marcar y desmarcar casillas de verificación
• Comandos de movimiento: Para simular el comportamiento del ratón como hover

Grabación automática vs edición manual

Cuando grabamos nuestras acciones usando el botón de grabación, Selenium IDE genera automáticamente estos comandos de interacción. Por ejemplo, al hacer clic en un botón durante la grabación, se creará automáticamente un comando click con el localizador apropiado.

Sin embargo, a menudo necesitamos editar manualmente estos comandos para:

• Mejorar la precisión de los localizadores
• Cambiar valores de entrada de texto
• Añadir comandos que no se graban automáticamente (como mouseOver)
• Optimizar la secuencia de acciones para mayor fiabilidad

Estructura de un comando típico

Veamos un ejemplo de cómo se estructura un comando de interacción en la tabla de comandos:

| Command | Target | Value | |---------|--------|-------| | click | id=submit-button | | | type | name=username | admin | | select | id=country-dropdown | label=España |

En este ejemplo podemos ver:

• El comando click no requiere valor, solo necesita saber qué elemento clickear
• El comando type requiere tanto el elemento objetivo como el texto a escribir
• El comando select especifica tanto la lista como la opción a seleccionar

Tolerancia a fallos y localizadores múltiples

Una característica importante de los comandos de interacción en Selenium IDE es su resistencia a cambios. Durante la grabación, la herramienta almacena múltiples localizadores para cada elemento (ID, CSS, XPath, etc.). Si uno falla durante la reproducción, automáticamente probará con los siguientes hasta encontrar uno que funcione.

Esta funcionalidad hace que nuestros tests sean más robustos ante pequeños cambios en la interfaz de usuario, reduciendo significativamente el mantenimiento necesario.

Click, Type, Select y otros comandos esenciales

Una vez que entendemos la estructura básica de los comandos de interacción, es momento de explorar los comandos específicos que utilizaremos con mayor frecuencia en nuestros tests. Cada comando tiene un propósito particular y es importante conocer cuándo y cómo usar cada uno para crear tests efectivos.

El comando Click

El comando click es probablemente el más utilizado en cualquier test de interfaz de usuario. Su función es simple: simular un clic del ratón sobre un elemento específico.

Sintaxis básica:

| Command | Target | Value | |---------|--------|-------| | click | id=login-button | |

El comando click no requiere un valor en el campo Value, solo necesita identificar el elemento objetivo mediante un localizador en el campo Target. Funciona con cualquier elemento clickeable: botones, enlaces, imágenes, casillas de verificación, etc.

Ejemplo práctico: Si queremos hacer clic en un botón de envío de formulario:

| Command | Target | Value | |---------|--------|-------| | click | css=button[type="submit"] | |

Cuándo usar Click vs ClickAndWait

Selenium IDE también proporciona el comando clickAndWait, aunque en las versiones modernas este comando ya no es necesario, ya que Selenium espera automáticamente a que se complete la navegación después de un clic.

• Usa click para la mayoría de interacciones: botones que ejecutan JavaScript, enlaces internos, elementos que abren menús desplegables

• Evita clickAndWait en las versiones actuales, ya que Selenium maneja automáticamente las esperas de navegación

El comando Type

El comando type permite introducir texto en campos de entrada como inputs, textareas y elementos editables.

Sintaxis básica:

| Command | Target | Value | |---------|--------|-------| | type | name=username | admin@empresa.com |

A diferencia de click, el comando type requiere ambos campos: Target para identificar el elemento y Value para especificar el texto a escribir.

Características importantes del comando Type:

• Limpia automáticamente el contenido previo del campo antes de escribir el nuevo texto
• Funciona con campos de texto, áreas de texto, y campos de contraseña
• Respeta el formato del texto tal como se introduce en el campo Value

Ejemplo con diferentes tipos de campos:

| Command | Target | Value | |---------|--------|-------| | type | id=email-field | usuario@test.com | | type | css=textarea[name="comentarios"] | Esta es una prueba | | type | xpath=//input[@type='password'] | miPassword123 |

El comando Select

El comando select está diseñado específicamente para trabajar con listas desplegables (elementos <select> en HTML).

Sintaxis básica:

| Command | Target | Value | |---------|--------|-------| | select | id=country-list | label=España |

El comando select ofrece múltiples formas de especificar la opción a seleccionar en el campo Value:

• label=texto: Selecciona por el texto visible de la opción
• value=valor: Selecciona por el atributo value del elemento option
• index=número: Selecciona por la posición (empezando desde 0)

Ejemplos prácticos:

| Command | Target | Value | |---------|--------|-------| | select | name=idioma | label=Español | | select | id=categoria | value=electronics | | select | css=select.priority | index=2 |

Comandos Check y Uncheck

Para manejar casillas de verificación (checkboxes), Selenium IDE proporciona dos comandos específicos:

El comando check marca una casilla de verificación:

| Command | Target | Value | |---------|--------|-------| | check | name=acepta-terminos | |

El comando uncheck desmarca una casilla de verificación:

| Command | Target | Value | |---------|--------|-------| | uncheck | id=newsletter-subscription | |

Estos comandos son inteligentes: si una casilla ya está marcada y usas check, no hará nada. Lo mismo ocurre con uncheck en casillas ya desmarcadas.

Ejemplo de flujo típico:

| Command | Target | Value | |---------|--------|-------| | uncheck | name=todos-los-permisos | | | check | id=permiso-lectura | | | check | id=permiso-escritura | |

El comando MouseOver

El comando mouseOver simula el movimiento del ratón sobre un elemento, activando efectos hover y menús desplegables que aparecen al pasar el cursor.

Sintaxis básica:

| Command | Target | Value | |---------|--------|-------| | mouseOver | css=.menu-principal | |

Este comando es especialmente útil para:

• Activar menús de navegación que aparecen al hacer hover
• Mostrar tooltips informativos
• Activar efectos visuales que dependen del estado hover
• Probar la interactividad de elementos antes de hacer clic

Ejemplo de navegación con menú hover:

| Command | Target | Value | |---------|--------|-------| | mouseOver | id=menu-productos | | | click | css=.submenu a[href="/laptops"] | |

Editando comandos grabados automáticamente

Cuando Selenium IDE graba nuestras acciones, a menudo genera comandos que necesitan refinamiento. Es común que necesitemos editar manualmente estos comandos para mejorar su precisión:

Mejorando localizadores: El grabador puede elegir un XPath complejo cuando existe un ID más simple y fiable.

Antes (grabado automáticamente): | Command | Target | Value | |---------|--------|-------| | click | xpath=//div[3]/form[1]/button[2] | |

Después (editado manualmente): | Command | Target | Value | |---------|--------|-------| | click | id=submit-btn | |

Optimizando valores de entrada: Los textos grabados pueden contener datos específicos de la sesión de grabación que queremos generalizar.

Antes: | Command | Target | Value | |---------|--------|-------| | type | name=fecha | 15/01/2024 |

Después: | Command | Target | Value | |---------|--------|-------| | type | name=fecha | 01/01/2025 |

Combinando comandos para flujos complejos

Los comandos de interacción cobran su verdadero poder cuando se combinan para crear flujos de usuario realistas:

| Command | Target | Value | |---------|--------|-------| | click | id=login-link | | | type | name=email | test@empresa.com | | type | name=password | password123 | | check | id=remember-me | | | click | css=button[type="submit"] | | | mouseOver | id=user-menu | | | click | css=.dropdown-item[href="/profile"] | |

Esta secuencia demuestra cómo cada comando cumple su función específica dentro de un flujo de usuario coherente, desde la navegación hasta la interacción con formularios y menús.