Selenium con Java y Cucumber: automatización de pruebas web

Vamos a necesitar interactuar con una página web, hacer validaciones y poder escribir nuestros escenarios en formato Gherkin. ¿Están listos para instalar todo lo necesario?

Configuración del build.gradle

1. Dependencias:

   • Selenium WebDriver:

     testImplementation 'org.seleniumhq.selenium:selenium-java:última_versión'

   • Cucumber:

     testImplementation 'io.cucumber:cucumber-java:última_versión' testImplementation 'io.cucumber:cucumber-junit:última_versión'

   • TestNG:

     testImplementation 'org.testng:testng:última_versión'

Una extensión útil para navegar rápido de Feature file a Step Definition y que nos marque si algún paso de nuestros scenarios no está implementado aún. 

La extensión en VSCode es: alexkrechik.cucumberautocomplete

Archivos que hemos modificado: .vscode/settings.json

settings.json

{

    "cucumberautocomplete.steps": ["src/test/java/steps/*.java"],

    "cucumberautocomplete.syncfeatures": "test/features/*.feature",

    "cucumberautocomplete.strictGherkinCompletion": true,

    "cucumberautocomplete.strictGherkinValidation": true,

    "java.compile.nullAnalysis.mode": "automatic",

    "java.configuration.updateBuildConfiguration": "automatic"

}

Programación Orientada a Objectos...automatización de páginas web y páginas siendo objetos...todo se une en este concepto que va a hacer que el mantenimiento de tu framework sea una brisa. 

Veamos de qué va el Page Object Model, cómo es su teoría y por qué deberías usarlo. 

Veamos en esta clase a la otra gran opción al Page Object Model: Screenplay. ¿Qué es? ¿Es popular? ¿Qué herramientas se usan? ¿Cómo se ve?

¡Todo eso y más en esta clase! 

Llegó el momento de crear nuestro primer Feature File y, para poder correrlo (sin éxito) por primera vez para validar que tenemos todo instalado y configurado correctamente, vamos a tener que completar una serie de pasos. 

Acá les dejo las clases que creamos y modificamos y su código como referencia.

settings.gradle: Le sacamos que incluya "app" y dejamos solo

rootProject.name = 'SeleniumFreeRange'

TestRunner.java

package runner;

import org.junit.runner.RunWith;

import io.cucumber.junit.Cucumber;

import io.cucumber.junit.CucumberOptions;

@RunWith(Cucumber.class)

@CucumberOptions(features = "src/test/resources",

                 glue = "src/test/java/steps",

                 plugin = { "pretty", "html:target/cucumber-reports" })

public class TestRunner {}

FreeRangeNavigation.feature

Feature: Navigation bar

To see the subpages

Without logging in

I can click the navigation bar links

Scenario: I can access the subpages through the navigation bar

  Given I navigate to www.freerangetesters.com

  When I try to access the free sections through the navigation bar

  Then I am redirected to the right page

Al final de build.gradle, cambiamos la tarea "test" de la siguiente manera.

tasks.named('test') {

systemProperty "cucumber.options", System.getProperty("cucumber.options")}

En esta clase estamos haciendo una de las partes fundamentales de nuestro framework y, también, de las más complejas. Atentos a los comentarios que agregué al código y a la clase! 

Archivos en los que trabajamos: 

A FreeRangeNavegacion.feature, de momento, le vamos a dejar solo un paso, el Given. 

Feature: Navigation bar

    To see the subpages

    Without logging in

    I can click the navigation bar links

Scenario: I can access the subpages through the navigation bar

    Given I navigate to www.freerangetesters.com

Ahora, en la BasePage.java es donde va a ocurrir la magia:

package pages;

// Importaciones necesarias

import java.time.Duration;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.chrome.ChromeDriver;

import org.openqa.selenium.support.ui.WebDriverWait;

import io.github.bonigarcia.wdm.WebDriverManager;

public class BasePage {

    /*

     * Declaración de una variable estática 'driver' de tipo WebDriver

     * Esta variable va a ser compartida por todas las instancias de BasePage y sus subclases

     */

    protected static WebDriver driver;

    /*

     * Declaración de una variable de instancia 'wait' de tipo WebDriverWait.

     * Se inicializa inmediatamente con una instancia dew WebDriverWait utilizando el 'driver' estático

     * WebDriverWait se usa para poner esperas explícitas en los elementos web

     */

    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(5));

    /*

     * Configura el WebDriver para Chrome usando WebDriverManager.

     * WebDriverManager va a estar descargando y configurando automáticamente el driver del navegador

    */

    static {

        WebDriverManager.chromedriver().setup();

        //Inicializa la variable estática 'driver' con una instancia de ChromeDriver

        driver = new ChromeDriver();

    }

    /*

     * Este es el constructor de BasePage que acepta un objeto WebDriver como argumento.

     */

    public BasePage(WebDriver driver) {

        BasePage.driver = driver;

    }

    //Método estático para navegar a una URL.

    public static void navigateTo(String url) {

        driver.get(url);

    }

}

Llegó el momento de crear las próximas partes que van a dar vida a nuestro Framework BDD con Selenium y Cucumber. 

Acá las clases y el código que hemos hecho:

PaginaPrincipal.java dentro de la carpeta Pages.

package pages;

public class PaginaPrincipal extends BasePage {

    public PaginaPrincipal() {

        super(driver);

    }

    // Método para navegar a www.freerangetesters.com

    public void navigateToFreeRangeTesters() {

        navigateTo("https://www.freerangetesters.com");

    }

}

FreeRangeSteps.java dentro de la carpeta steps.

package steps;

import io.cucumber.java.en.Given;

import pages.PaginaPrincipal;

public class FreeRangeSteps {

    PaginaPrincipal landingPage = new PaginaPrincipal();

    @Given("I navigate to www.freerangetesters.com")

    public void iNavigateToFRT() {

        landingPage.navigateToFreeRangeTesters();

    }

}

El TestRunner.java en la carpeta runner tuvo un pequeño cambio en el path a los steps, ahora queda así:

package runner;

import org.junit.runner.RunWith;

import io.cucumber.junit.Cucumber;

import io.cucumber.junit.CucumberOptions;

@RunWith(Cucumber.class)

@CucumberOptions(features = "src/test/resources", // Directorio de nuestros archivos .feature

        glue = "steps", // Paquete donde tenemos nuestras clases definiendo los steps

        plugin = { "pretty", "html:target/cucumber-reports" })

public class TestRunner {

}

3 líneas de código super importantes. Les voy a enseñar mi implementación para manejar elementos web con Selenium y Java! 

Archivos sobre los que trabajamos: pages/BasePage.java y pages/PaginaPrincipal.java

BasePage.java

package pages;

// Importaciones necesarias

import java.time.Duration;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.chrome.ChromeDriver;

import org.openqa.selenium.support.ui.ExpectedConditions;

import org.openqa.selenium.support.ui.WebDriverWait;

import io.github.bonigarcia.wdm.WebDriverManager;

public class BasePage {

    /*

     * Declaración de una variable estática 'driver' de tipo WebDriver

     * Esta variable va a ser compartida por todas las instancias de BasePage y sus subclases

     */

    protected static WebDriver driver;

    /*

     * Declaración de una variable de instancia 'wait' de tipo WebDriverWait.

     * Se inicializa inmediatamente con una instancia dew WebDriverWait utilizando el 'driver' estático

     * WebDriverWait se usa para poner esperas explícitas en los elementos web

     */

    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(5));

    /*

     * Configura el WebDriver para Chrome usando WebDriverManager.

     * WebDriverManager va a estar descargando y configurando automáticamente el driver del navegador

    */

    static {

        WebDriverManager.chromedriver().setup();

        //Inicializa la variable estática 'driver' con una instancia de ChromeDriver

        driver = new ChromeDriver();

    }

    /*

     * Este es el constructor de BasePage que acepta un objeto WebDriver como argumento.

     */

    public BasePage(WebDriver driver) {

        BasePage.driver = driver;

    }

    //Método estático para navegar a una URL.

    public static void navigateTo(String url) {

        driver.get(url);

    }

    // Encuentra y devuelve un WebElement en la página utilizando un locator XPath, esperando a que esté presentente en el DOM

    private WebElement Find(String locator){

        return wait.until(ExpectedConditions.presenceOfElementLocated(By.xpath(locator)));

    }

    public void clickElement(String locator){

        Find(locator).click();

    }

}

El ejemplo del final lo hice en pages/PaginaPrincipal.java

package pages;

public class PaginaPrincipal extends BasePage {

    private String searchButton = "//*[@id=\"page_section_48252437\"]/div/section/div[2]";

    public PaginaPrincipal() {

        super(driver);

    }

    // Método para navegar a www.freerangetesters.com

    public void navigateToFreeRangeTesters() {

        navigateTo("https://www.freerangetesters.com");

        clickElement(searchButton);

    }

}

Seguimos añadiendo funcionalidad a nuestro framework y en esta clase vamos a sumar algo especialmente útil: Tags! 

Archivos en los que trabajamos: build.gradle, TestRunner.java, FreeRangeNavegacion.feature

FreeRangeNavegacion: 

Feature: Navigation

    To see the subpages

    Without logging in

    I can click the navigation bar links

    Scenario Outline: I can access the subpages through the navigation bar

        Given I navigate to www.freerangetesters.com

        When I go to <section> using the navigation bar

        Examples:

            | section    |

            | Cursos     |

            | Recursos   |

            | Udemy      |

            | Mentorías  |

            | Newsletter |

    @Courses

    Scenario: Courses are presented correctly to potential customers

        Given I navigate to www.freerangetesters.com

        When I go to Cursos using the navigation bar

        And select Introducción al Testing

    @Plans @Courses

    Scenario: Users can select a plan when signing up

        Given I navigate to www.freerangetesters.com

        When I select Elegir Plan

        Then I can validate the options in the checkout page

TestRunner:

package runner;

import org.junit.AfterClass;

import org.junit.runner.RunWith;

import io.cucumber.junit.Cucumber;

import io.cucumber.junit.CucumberOptions;

import pages.BasePage;

@RunWith(Cucumber.class)

@CucumberOptions(features = "src/test/resources", // Directorio de nuestros archivos .feature

                glue = "steps", // Paquete donde tenemos nuestras clases definiendo los steps

                plugin = { "pretty", "html:target/cucumber-reports" }, tags = "@Papa")

public class TestRunner {

        @AfterClass

        public static void cleanDriver() {

                BasePage.closeBrowser();

        }

}

build.gradle:

/*

* This file was generated by the Gradle 'init' task.

*

* This generated file contains a sample Java application project to get you started.

* For more details take a look at the 'Building Java & JVM projects' chapter in the Gradle

* User Manual available at https://docs.gradle.org/8.0.2/userguide/building_java_projects.html

*/

plugins {

    // Apply the application plugin to add support for building a CLI application in Java.

    id 'application'

}

repositories {

    // Use Maven Central for resolving dependencies.

    mavenCentral()

}

dependencies {

    // Use JUnit Jupiter for testing.

    testImplementation 'org.junit.jupiter:junit-jupiter:5.9.1'

    // https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java

    implementation 'org.seleniumhq.selenium:selenium-java:4.15.0'   

    // https://mvnrepository.com/artifact/io.github.bonigarcia/webdrivermanager

    implementation 'io.github.bonigarcia:webdrivermanager:5.6.2'

    // https://mvnrepository.com/artifact/org.testng/testng

    testImplementation 'org.testng:testng:7.8.0'

    // https://mvnrepository.com/artifact/io.cucumber/cucumber-java

    implementation 'io.cucumber:cucumber-java:7.14.1'

    // https://mvnrepository.com/artifact/io.cucumber/cucumber-junit

    testImplementation 'io.cucumber:cucumber-junit:7.14.1'

}

tasks.named('test') {

    systemProperty "cucumber.options", System.getProperty("cucumber.options")

    systemProperties System.getProperties();

}

Opciones a la hora de correr tags

gradle test -Dcucumber.filter.tags="@Plans" -> Va a correr Scenarios taggeados con @Plan

gradle test -Dcucumber.filter.tags="Not @Plans" -> Va a correr todos los Scenarios que no tengan el tag @Plan

gradle test -Dcucumber.filter.tags="@Plans" and "@Courses" -> Va a correr todos los scenarios que tengan ambos, @Plan y @Courses tags al mismo tiempo. 

gradle test -Dcucumber.filter.tags="@Plans" or "@Courses" -> Va a correr los scenarios que tengan los tags @Plans o @Courses (osea...todos los scenarios que tengan uno u otro).

gradle test -Dcucumber.filter.tags="@Plans" and not "@Courses" -> Va a correr todos los scenarios que tengan el tag "@Plans" y no tengan "@Courses".

Los Feature files van a ser tan buenos como organizados y prolijos estén. En esta clase, vamos a sumar otra funcionalidad para ir hacia ahí: Los Backgrounds.

Archivos en los que trabajamos en la clase: FreeRangeNavegación.feature, TestRunner.java

FreeRangeNavegación

@Navigation

Feature: Navigation

    To see the subpages

    Without logging in

    I can click the navigation bar links

    Background: I am on the Free Range Testers web without logging in.

        Given I navigate to www.freerangetesters.com

    Scenario Outline: I can access the subpages through the navigation bar

        When I go to <section> using the navigation bar

        Examples:

            | section    |

            | Cursos     |

            | Recursos   |

            | Udemy      |

            | Mentorías  |

            | Newsletter |

    @Courses

    Scenario: Courses are presented correctly to potential customers

        When I go to Cursos using the navigation bar

        And select Introducción al Testing

    @Plans @Courses

    Scenario: Users can select a plan when signing up

        When I select Elegir Plan

        Then I can validate the options in the checkout page

TestRunner:

package runner;

import org.junit.AfterClass;

import org.junit.runner.RunWith;

import io.cucumber.junit.Cucumber;

import io.cucumber.junit.CucumberOptions;

import pages.BasePage;

@RunWith(Cucumber.class)

@CucumberOptions(features = "src/test/resources", // Directorio de nuestros archivos .feature

                glue = "steps", // Paquete donde tenemos nuestras clases definiendo los steps

                plugin = { "pretty", "html:target/cucumber-reports" }, tags = "@Navigation")

public class TestRunner {

        @AfterClass

        public static void cleanDriver() {

                BasePage.closeBrowser();

        }

}

Los Feature files son mucho más que simples abstracciones de lo que Selenium está haciendo detrás de escenas, son lo que el Manager, el Business Analyst o el Product Owner van a ver como resultado de nuestro trabajo como Ingenieros QA en los reportes que generemos. 

Por este motivo, es vital mantenerlos ordenados, prolijos y profesionales. En esta clase vamos a ver cómo usar las expresiones que nos permiten escribir los steps con distintas palabras, sin alterar el sentido de las acciones realizadas.

Archivos en los que trabajamos: FreeRangeNavegacion.feature y FreeRangeSteps.java

FreeRangeSteps:

package steps;

import java.util.List;

import org.testng.Assert;

import org.testng.asserts.SoftAssert;

import java.util.Arrays;

import io.cucumber.java.en.*;

import pages.PaginaCursos;

import pages.PaginaFundamentosTesting;

import pages.PaginaPrincipal;

import pages.PaginaRegistro;

public class FreeRangeSteps {

    SoftAssert soft = new SoftAssert();

    PaginaPrincipal landingPage = new PaginaPrincipal();

    PaginaCursos cursosPage = new PaginaCursos();

    PaginaFundamentosTesting fundamentosPage = new PaginaFundamentosTesting();

    PaginaRegistro registro = new PaginaRegistro();

    @Given("I navigate to www.freerangetesters.com")

    public void iNavigateToFRT() {

        landingPage.navigateToFreeRangeTesters();

    }

    @When("I go to {word} using the navigation bar")

    public void navigationBarUse(String section) {

        landingPage.clickOnSectionNavigationBar(section);

    }

    @When("(I|The user|The client) (select|selects) Elegir Plan")

    public void selectElegirPlan() {

        landingPage.clickOnElegirPlanButton();

    }

    @And("(I|The user|The client) (select|selects) Introducción al Testing")

    public void navigateToIntro() {

        cursosPage.clickFundamentosTestingLink();

        fundamentosPage.clickIntroduccionTestingLink();

    }

    @Then("(I|The user|The client) can validate the options in the checkout page")

    public void validateCheckoutPlans() {

        List<String> lista = registro.returnPlanDropdownValues();

        List<String> listaEsperada = Arrays.asList("Academia: $16.99 / mes • 11 productos",

                "Academia: $176 / año • 11 productos", "Free: Gratis • 1 producto");

        Assert.assertEquals(listaEsperada, lista);

    }

}

FreeRangeNavegacion: 

@Navigation

Feature: Navigation

    To see the subpages

    Without logging in

    I can click the navigation bar links

    Background: I am on the Free Range Testers web without logging in.

        Given I navigate to www.freerangetesters.com

    Scenario Outline: I can access the subpages through the navigation bar

        When I go to <section> using the navigation bar

        Examples:

            | section    |

            | Cursos     |

            | Recursos   |

            | Udemy      |

            | Mentorías  |

            | Newsletter |

    @Courses

    Scenario: Courses are presented correctly to potential customers

        When I go to Cursos using the navigation bar

        And I select Introducción al Testing

    @Plans @Courses

    Scenario: Users can select a plan when signing up

        When The client selects Elegir Plan

        Then The client can validate the options in the checkout page

Pensabas que estábamos listos con las expresiones regulares? Cucumber no está de acuerdo con eso. Veamos cómo solucionar el actual problema de steps no definidos (aunque si estén definidos) cuando tenemos expresiones regulares.

Archivo sobre el que trabajamos: FreeRangeSteps.java

FreeRangeSteps

package steps;

import java.util.List;

import org.testng.Assert;

import org.testng.asserts.SoftAssert;

import java.util.Arrays;

import io.cucumber.java.en.*;

import pages.PaginaCursos;

import pages.PaginaFundamentosTesting;

import pages.PaginaPrincipal;

import pages.PaginaRegistro;

public class FreeRangeSteps {

    SoftAssert soft = new SoftAssert();

    PaginaPrincipal landingPage = new PaginaPrincipal();

    PaginaCursos cursosPage = new PaginaCursos();

    PaginaFundamentosTesting fundamentosPage = new PaginaFundamentosTesting();

    PaginaRegistro registro = new PaginaRegistro();

    @Given("I navigate to www.freerangetesters.com")

    public void iNavigateToFRT() {

        landingPage.navigateToFreeRangeTesters();

    }

    @When("I go to {word} using the navigation bar")

    public void navigationBarUse(String section) {

        landingPage.clickOnSectionNavigationBar(section);

    }

    @When("^(?:I|The user|The client) selects? Elegir Plan$")

    public void selectElegirPlan() {

        landingPage.clickOnElegirPlanButton();

    }

    @And("^(?:I|The user|The client) selects? Introducción al Testing$")

    public void navigateToIntro() {

        cursosPage.clickFundamentosTestingLink();

        fundamentosPage.clickIntroduccionTestingLink();

    }

    @Then("^(?:I|The user|The client) can validate the options in the checkout page$")

    public void validateCheckoutPlans() {

        List<String> lista = registro.returnPlanDropdownValues();

        List<String> listaEsperada = Arrays.asList("Academia: $16.99 / mes • 11 productos",

                "Academia: $176 / año • 11 productos", "Free: Gratis • 1 producto");

        Assert.assertEquals(listaEsperada, lista);

    }

}

Las verificaciones son una parte fundamental a la hora de automatizar. Vamos a necesitar verificar que el estado de un sistema y sus elementos es el esperado y para eso vamos a usar la librería Assert de TestNG. 

Acá les dejo los tipos más usados de Assertions y las que vimos en el video: 

TestNG proporciona una serie de métodos de aserción a través de la clase Assert para verificar que las condiciones de las pruebas sean cumplidas. Estas aserciones son esenciales para validar el comportamiento esperado de la aplicación bajo prueba. A continuación, te detallo algunas de las aserciones más comunes y te proporciono ejemplos utilizando Selenium y Java:

1. assertEquals

Verifica que dos valores sean iguales.

  Assert.assertEquals(actualTitle, expectedTitle, "El título de la página no es el esperado.");

2. assertNotEquals

Verifica que dos valores no sean iguales.

   Assert.assertNotEquals(actualTitle, incorrectTitle, "El título de la página no debería ser este.");

3. assertTrue

Verifica que una condición sea verdadera.

  Assert.assertTrue(isElementPresent, "El elemento debería estar presente.");

4. assertFalse

Verifica que una condición sea falsa.

   Assert.assertFalse(isElementPresent, "El elemento no debería estar presente.");

Estos son solo ejemplos básicos pero de los más usados. Tengan en cuenta lo que ya vimos en las clases, especialmente lo relacionado a cómo Selenium interactúa con elementos web y cómo nos "traemos" información de ellos para poder validar.

Van a haber momentos en los que van a tener que validar muchas pequeñas cosas que no son como para hacer un scenario por cada una. Digamos, por ejemplo, un formulario con muchos campos. 

Queremos tener un test que valide que los campos están presentes y en el estado que los requerimientos dicen, pero no vamos a hacer 25 tests distintos para cada campo. Ahí es donde entran las Soft Assertions. A continuación, dejo cómo implementarlas y un ejemplo: 

Primero el import:

import org.testng.asserts.SoftAssert;

Segundo crear la instancia del objeto SoftAssert

SoftAssert soft = new SoftAssert();

Y así se ven (exactamente como las assertions comunes, pero con el potente assertAll(); al final!

public void Ejemplulis() {

        String palabraEsperada = "Pepe";

        String palabraEncontrada = "Papa";

        // Soft Assertions: No detienen la ejecución al fallar. Ideal para verificar

        // muchas cosas pequeñas a la vez.

        soft.assertEquals(palabraEsperada, palabraEncontrada);

        soft.assertTrue(palabraEncontrada.contains(palabraEsperada));

        soft.assertNotEquals(palabraEncontrada,palabraEsperada);

        soft.assertAll();

    }

Es momento de ver qué podemos hacer con los reportes de Cucumber y qué otras opciones hay. 

Archivos sobre los que vamos a trabajar: resources/cucumber.properties

cucumber.properties

cucumber.publish.enabled=true

Además, en la terminal zsh de VSCode van a necesitar configurar el token que les da Cucumber Reports al loguear. 

La web de Cucumber Reports es: https://reports.cucumber.io

Ahí mismo loguean y se crean una colección. Esta colección va a estar asociada a un token. 

El token, como dijimos antes, lo van a definir en la terminal con 

export CUCUMBER_PUBLISH_TOKEN=some-secret-token (reemplacen el some-secret-token por el token que les dio Cucumber)

Llegó el momento de sumar screenshots a los reportes de Cucumber! ¿Cómo lo hacemos? Sencillo, con una nueva clase que vamos a crear en esta clase.

Archivo que creamos y trabajamos en esta clase:  steps/Hooks.java

package steps;

import org.openqa.selenium.OutputType;

import org.openqa.selenium.TakesScreenshot;

import io.cucumber.java.After;

import io.cucumber.java.Scenario;

import pages.BasePage;

public class Hooks extends BasePage {

    public Hooks() {

        super(driver);

    }

    @After

    public void tearDown(Scenario scenario) {

        if (scenario.isFailed()) {

            scenario.log("Scenario failing, please refer to the image attached to this report");

            final byte[] screenshot = ((TakesScreenshot) driver)

                    .getScreenshotAs(OutputType.BYTES);

            scenario.attach(screenshot, "image/png", "Screenshot of the error");

        }

    }

}