Elemento web en Selenium: TextoBox, Botón, enviar teclas(), hacer clic()
Elemento web en Selenium
Los formularios son elementos web fundamentales para recibir información de los visitantes del sitio web. Los formularios web tienen diferentes elementos de interfaz gráfica de usuario, como cuadros de texto, campos de contraseña, casillas de verificación, botones de opción, menús desplegables, entradas de archivos, etc.
Veremos cómo acceder a estos diferentes elementos del formulario usando Selenium Controlador web con Java. Selenium encapsula cada elemento del formulario como un objeto de WebElement. Proporciona una API para encontrar los elementos y realizar acciones sobre ellos, como ingresar texto en cuadros de texto, hacer clic en los botones, etc. Veremos los métodos que están disponibles para acceder a cada elemento del formulario.
Introducción a WebElement, findElement(), findElements()
Selenium Web Driver encapsula un elemento de formulario simple como un objeto de elemento web.
Existen varias técnicas mediante las cuales WebDriver identifica los elementos del formulario en función de las diferentes propiedades de los elementos web, como ID, nombre, clase, XPath, nombre de etiqueta, selectores CSS, texto de enlace, etc.
Web Driver proporciona los siguientes dos métodos WebElement para encontrar los elementos.
- buscarElemento() – encuentra un único elemento web y lo devuelve como WebElement Selenium objeto.
- buscarElementos() – devuelve una lista de objetos WebElement que coinciden con los criterios del localizador.
Veamos los fragmentos de código para obtener un solo elemento: campo de texto en una página web como un objeto de WebElement usando el método findElement(). Cubriremos el método findElements() para buscar múltiples elementos en tutoriales posteriores.
Paso 1) Necesitamos importar este paquete para crear objetos de Elementos Web.
Paso 2) Necesitamos llamar al método findElement() disponible en la clase WebDriver y obtener un objeto de WebElement.
Consulte a continuación para ver cómo se hace.
Selenium Texto de entrada
Los cuadros de entrada se refieren a cualquiera de estos dos tipos:
- Campos de texto– Selenium cuadros de texto de entrada que aceptan valores escritos y los muestran tal como son.
- Campos de contraseña– cuadros de texto que aceptan valores escritos pero los enmascaran como una serie de caracteres especiales (comúnmente puntos y asteriscos) para evitar que se muestren valores confidenciales.
Localizadores
El método findElement() toma un parámetro que es un localizador del elemento. Diferentes localizadores como By.id(), By.name(), By.xpath(), By.CSSSelector(), etc. ubican los elementos en la página usando sus propiedades como “““ id, nombre o ruta, etc.
Puede utilizar complementos como Fire path para obtener ayuda para obtener la identificación, xpath, etc. de los elementos.
Usando el sitio de ejemplo https://demo.guru99.com/test/login.html A continuación se muestra el código para ubicar el campo de texto “Dirección de correo electrónico” usando el localizador de identificación y el campo “Contraseña” usando el localizador de nombre.
- El campo de texto del correo electrónico se encuentra junto al Id.
- El campo de contraseña se encuentra por nombre
enviar claves en Selenium
enviar claves() en Selenium es un método que se utiliza para introducir contenido editable en los campos de texto y contraseña durante la ejecución de la prueba. Estos campos se identifican mediante localizadores como nombre, clase, id, etc. Es un método disponible en el elemento web. A diferencia del método type, el método sendkeys() no reemplaza el texto existente en ningún cuadro de texto.
Cómo ingresar texto en Selenium
Para ingresar texto en los campos de texto y los campos de contraseña, sendKeys() es el método disponible en WebElement en Selenium.
Usando el mismo ejemplo de https://demo.guru99.com/test/login.html sitio, así es como encontramos los campos Campo de texto y Contraseña e ingresamos texto en Selenium.
- Busque el campo de texto “Dirección de correo electrónico” utilizando el localizador de identificación.
- Busque el campo "Contraseña" utilizando el localizador de nombres
- Introduzca texto en la “Dirección de correo electrónico” utilizando el Selenium método de envío de claves.
- Ingrese una contraseña en el campo "Contraseña" usando el método sendKeys().
Eliminar valores en la entrada Boxes
Se registra en la claro() Este método se utiliza para eliminar el texto de un cuadro de entrada. Este método no necesita un parámetro.El fragmento de código a continuación borrará el texto de los campos de correo electrónico o contraseña.
Selenium Haga clic en los botones
Se registra en la Selenium Se puede acceder al botón de clic utilizando el método click().
En el ejemplo anterior
- Encuentra el botón para iniciar sesión
- Haga clic en el botón "Iniciar sesión" en la página de inicio de sesión del sitio para iniciar sesión en el sitio.
Selenium Enviar botones
Los botones de envío se utilizan para enviar el formulario completo al servidor. Podemos usar el método hacer clic () en el elemento web como un botón normal como lo hicimos anteriormente o usar el método enviar () en cualquier elemento web en el formulario o en el botón de enviar.
Cuando se usa enviar (), WebDriver buscará el DOM para saber a qué formulario pertenece el elemento y luego activará su función de envío.
Código Completo
Aquí está el código de trabajo completo.
import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.*; public class Form { public static void main(String[] args) { // declaration and instantiation of objects/variables System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe"); WebDriver driver = new ChromeDriver(); String baseUrl = "https://demo.guru99.com/test/login.html"; driver.get(baseUrl); // Get the WebElement corresponding to the Email Address(TextField) WebElement email = driver.findElement(By.id("email")); // Get the WebElement corresponding to the Password Field WebElement password = driver.findElement(By.name("passwd")); email.sendKeys("abcd@gmail.com"); password.sendKeys("abcdefghlkjl"); System.out.println("Text Field Set"); // Deleting values in the text box email.clear(); password.clear(); System.out.println("Text Field Cleared"); // Find the submit button WebElement login = driver.findElement(By.id("SubmitLogin")); // Using click method to submit form email.sendKeys("abcd@gmail.com"); password.sendKeys("abcdefghlkjl"); login.click(); System.out.println("Login Done with Click"); //using submit method to submit the form. Submit used on password field driver.get(baseUrl); driver.findElement(By.id("email")).sendKeys("abcd@gmail.com"); driver.findElement(By.name("passwd")).sendKeys("abcdefghlkjl"); driver.findElement(By.id("SubmitLogin")).submit(); System.out.println("Login Done with Submit"); //driver.close(); } }
Diagnóstico
Si encuentra NoSuchElementException() mientras busca elementos, significa que el elemento no se encuentra en la página en el momento en que el controlador web accedió a la página.
- Verifique su localizador nuevamente usando Firepath o Inspect Element en Chrome.
- Compruebe si el valor que utilizó en el código es diferente del del elemento en Firepath ahora.
- Algunas propiedades son dinámicas para algunos elementos. En caso de que descubra que el valor es diferente y cambia dinámicamente, considere usar By.xpath() o By.cssSelector(), que son métodos más confiables pero complejos.
- A veces, también podría ser un problema de espera, es decir, el controlador web ejecutó su código incluso antes de que la página se cargara por completo, etc.
- Agregue una espera antes de findElement() usando esperas implícitas o explícitas.
Resum
- La siguiente tabla resume los comandos para acceder a cada tipo de elemento discutido anteriormente.
Element | Comando | Descripción |
---|---|---|
Entrada Box | sendKeys () | Se utiliza para introducir valores en cuadros de texto. |
claro() | Se utiliza para borrar el valor actual de los cuadros de texto. | |
Enlaces | hacer clic() | se utiliza para hacer clic en el enlace y esperar a que se complete la carga de la página antes de continuar con el siguiente comando. |
Enviar | enviar() |
- WebDriver permite la selección de más de una opción en un elemento SELECT múltiple.
- Puede utilizar el método enviar() en cualquier elemento del formulario. WebDriver activará automáticamente la función de envío del formulario al que pertenece ese elemento.