Cómo hacer clic en una imagen en Selenium WebDriver usando CSS Selector | Tutoriales de Tecnología

En muchas páginas web, los enlaces no se muestran como texto, sino como imágenes clicables (image links), por ejemplo el logo de una marca que te lleva a la página principal.

En esta guía aprenderás cómo localizar y hacer clic en una imagen con Selenium WebDriver utilizando By.cssSelector, y por qué no es posible usar By.linkText() en estos casos.

Saber Más..

¿Qué es un image link en Selenium?

Un image link es un enlace representado por una etiqueta <a> que contiene una imagen (<img>) en lugar de un texto visible.

Algunas características clave:

No tiene texto de enlace visible, por lo que By.linkText() y By.partialLinkText() no funcionan.
Se suele localizar por atributos del <a> o del <img>, como title, alt, src o clases CSS.
Para automatizar el clic se recomienda usar By.cssSelector o By.xpath, siendo CSS Selector la opción más simple y rápida en la mayoría de los casos.

¿Por qué no usar By.linkText() con imágenes?

Los localizadores By.linkText() y By.partialLinkText() identifican enlaces a partir de su texto visible, es decir, el contenido dentro de la etiqueta <a> que el usuario ve en pantalla.

En un image link, el <a> suele envolver solo una <img> sin texto, así que Selenium no encuentra nada por linkText:

El enlace no tiene texto legible, solo una imagen.
By.linkText() devuelve NoSuchElementException porque no hay coincidencia de texto.
En su lugar, se debe usar un selector basado en atributos (title, href, src, etc.).

Ejemplo práctico: hacer clic en el logo de Facebook

En este ejemplo, se accede a la página de recuperación de contraseña de Facebook y se hace clic en el logo de Facebook situado en la esquina superior izquierda, que actúa como enlace hacia la página principal.

Flujo del caso de prueba

Abrir el navegador con ChromeDriver.
Navegar a la URL de recuperación de cuenta de Facebook.
Localizar el enlace de imagen del logo usando By.cssSelector y el atributo title.
Hacer clic en la imagen.
Verificar que el título de la página corresponde a la página de inicio de Facebook.

Código de ejemplo en Java

package newproject;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class MyClass {

    public static void main(String[] args) {
        String baseUrl = "https://www.facebook.com/login/identify?ctx=recover";
        System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();

        driver.get(baseUrl);

        // Clic en el logo de "Facebook" en la parte superior izquierda
        driver.findElement(By.cssSelector("a[title=\"Go to Facebook home\"]")).click();

        // Verificar que hemos vuelto a la página principal de Facebook
        if (driver.getTitle().equals("Facebook - log in or sign up")) {
            System.out.println("We are back at Facebook's homepage");
        } else {
            System.out.println("We are NOT in Facebook's homepage");
        }

        driver.close();
    }
}

En este fragmento se usa un selector CSS de tipo atributo, a[title="Go to Facebook home"], que identifica la etiqueta <a> cuyo atributo title coincide exactamente con ese texto.

Buenas prácticas al hacer clic en imágenes con Selenium

Para que tus tests sean más robustos y fáciles de mantener, ten en cuenta estas recomendaciones:

Prefiere By.cssSelector frente a By.xpath cuando el HTML tenga atributos claros (id, class, title, alt, src).
Usa selectores de atributo como img[alt='nombre'], img[title='...'] o a[title='...'] cuando el enlace sea una imagen.
Evita selectores frágiles basados en rutas completas de XPath que se rompen fácilmente con cambios de maquetación.
Verifica siempre el resultado después del clic: título de la página, URL o presencia de un elemento clave en la nueva página.

Conclusión

Los image links son enlaces representados por imágenes, sin texto visible, por lo que By.linkText() y By.partialLinkText() no sirven para localizarlos.
Para hacer clic en una imagen en Selenium WebDriver, utiliza By.cssSelector o By.xpath, siendo CSS Selector la opción más simple y recomendable.
Un patrón muy común es localizar el <a> que envuelve la imagen usando atributos como title, href o clases CSS, y luego llamar a click().
Verifica la navegación comprobando el título de la página o la URL para asegurar que el clic en la imagen ha funcionado correctamente.

Vistas: 0