Hacer clic en Elementos en Selenium usando JavaScript

1. Introducción

En este breve tutorial, veremos un ejemplo simple de cómo hacer clic en un elemento en Selenium WebDriver usando JavaScript.

Para nuestra demostración, usaremos JUnit y Selenium para abrir //baeldung.com y buscar artículos de “Selenium”.

2. Dependencias

Primero, agregamos las dependencias selenium-java y junit a nuestro proyecto en pom.xml :

 org.seleniumhq.selenium selenium-java 3.141.59   junit junit 4.13 test 

3. Configuración

A continuación, necesitamos configurar WebDriver. En este ejemplo, usaremos su implementación de Chrome:

@Before public void setUp() { System.setProperty("webdriver.chrome.driver", new File("src/main/resources/chromedriver.mac").getAbsolutePath()); driver = new ChromeDriver(); }

Estamos usando un método anotado con @Before para realizar la configuración inicial antes de cada prueba. En el interior, configuramos la propiedad webdriver.chrome.driver que define la ubicación del controlador de Chrome. Después de eso, estamos creando una instancia del objeto WebDriver .

Cuando finalice la prueba debemos cerrar la ventana del navegador. Podemos hacerlo colocando la declaración driver.close () en un método anotado con @After . Esto asegura que se ejecutará incluso si la prueba falla:

@After public void cleanUp() { driver.close(); }

4. Abrir el navegador

Ahora, podemos crear un caso de prueba que hará nuestro primer paso: abrir el sitio web:

@Test public void whenSearchForSeleniumArticles_thenReturnNotEmptyResults()  driver.get("//baeldung.com"); String title = driver.getTitle(); assertEquals("Baeldung 

Aquí, usamos el método driver.get () para cargar la página web. A continuación, verificamos su título para asegurarnos de que estamos en el lugar correcto.

5. Hacer clic en un elemento con JavaScript

Selenium viene con un práctico método WebElement # click que invoca un evento de clic en un elemento dado. Pero en algunos casos, la acción de hacer clic no es posible.

Un ejemplo es si queremos hacer clic en un elemento deshabilitado. En ese caso, WebElement # click arroja una IllegalStateException . En su lugar, podemos usar el soporte de JavaScript de Selenium.

Para hacer esto, lo primero que necesitaremos es JavascriptExecutor . Dado que estamos usando la implementación de ChromeDriver , simplemente podemos convertirlo en lo que necesitamos:

JavascriptExecutor executor = (JavascriptExecutor) driver;

Después de obtener el JavascriptExecutor , podemos usar su método executeScript . Los argumentos son el propio script y una serie de parámetros del script. En nuestro caso, invocamos el método click en el primer argumento:

executor.executeScript("arguments[0].click();", element);

Ahora, pongámoslo en un solo método al que llamaremos clickElement :

private void clickElement(WebElement element) { JavascriptExecutor executor = (JavascriptExecutor) driver; executor.executeScript("arguments[0].click();", element); }

Y finalmente, podemos agregar esto a nuestra prueba:

@Test public void whenSearchForSeleniumArticles_thenReturnNotEmptyResults() { // ... load //baeldung.com WebElement searchButton = driver.findElement(By.className("nav--menu_item_anchor")); clickElement(searchButton); WebElement searchInput = driver.findElement(By.id("search")); searchInput.sendKeys("Selenium"); WebElement seeSearchResultsButton = driver.findElement(By.cssSelector(".btn-search")); clickElement(seeSearchResultsButton); }

6. Elementos en los que no se puede hacer clic

Uno de los problemas más comunes que ocurren al hacer clic en un elemento usando JavaScript es ejecutar el script de clic antes de que se pueda hacer clic en el elemento. En esta situación, la acción de hacer clic no sucederá, pero el código continuará ejecutándose.

Para solucionar este problema, debemos detener la ejecución hasta que el clic esté disponible. Podemos usar WebDriverWait # hasta esperar hasta que se procese el botón.

Primero, el objeto W ebDriverWait requiere dos parámetros; el conductor y un tiempo de espera:

WebDriverWait wait = new WebDriverWait(driver, 5000); 

Luego, llamamos hasta , dando la condición elementToBeClickable esperada :

wait.until(ExpectedConditions.elementToBeClickable(By.className("nav--menu_item_anchor"))); 

Y una vez que regrese con éxito, sabemos que podemos continuar:

WebElement searchButton = driver.findElement(By.className("nav--menu_item_anchor")); clickElement(searchButton);

Para conocer más métodos de condición disponibles, consulte la documentación oficial.

7. Conclusión

En este tutorial, hemos aprendido cómo hacer clic en un elemento en Selenium usando JavaScript. Como siempre, la fuente del artículo está disponible en GitHub.