CheckBox, RadioButton y TextBox – WebDriver

CheckBox, RadioButton y TextBox – Selenium WebDriver

Los formularios son los elementos fundamentales de la web para recibir información de los visitantes del sitio Web. Los formularios Web tienen diferentes elementos GUI como cuadros de texto, campos de contraseña, casillas de verificación, «Radio Buttons», menús desplegables, entradas de archivo, etc.

Veremos cómo acceder a estos diferentes elementos de formulario utilizando Selenium WebDriver con Java. El Selenium encapsula cada elemento de formulario como un objeto WebElement. Selenium proporciona API para encontrar los elementos y tomar acción sobre ellos como introducir texto en cuadros de texto, haciendo clic en los botones, etc. Veremos los métodos disponibles para acceder a cada elemento de formulario.

En este tutorial, veremos como identificar los siguientes elementos de formulario:

  • Introducción a WebElement, findElement(), findElements()
  • Cajas de texto
  • Ingresar valores en Cajas de texto
  • Eliminar valores en Cajas de texto
  • Botones
  • Botones «Submit»
  • Radio Button
  • Check Box
  • Resolución de problemas

Introducción a WebElement, findElement(), findElements

Selenium WebDriver encapsula un elemento de formulario simple como un objeto Webelement.

Existen varias técnicas por las que el WebDriver identifica los elementos de un formulario basándose en las diferentes propiedades de los elementos Web como ID, Name, Class, XPath, tagname, selectores CSS, Link Text, etc. Te recomiendo visitar Localizar elementos con Selenium WebDriver

Selenium WebDriver proporciona los dos métodos siguientes para encontrar los elementos.

  • findElement () – encuentra un único elemento Web y lo devuelve como un objeto WebElement.
  • findElements () – devuelve una lista de objetos WebElement que coinciden con los criterios del localizador.

Paso 1: Necesitamos importar este paquete para crear objetos de elementos Web

import org.openqa.selenium.WebElement;

Paso 2: Tenemos que llamar al método findElement() disponible en la clase WebElement y obtener un objeto de WebElement.

A continuación mostramos como se hace.

Input Box/Cajas de texto

Las Cajas de texto o Input Text se refieren a cualquiera de estos dos tipos:

  • Campos de texto/TextFields: Cuadros de texto que aceptan valores  y los muestran como son.
  • Campos de contraseña/Password Fields: Aceptan valores mecanografiados pero los enmascaran como una serie de caracteres especiales (comúnmente puntos y asteriscos) para evitar que se visualicen valores sensibles.

Campos en selenium webdriver

Localizadores

El método findElement() toma un parámetro que es un localizador del elemento. Los diferentes localizadores como By.id(), By.name(), By.xpath(), By.CSSSelector() etc. localizan los elementos en la página usando sus propiedades como  id, name or path, etc.

Puedes usar plugins como Fire path para obtener ayuda para obtener el ID, XPath, etc. de los elementos. También se puede hacer uso del inspeccionador de elementos que traen los navegadores.

El sitio de ejemplo es http://demo.guru99.com/test/login.html El código que a continuación se indica, es el código para localizar el campo de texto «Email address» mediante el localizador id y el campo «Password» usando el localizador name.

// Obtenemos el WebElement correspondiente al textfield "Email Address" 
WebElement email = driver.findElement(By.id("email"));

//Recuperar el WebElement correspondiente a el Password Field
WebElement password = driver.findElement(By.name("passwd"));
  • TextField «Email» es localizado por Id
  • Password field es localizado por name

Ingresando valor en las cajas de texto/Input Boxes

Para introducir texto en los campos de texto y contraseña, sendKeys() es el método disponible para el WebElement.

Usando el mismo sitio de ejemplo http://demo.guru99.com/test/login.html, se encontrarán los campos de texto y campos de contraseña en las que introduciremos valores como lo haría un usuario final.

// Obtenemos el WebElement correspondiente al textfield "Email Address"
WebElement email = driver.findElement(By.id("email"));

//Recuperar el WebElement correspondiente a el Password Field
WebElement password = driver.findElement(By.name("passwd"));

//Ingresar valores en el textfield "Email Address"
email.sendKeys("tutorialselenium@gmail.com");

//Ingresar valores en el Password Field
password.sendKeys("1231234");
  • Busque el campo de texto «Email Address» mediante el localizador de ID.
  • Buscar el campo «Password» usando el localizador name
  • Introduzca el texto en la «Email Address» usando el método sendKeys().
  • Introduzca una contraseña en el campo «Password» mediante el método sendKeys().

El resultado es el siguiente:

sendkeys_selenium

Eliminar valores/limpiar cajas de texto

El método Clear() se utiliza para eliminar el texto de una caja de texto. Este método no necesita un parámetro. El fragmento de código que se muestra a continuación borrará el texto de los campos «Email Address» o «Password».

//Limpiar caja de texto "Email Address"
email.clear();
//Limpiar caja de texto "Password"
password.clear();

El resultado es el siguiente.
Metodo clear de selenium

Botones

Se puede acceder a los botones con el método click().

Continuando con el ejemplo anterior.

  1. Encuentra el botón «Sign in»
  2. Haga clic en el botón «Sign in» en la página de inicio de sesión del sitio.
//Localizar el boton por medio de su id.
WebElement btnLogin = driver.findElement(By.id("SubmitLogin"));
//Hacer clic en el botón "Sign in"
btnLogin.click();

Botones Submit

Los botones submit se utilizan para enviar el formulario completo al servidor. Podemos utilizar el método click() en el elemento Web como un botón normal como lo hemos hecho anteriormente o utilizar el método submit() en cualquier elemento Web en el formulario o en el propio botón submit.

//Enviar el formulario completo
btnLogin.submit();

Cuando se utiliza submit(), webdriver buscará el DOM para saber a qué formulario pertenece el elemento y, a continuación, desencadenará su función de envío.

Radio Button

Los Radio Button también se pueden activar mediante el método click().

Usando http://demo.guru99.com/test/radio.html para practicar, vea que radio1.click() cambia en el radio button a «Option 1». radio2.click() cambia el radio button a «Option2» dejando «Option1» sin seleccionar.

// Se localiza el primer radio button por su id
WebElement radio1 = driver.findElement(By.id("vfb-7-1"));
// Se localiza el segundo radio button por su id
WebElement radio2 = driver.findElement(By.id("vfb-7-2"));

//Seleccionar el primer radio button
radio1.click();

//El radio button 1 es deseleccionado y el segundo es seleccionado
radio2.click();

Check Box/Casilla de verificación

La activación/desactivación de una casilla de verificación también se realiza mediante el método click().

El código siguiente hará clic en la casilla de verificación «Keep me logged in» de Facebook dos veces y luego emite el resultado como true cuando se activa y false si se desactiva.

Nota: Recuerde que para localizar un elemento por medio de alguno de sus atributos (id, name, xpath, etc) puede hacer uso del inspeccionador de elementos del navegador o haciendo uso de firepath.

public static void main (String[] args) {
    WebDriver driver = new FirefoxDriver();
    String baseURL = "http://www.facebook.com";

    driver.get(baseURL);
    WebElement chkFBPersist = driver.findElement(By.id("persist_box"));
    for (int i=0; i<2; i++){
         chkFBPersist.click();
         System.out.println(chkFBPersist.isSelected());
    }
    driver.quit();
}

 

check box selenium webdriver

check_box_selenium

El método isSelected() se utiliza para saber si la casilla de verificación se activa o desactiva.

Resolución de problemas

Si encuentra la excepción NoSuchElementException() mientras intenta encontrar elementos, significa que el elemento no se encuentra en la página en el punto en el que el webdriver tuvo acceso a la página.

  • Revise su localizador de nuevo usando Firepath o Inspeccionador de elementos en Chrome.
  • Compruebe si el valor utilizado en el código es diferente al que genera firepath.
  • Algunas propiedades son dinámicas para algunos elementos. En caso de que, se encuentra que el valor es diferente y está cambiando dinámicamente, considere hacer uso de By.xpath() o By.cssSelector() que son formas más confiables pero complejas.
  • A veces, podría ser un problema de espera también, es decir, el webdriver ha ejecutado su código, incluso antes de la página cargada por completo, etc.

Resumen

La siguiente tabla resume los comandos para acceder a cada tipo de elemento discutido anteriormente.

ElementoComandoDescripción
Input BoxsendKeys()Se utiliza para introducir valores en cuadros de texto
clear()Usado para limpiar cuadros de texto de su valor actual
Check Box,Radio Button,click()Se utiliza para activar/desactivar el elemento
Linksclick()se utiliza para hacer clic en el enlace y esperar a que la carga de la página se complete antes de continuar con el siguiente comando.
Submit Buttonsubmit()
  • WebDriver permite la selección de más de una opción en un elemento de selección múltiple.
  • Puede utilizar el método submit() en cualquier elemento dentro del formulario. WebDriver activará automáticamente la función de envío del formulario al que pertenece ese elemento.

Puedes encontrar información valiosa en la documentación oficial de Selenium 

Te invito a continuar con nuestro Tutorial Selenium WebDriver

Compartir artículo

Leave Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.