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   , te recomiendo que lo leas de antemano, ya que proporcioné muchas razones por las que deberías probar Selenide. mi artículo anterior  Configuración  Necesitará el kit de desarrollo de Java. Sugiero obtener el último   . Open JDK 17  Como IDE, estoy usando   , pero puedes usar lo que quieras. Además de IntelliJ,   y   son los más populares. IntelliJ IDEA Eclipse Visual Studio Code  Para la gestión del código fuente utilizo   , puedes encontrar el proyecto en   . Git GitHub  Usualmente uso Maven para proyectos Java, pero esta es la oportunidad perfecta para aprender algo nuevo, así que   esta vez. En caso de que cometa algún error estúpido con Gradle, no duden en decírmelo 😉 usaré Gradle  Como marco de prueba de Java, TestNG y JUnit son los más populares. Iré con   también proporcionaré la información requerida para JUnit 5. Eso es todo lo que necesitarás para el proyecto. TestNG pero  Continuemos creando un proyecto Gradle y abriendo el archivo   . Agreguemos las dependencias: build.gradle   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)   . Mi tercer favorito es   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. Stackoverflow Baeldung  Es hora de escribir nuestra primera prueba. Yayyy. Comencemos con algo simple.  Abrir desbordamiento de pila  Al usar   , no tiene que usar WebDriver directamente, ya que   para nosotros usando   de manera predeterminada. Podemos abrir la página con una sola línea sin ninguna configuración adicional. Selenide abre y cierra automáticamente el navegador Chrome   @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,   Hagamos esto ahora.  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.  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   las diferentes formas de   .   . demostrar 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   (o, por supuesto, puede usar Firefox u otras herramientas si lo prefiere) podemos ver que el   . DOM en las herramientas de desarrollo de Chrome botón Iniciar sesión es en realidad un enlace  No tiene identificación, pero     de clase   . Entonces podría usar un selector CSS simple o incluso un selector basado en ID. ¿Pero es realmente único? tiene un enlace de inicio de sesión que parece único  Si observa atentamente, puede notar que, a pesar de su nombre, el enlace de registro tiene la     de   de sesión que el botón de inicio de sesión, por lo que tendré que   . Para ese propósito, estoy usando XPath (en general,   ).  misma clase enlace de inicio seleccionar en función de un índice prefiero CSS sobre XPath porque es más rápido  Podrías pensar que deberíamos   ya que es único, pero   ya que según mi experiencia,   , ni siquiera hablando de  usar el texto para encontrar el elemento no lo recomiendo los textos cambian más a menudo que las ID y las clases probar con diferentes idiomas.  Escribamos el selector:   $x("(//a[contains(@class, 'login-link')])[1]");  Es muy simple, conciso y directo. Puede usar   para encontrar un elemento ($) o elementos ($$) mediante CSS. De manera similar, puede usar   para encontrar elementos usando XPath. $(String cssSelector), $$(String cssSelector) $x(String xpath) y $$x(String xpath)  Por supuesto, también puede usar los comandos incorporados de Selenium   , usando   . Selenide incluso proporciona   además de los selectores normales de Selenium como   ,   y   . By $(By) y $$(By) nuevos selectores byText withText byAttribute  En caso de que no estés familiarizado con los selectores básicos de Selenium, te recomiendo nuevamente   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   . el Curso Udemy de Rahul Shetty CSS Dinner  Ahora que tenemos el elemento que es un SelenideElement (subclase de WebElement) podemos verificar su visibilidad:  $x("(//a[contains(   , '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   , o qué sucede si está presente pero  @class en caso de que el elemento no esté presente de inmediato en el DOM necesita algún tiempo para volverse visible.    tanto durante la búsqueda de elementos como durante la evaluación de las condiciones. El   , pero se puede configurar. Las funciones should (   ) incluso tienen una versión sobrecargada que también acepta una Duración para especificar el tiempo de espera de forma explícita. Selenide utiliza esperas implícitas valor predeterminado es 4 segundos should, shouldHave, shouldBe, ShouldNot, shouldNotHave, shouldNotBe  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   , 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,   los  refactorización extraiga 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   , lo que significa que los elementos solo se ubicarán, cada vez que llame a algunos métodos sobre ellos. una inicialización diferida  En segundo lugar, utilizaremos el   para obtener un   . 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: encadenamiento de métodos código más conciso   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   (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  a veces simplemente no tiene otras opciones 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.   es similar a linkText ya que encuentra un elemento usando una coincidencia exacta para el texto, y   es similar a sharedLinkText ya que verifica si el texto del elemento contiene el texto dado o no. byText withText  Pero aquí hay una gran ventaja para Selenide:   , no solo con enlaces. funciona con todo tipo de elementos  Verificando la referencia del enlace  Esto es bastante simple:   aboutLink.shouldHave(href("/company"));  Recomiendo encarecidamente consultar la   de la clase Condiciones, para que pueda comprender bien las diferentes condiciones que ofrece Selenide. documentación  Cerrando la pancarta  Finalmente, llegamos al último tema del artículo de hoy que es aceptar las cookies. Vamos a crear otra prueba llamada   . Primero, busquemos el botón de aceptar:  acceptCookies  Mirando la fuente de la página, podemos ver que es un botón en el que tenemos que hacer clic y tiene una     que   . Entonces, podemos encontrarlo fácilmente por nombre de clase: clase js-accept-cookies puede identificar el botón   $(byClassName("js-accept-cookies"));  Después de encontrar el botón, podemos hacer   en él, ya que podríamos haberlo aprendido usando Selenium. clic en él simplemente usando el método click()   acceptCookiesButton.click();  En caso de que la prueba no falle, podemos decir que pudimos hacer clic en el botón de aceptar cookies, pero   . El banner es un div que tiene una clase js-consent-banner. para estar seguros, verifiquemos si el banner realmente ha desaparecido  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   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: , should, shouldBe y shouldHave son sinónimos de manera similar a sus contrapartes shouldNot, shouldNotBe, shouldNotHave.   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,   En TestNG, puede usar la anotación   para esto, usando JUnit 5,   será su solución. podemos mover la apertura de la página a una parte común que se ejecuta antes de cada prueba. @BeforeMethod @BeforeEach  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   para verificar si el componente está visible y habilitado. En realidad,   , ya que los métodos should pueden aceptar múltiples condiciones. 2 métodos encadenados shouldBe puede fusionarlos en una sola llamada  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.   En la próxima publicación,  No dude en compartir sus pensamientos sobre este artículo y sugerir temas para los próximos. desarrollaré pruebas para la página de Preguntas de Stackoverflow.  📚 Antes de terminar, te   . Usé XPath 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   ❣️ doy una tarea ¡Escriba un selector de CSS (sin usar el texto del enlace) para encontrar el enlace de registro! publiques tu solución el lunes  Te veo pronto...  Github:  https://github.com/mszeles/selenide-tutorial  En caso de que   , solo     , en   , en   en   , en   e incluso en   . 😊 no quieras perderte mis publicaciones sígueme aquí en Hashnode LinkedIn Twitter Medium.com dev.to Instagram  PD:   . 👍 Apóyame compartiendo este artículo  📚 ¡   en   ! ✌ Únete a la comunidad de Selenide LinkedIn    ! ❤️ ¡Cómprame un café

Google

Instagram

Twitter

2022 - HackerNoon Contributor of the Year - Software Testing

2022 - HackerNoon Contributor of the Year - Testing

2022 - the Greatest Storyteller

Nominated for 2022 - the Greatest Storyteller

Nominated for 2022 - HackerNoon Contributor of the Year - Testing

Nominated for 2022 - HackerNoon Contributor of the Year - Software Testing

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Cómo comenzar tu amistad con Selenide

Cómo comenzar tu amistad con Selenide

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps