Cómo comenzar tu amistad con Selenide

Tabla de contenido

• Configuración
• Abrir desbordamiento de pila
• Comprobación de la visibilidad y el estado habilitado de los elementos
• Vamos a refactorizar
• Encontrar elementos basados en texto
• Encontrar usando XPath
• Encontrar usando linkText o sharedLinkText
• Verificando la referencia del enlace
• Cerrando la pancarta
• Últimos retoques

Como prometí, comenzaremos a codificar en esta sección lo antes posible. En caso de que te hayas perdido mi artículo anterior , te recomiendo que lo leas de antemano, ya que proporcioné muchas razones por las que deberías probar Selenide.

Configuración

• Necesitará el kit de desarrollo de Java. Sugiero obtener el último Open JDK 17 .

• Como IDE, estoy usando IntelliJ IDEA , pero puedes usar lo que quieras. Además de IntelliJ, Eclipse y Visual Studio Code son los más populares.

• Para la gestión del código fuente utilizo Git , puedes encontrar el proyecto en GitHub .

• Usualmente uso Maven para proyectos Java, pero esta es la oportunidad perfecta para aprender algo nuevo, así que usaré Gradle esta vez. En caso de que cometa algún error estúpido con Gradle, no duden en decírmelo 😉

• Como marco de prueba de Java, TestNG y JUnit son los más populares. Iré con TestNG pero también proporcionaré la información requerida para JUnit 5. Eso es todo lo que necesitarás para el proyecto.

  
  

Continuemos creando un proyecto Gradle y abriendo el archivo build.gradle . Agreguemos las dependencias:

 dependencies { testImplementation 'org.testng:testng:7.5' implementation 'com.codeborne:selenide:6.2.1' implementation 'org.seleniumhq.selenium:selenium-java:4.1.1' }

Para JUnit:

 dependencies { testImplementation 'org.junit.jupiter:junit-jupiter-api:5.8.2' testRuntimeOnly 'org.junit.jupiter:junit-jupiter-engine:5.8.2' implementation 'com.codeborne:selenide:6.2.1' implementation 'org.seleniumhq.selenium:selenium-java:4.1.1' }

Especificar para usar TestNG:

 test { useTestNG() }

para JUnit:

 test { useJUnitPlatform() }

Estamos listos para irnos. Solo queda una pregunta. ¿Qué sitio probaremos?

¿Alguna vez se inscribió en un curso altamente calificado para aprender sobre la automatización de pruebas y se dio cuenta de que la mitad de las páginas que se usaron como ejemplos en el curso ya no existen o se han cambiado por completo?

Bueno, me pasó a mí. Mi elección es (casi) el segundo sitio favorito de todos los desarrolladores (justo después de Google) Stackoverflow . Mi tercer favorito es Baeldung si te interesa 😊. Estoy bastante seguro de que Stackoverflow no desaparecerá en un futuro próximo, pero, por supuesto, no puedo garantizar que no cambie su diseño.

Es hora de escribir nuestra primera prueba. Yayyy. Comencemos con algo simple.

Abrir desbordamiento de pila

Al usar Selenide , no tiene que usar WebDriver directamente, ya que abre y cierra automáticamente el navegador para nosotros usando Chrome de manera predeterminada. Podemos abrir la página con una sola línea sin ninguna configuración adicional.

 @Test public void openPage() { open("https://stackoverflow.com/"); }

Simplemente ejecute la prueba y verá que Stackoverflow se abre y luego se cierra inmediatamente. Cada vez que desarrollo y busco elementos DOM, prefiero abrir la misma página en mi navegador en modo de incógnito para poder ver exactamente el mismo resultado que vería cada vez que lo abro a través de Selenide. Hagamos esto ahora.

Lo primero que noto es que tenemos un banner de aceptación de cookies en esta página. Como en estos días, tenemos algo similar en cada sitio web, aceptemos la cookie. Pero antes de eso, terminemos nuestra primera prueba. Cada prueba que valga la pena debe verificar algunas condiciones.

Comprobación de la visibilidad y el estado habilitado de los elementos

Por supuesto, podríamos seleccionar muchas condiciones para probar, pero en este caso, me concentraré en demostrar las diferentes formas de verificación de condiciones de Selenide . Verifiquemos que tenemos un inicio de sesión visible y un botón de registro .

Para hacer eso, primero, tenemos que encontrar el elemento. Mirando el DOM en las herramientas de desarrollo de Chrome (o, por supuesto, puede usar Firefox u otras herramientas si lo prefiere) podemos ver que el botón Iniciar sesión es en realidad un enlace .

No tiene identificación, pero tiene un enlace de inicio de sesión de clase que parece único . Entonces podría usar un selector CSS simple o incluso un selector basado en ID. ¿Pero es realmente único?

Si observa atentamente, puede notar que, a pesar de su nombre, el enlace de registro tiene la misma clase de enlace de inicio de sesión que el botón de inicio de sesión, por lo que tendré que seleccionar en función de un índice . Para ese propósito, estoy usando XPath (en general, prefiero CSS sobre XPath porque es más rápido ).

Podrías pensar que deberíamos usar el texto para encontrar el elemento ya que es único, pero no lo recomiendo ya que según mi experiencia, los textos cambian más a menudo que las ID y las clases , ni siquiera hablando de probar con diferentes idiomas.

Escribamos el selector:

 $x("(//a[contains(@class, 'login-link')])[1]");

Es muy simple, conciso y directo. Puede usar $(String cssSelector), $$(String cssSelector) para encontrar un elemento ($) o elementos ($$) mediante CSS. De manera similar, puede usar $x(String xpath) y $$x(String xpath) para encontrar elementos usando XPath.

Por supuesto, también puede usar los comandos incorporados de Selenium By , usando $(By) y $$(By) . Selenide incluso proporciona nuevos selectores además de los selectores normales de Selenium como byText , withText y byAttribute .

En caso de que no estés familiarizado con los selectores básicos de Selenium, te recomiendo nuevamente el Curso Udemy de Rahul Shetty sobre Selenium. Tendrás una buena comprensión de ellos después de terminar el curso. Un recurso adicional que es bastante bueno para los principiantes es CSS Dinner .

Ahora que tenemos el elemento que es un SelenideElement (subclase de WebElement) podemos verificar su visibilidad:

$x("(//a[contains( @class , 'login-link')])[1]").shouldBe(visible); Es fácil leer este código. En realidad, escribirlo también es fácil y divertido. 😀 Podría preguntar qué sucede en caso de que el elemento no esté presente de inmediato en el DOM , o qué sucede si está presente pero necesita algún tiempo para volverse visible.

Selenide utiliza esperas implícitas tanto durante la búsqueda de elementos como durante la evaluación de las condiciones. El valor predeterminado es 4 segundos , pero se puede configurar. Las funciones should ( should, shouldHave, shouldBe, ShouldNot, shouldNotHave, shouldNotBe ) incluso tienen una versión sobrecargada que también acepta una Duración para especificar el tiempo de espera de forma explícita.

Puede ejecutar su prueba desde su IDE favorito, o puede ejecutarla desde la línea de comando usando Gradle:

 gradlew test

Simplemente cambie "visible" a "habilitado" para verificar el estado habilitado de un elemento:

 $x("(//a[contains(@class, 'login-link')])[1]").shouldBe(enabled);

Basado en el ejemplo anterior, es bastante fácil escribir la verificación para el enlace de registro:

 $x("(//a[contains(@class, 'login-link')])[2]").shouldBe(visible); $x("(//a[contains(@class, 'login-link')])[2]").shouldBe(enabled);

Refactoricemos

Antes de continuar, hagamos una refactorización , para que podamos hacer que el código sea más limpio y podamos acercarnos un paso más al modelo de objetos de página que escribiré en un artículo posterior. Hagamos 2 cosas. Primero, extraiga los elementos Iniciar sesión y Registrarse como constantes usando nombres significativos.

En caso de que le preocupe ubicar un elemento antes de que la página exista, tengo buenas noticias para usted. Selenium (así también como Selenide) usa una inicialización diferida , lo que significa que los elementos solo se ubicarán, cada vez que llame a algunos métodos sobre ellos.

En segundo lugar, utilizaremos el encadenamiento de métodos para obtener un código más conciso . Me gusta mucho esta técnica como la verás en artículos posteriores. Así que aquí está el código después de la refactorización:

 public class HomepageTest { private final SelenideElement loginLink = $x("(//a[contains(@class, 'login-link')])[1]"); private final SelenideElement signUpLink = $x("(//a[contains(@class, 'login-link')])[2]"); @Test public void openPage() { open("https://stackoverflow.com/"); loginLink.shouldBe(visible).shouldBe(enabled); signUpButton.shouldBe(visible).shouldBe(enabled); } }

Encontrar elementos basados en texto

Como prometí, pronto llegaremos al banner de cookies. Sólo una cosa más antes de eso. Como dije, no es la mejor idea ubicar elementos basados en textos, pero a veces simplemente no tiene otras opciones (por supuesto, puede encontrar todo con expresiones XPath absolutas, pero esa es una idea horrible ya que se romperá con el más mínimo cambio de la interfaz de usuario), o debe verificar si los elementos tienen un texto determinado.

Esta vez nos ceñiremos al inglés pero luego escribiré un artículo sobre internacionalización.

Busquemos el enlace con el texto "Acerca de" y verifiquemos si apunta a la ubicación correcta.

Aquí podemos elegir entre un par de opciones:

Encontrar usando XPath

 $x("//a[text()='About']"); $x("//a[contains(text(), 'bout')]");

Puede buscar coincidencias exactas o coincidencias parciales con XPath.

Encontrar usando linkText o sharedLinkText

 $(By.linkText("About")); $(By.partialLinkText("bout"));

Puede encontrar el elemento utilizando los localizadores estándar de Selenium.

Buscar usando byText y withText $(byText("About")) $(withText("bout")); También puede encontrar un elemento usando localizadores Selenide. byText es similar a linkText ya que encuentra un elemento usando una coincidencia exacta para el texto, y withText es similar a sharedLinkText ya que verifica si el texto del elemento contiene el texto dado o no.

Pero aquí hay una gran ventaja para Selenide: funciona con todo tipo de elementos , no solo con enlaces.

Verificando la referencia del enlace

Esto es bastante simple:

 aboutLink.shouldHave(href("/company"));

Recomiendo encarecidamente consultar la documentación de la clase Condiciones, para que pueda comprender bien las diferentes condiciones que ofrece Selenide.

Cerrando la pancarta

Finalmente, llegamos al último tema del artículo de hoy que es aceptar las cookies. Vamos a crear otra prueba llamada acceptCookies . Primero, busquemos el botón de aceptar:

Mirando la fuente de la página, podemos ver que es un botón en el que tenemos que hacer clic y tiene una clase js-accept-cookies que puede identificar el botón . Entonces, podemos encontrarlo fácilmente por nombre de clase:

 $(byClassName("js-accept-cookies"));

Después de encontrar el botón, podemos hacer clic en él simplemente usando el método click() en él, ya que podríamos haberlo aprendido usando Selenium.

 acceptCookiesButton.click();

En caso de que la prueba no falle, podemos decir que pudimos hacer clic en el botón de aceptar cookies, pero para estar seguros, verifiquemos si el banner realmente ha desaparecido . El banner es un div que tiene una clase js-consent-banner.

Para verificar que ya no está, podemos usar el método shouldNotBe :

 private final SelenideElement acceptCookieBanner = $("div.js-consent-banner"); . . acceptCookieBanner.shouldNotBe(visible);

o puedes escribir:

 acceptCookieBanner.shouldBe(hidden);

En realidad , should, shouldBe y shouldHave son sinónimos de manera similar a sus contrapartes shouldNot, shouldNotBe, shouldNotHave. Son intercambiables y también hay muchos sinónimos entre las condiciones, por lo que básicamente depende de usted cuál le resulta más legible. Estos ejemplos significan lo mismo:

 acceptCookieBanner.shouldBe(hidden); acceptCookieBanner.shouldNotBe(visible); acceptCookieBanner.should(disappear); acceptCookieBanner.shouldNot(appear);

Prefiero no usar la negación, así que voy con shouldBe(hidden).

Últimos retoques

Antes de terminar, hagamos 2 refactorizaciones más para reducir la duplicación y simplificar aún más el código.

Como estamos probando la misma página de inicio en estas pruebas, podemos mover la apertura de la página a una parte común que se ejecuta antes de cada prueba. En TestNG, puede usar la anotación @BeforeMethod para esto, usando JUnit 5, @BeforeEach será su solución.

Para obtener una buena comparación del uso de los dos marcos, consulte este artículo sobre Baeldung .

Al verificar el enlace de inicio de sesión y registro, usamos 2 métodos encadenados shouldBe para verificar si el componente está visible y habilitado. En realidad, puede fusionarlos en una sola llamada , ya que los métodos should pueden aceptar múltiples condiciones.

Este es el código final:

 public class HomepageTest { private final SelenideElement loginLink = $x("(//a[contains(@class, 'login-link')])[1]"); private final SelenideElement signUpLink = $x("(//a[contains(@class, 'login-link')])[2]"); private final SelenideElement aboutLink = $(byText("About")); private final SelenideElement acceptCookiesButton = $(byClassName("js-accept-cookies")); private final SelenideElement acceptCookieBanner = $("div.js-consent-banner"); @BeforeMethod public void setup() { open("https://stackoverflow.com/"); } @Test public void openPage() { loginLink.shouldBe(visible, enabled); signUpLink.shouldBe(visible, enabled); aboutLink.shouldHave(href("/company")); } @Test public void acceptCookies() { acceptCookiesButton.click(); acceptCookieBanner.shouldBe(hidden); } }

Se ve limpio, ¿no crees? 😊

Y eso es todo. Hemos terminado la lección de hoy. Espero que lo hayan disfrutado. No dude en compartir sus pensamientos sobre este artículo y sugerir temas para los próximos. En la próxima publicación, desarrollaré pruebas para la página de Preguntas de Stackoverflow.

📚 Antes de terminar, te doy una tarea . Usé XPath para encontrar el enlace de registro. ¡Escriba un selector de CSS (sin usar el texto del enlace) para encontrar el enlace de registro! Por favor, no publiques tu solución inmediatamente, dale algo de tiempo a los demás. Así que te pido que publiques tu solución el lunes ❣️

Te veo pronto...

Github: https://github.com/mszeles/selenide-tutorial

En caso de que no quieras perderte mis publicaciones , solo sígueme aquí en Hashnode , en LinkedIn , en Twitter en Medium.com , en dev.to e incluso en Instagram . 😊

PD: Apóyame compartiendo este artículo . 👍

📚 ¡ Únete a la comunidad de Selenide en LinkedIn ! ✌

¡Cómprame un café ! ❤️