JavaScript básico

Uso de executeScript para casos especiales

Aunque Selenium IDE ofrece una amplia gama de comandos nativos para interactuar con páginas web, existen situaciones específicas donde estos comandos no son suficientes. En estos casos especiales, el comando executeScript nos permite ejecutar código JavaScript directamente en el navegador para realizar acciones que no están disponibles en los comandos estándar.

Cuándo necesitamos executeScript

El comando executeScript se convierte en indispensable cuando nos enfrentamos a las siguientes situaciones:

• Elementos fuera del área visible: Cuando necesitamos hacer scroll para alcanzar elementos que están más abajo en la página
• Elementos ocultos o dinámicos: Para interactuar con elementos que no son accesibles mediante comandos convencionales
• Validaciones específicas: Cuando requerimos verificar propiedades CSS o atributos que no están disponibles con comandos assert/verify básicos
• Manipulación directa del DOM: Para modificar valores o propiedades de elementos de forma precisa

Sintaxis básica del comando

La estructura básica del comando executeScript en Selenium IDE es muy sencilla:

• Command: executeScript
• Target: El código JavaScript que queremos ejecutar
• Value: (opcional) Variable donde almacenar el resultado

Ejemplos prácticos de uso

Realizar scroll en la página:

window.scrollTo(0, 500)

Este código hace scroll vertical hasta la posición 500 píxeles desde la parte superior de la página. Es especialmente útil cuando los elementos están fuera del área visible y necesitamos desplazarnos para alcanzarlos.

Hacer scroll hasta el final de la página:

window.scrollTo(0, document.body.scrollHeight)

Establecer el valor de un campo directamente:

document.getElementById('email').value = 'usuario@ejemplo.com'

Esta técnica es útil cuando el comando type no funciona correctamente con ciertos tipos de campos o cuando necesitamos establecer valores de forma más directa.

Hacer clic en un elemento usando JavaScript:

document.getElementById('boton-oculto').click()

Cuando un elemento está presente en el DOM pero no es visualmente accesible para el comando click normal, podemos usar JavaScript para activarlo directamente.

Obtener información específica de un elemento:

return document.getElementById('precio').innerText

Al incluir return en nuestro script, podemos capturar el resultado y almacenarlo en una variable especificando el nombre de la variable en el campo Value del comando.

Consideraciones importantes

Cuando trabajamos con executeScript, debemos tener en cuenta que estamos ejecutando código JavaScript real en el navegador. Aunque mantenemos los ejemplos simples, es importante entender que:

• Los scripts se ejecutan en el contexto de la página actual
• Podemos acceder a todos los elementos y funciones disponibles en esa página
• Es recomendable usar este comando solo cuando los comandos nativos de Selenium IDE no sean suficientes

Integración con variables

El comando executeScript funciona perfectamente con el sistema de variables de Selenium IDE. Podemos usar variables existentes dentro de nuestros scripts:

document.getElementById('campo-texto').value = '${miVariable}'

O capturar valores y almacenarlos en nuevas variables especificando el nombre de la variable en el campo Value del comando executeScript.

Esta flexibilidad adicional que proporciona executeScript nos permite manejar casos especiales que de otra forma serían imposibles de automatizar, manteniendo siempre la simplicidad que caracteriza a Selenium IDE.

JavaScript esencial para testers

Como profesionales de testing que utilizan Selenium IDE, no necesitamos convertirnos en programadores JavaScript, pero sí es útil conocer algunos conceptos fundamentales que nos ayudarán a aprovechar mejor el comando executeScript y entender qué está ocurriendo cuando lo utilizamos.

Conceptos básicos que todo tester debe conocer

El Document Object Model (DOM) es la representación que hace el navegador de todos los elementos de una página web. Cuando escribimos JavaScript en executeScript, estamos interactuando directamente con este DOM para realizar acciones que los comandos nativos no pueden hacer.

Los elementos HTML se identifican principalmente de tres formas que ya conocemos de los localizadores:

• document.getElementById('nombreId') - Busca un elemento por su atributo ID
• document.getElementsByClassName('nombreClase') - Busca elementos por su clase CSS
• document.getElementsByTagName('etiqueta') - Busca elementos por su etiqueta HTML

Propiedades útiles para validaciones

Cuando necesitamos extraer información de elementos para nuestras validaciones, estas propiedades nos serán muy útiles:

Para obtener texto visible:

return document.getElementById('mensaje').innerText

Para obtener el valor de campos de formulario:

return document.getElementById('cantidad').value

Para verificar si un elemento está visible:

return document.getElementById('alerta').style.display !== 'none'

Para obtener atributos específicos:

return document.getElementById('enlace').getAttribute('href')

Métodos de interacción directa

Algunos métodos básicos que podemos usar cuando los comandos nativos no funcionan:

Simular clics:

document.getElementById('boton-especial').click()

Establecer foco en un elemento:

document.getElementById('campo-input').focus()

Cambiar propiedades CSS:

document.getElementById('elemento').style.display = 'block'

Trabajando con múltiples elementos

A veces necesitamos interactuar con varios elementos similares. JavaScript nos permite hacer esto de forma sencilla:

Contar elementos de un tipo:

return document.getElementsByClassName('producto').length

Obtener texto del primer elemento de una lista:

return document.getElementsByClassName('precio')[0].innerText

Validaciones específicas para testing

Como testers, a menudo necesitamos verificar condiciones específicas que van más allá de los comandos assert básicos:

Verificar si un elemento contiene una clase CSS:

return document.getElementById('estado').classList.contains('activo')

Comprobar si un campo está habilitado:

return !document.getElementById('submit').disabled

Verificar el número de opciones en un select:

return document.getElementById('paises').options.length

Consejos prácticos para testers

Mantén la simplicidad: Aunque JavaScript puede hacer cosas muy complejas, en el contexto de testing con Selenium IDE es mejor mantener los scripts lo más simples y directos posible.

Usa las herramientas del navegador: Cuando no estés seguro de cómo acceder a un elemento, abre las herramientas de desarrollador (F12) y usa la consola para probar tu código JavaScript antes de añadirlo a Selenium IDE.

Combina con variables: Recuerda que puedes usar las variables de Selenium IDE dentro de tus scripts JavaScript, lo que te permite crear tests más dinámicos:

document.getElementById('busqueda').value = '${terminoBusqueda}'

Manejo de errores básico: Si un elemento puede no existir, es buena práctica verificar su existencia antes de interactuar con él:

var elemento = document.getElementById('opcional');
if (elemento) {
    return elemento.innerText;
} else {
    return 'Elemento no encontrado';
}

Estos conocimientos básicos de JavaScript te permitirán resolver casos especiales en tus tests sin necesidad de convertirte en programador, manteniendo la simplicidad que caracteriza a Selenium IDE mientras amplías significativamente tus capacidades de testing.