How to Click on Image in Selenium Webdriver

By : Krishna Rungta Krishna Rungta
Hours Updated

⚡ Smart Summary

Click On Image in Selenium WebDriver requires CSS selector or XPath strategies because image elements do not expose link text. This article explains how to locate the image, trigger the click action, and verify that navigation succeeds.

  • 🖱️ Core Action: Use driver.findElement(By.cssSelector(…)).click() to perform a click on any image element rendered inside an anchor.
  • 🎯 Locator Choice: By.linkText and By.partialLinkText do not work for images, so By.cssSelector or By.xpath are required.
  • 🧪 Verification Step: Confirm a successful click by asserting the new page title with driver.getTitle() against the expected destination string.
  • 🤖 AI Assistance: Modern AI plugins suggest stable CSS selectors and auto-heal locators when the application markup or attribute values change.
  • 🛠️ Common Pitfalls: Hidden, lazy-loaded, or overlapped images often require explicit waits, scroll-into-view, or JavaScript click to register properly.
Read More

Click on Image in Selenium

Clicking an image in Selenium WebDriver is a common task when an icon, logo, or thumbnail behaves as a navigational link. Because images carry no visible text, traditional link-text locators fail and a more reliable selector strategy is required.

Accessing Image Links

Image links are anchors on web pages represented by an image which, when clicked, navigates the browser to a different window or page.

Because they are images, we cannot use the By.linkText() and By.partialLinkText() methods because image links have no link text at all.

In this case, we should resort to using either By.cssSelector or By.xpath. The first method is generally preferred because of its simplicity and readability.

In the example below, we will access the “Facebook” logo on the upper left portion of Facebook’s Password Recovery page.

Accessing Image Links

We will use By.cssSelector and the element’s “title” attribute to access the image link. We will then verify that the browser has been taken to Facebook’s homepage.

Java Code Example

The following Selenium WebDriver snippet launches Chrome, opens the Facebook password recovery page, clicks the Facebook logo image, and asserts the resulting page title.

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);
        // click on the "Facebook" logo on the upper left portion
        driver.findElement(By.cssSelector("a[title=\"Go to Facebook home\"]")).click();

        // verify that we are now back on Facebook's homepage
        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();
    }
}

Result

Click on Image in Selenium Webdriver

Best Practices for Clicking Images

A few habits make image-click automation more reliable across browsers and screen sizes.

  • Prefer a stable attribute such as title, alt, aria-label, or data-* over deeply nested CSS paths.
  • Add an explicit WebDriverWait for ElementToBeClickable before issuing the click.
  • For lazy-loaded images, scroll the element into view with JavascriptExecutor first.
  • If a transparent overlay intercepts the click, fall back to a JavaScript click on the underlying element.
  • Validate navigation with driver.getTitle() or a unique element on the destination page.

RELATED ARTICLES

How AI Improves Image Locator Strategies

AI-assisted testing tools such as Testim, Mabl, and Healenium analyze the DOM around an image and propose self-healing locators. When a class name or attribute changes after a release, the framework swaps in the most stable alternative automatically, which reduces flaky failures on icon-based navigation.

Engineers can also use ChatGPT or GitHub Copilot to generate WebDriver snippets, suggest robust CSS or XPath expressions for an image, and draft assertions for the page that loads after the click. Generated code should still be reviewed for correctness and for handling of waits and overlays.

Conclusion

Clicking image links in Selenium WebDriver is straightforward once you choose a stable locator. By.cssSelector with the title or alt attribute is the most readable approach, By.xpath is the fallback when the markup is awkward, and explicit waits make the script reliable across runs.

FAQs

Locate the image with By.cssSelector or By.xpath using a stable attribute such as title, alt, or aria-label, then call .click() on the returned WebElement. Verify the result with driver.getTitle() or a unique element on the destination page.

Yes. Tools such as Testim, Mabl, and ChatGPT inspect the surrounding DOM and suggest a stable selector based on title, alt, aria-label, or data attributes. Engineers should still review the generated locator for uniqueness and resilience.

A self-healing locator is an AI feature that swaps in an alternative selector when the original fails. Frameworks like Healenium and Mabl observe attribute changes around an image and pick the most stable replacement, which reduces flaky tests after UI refreshes.

Both locators match on the visible text inside an anchor. An image link wraps an img tag and exposes no text node, so the match always returns nothing. Use By.cssSelector or By.xpath with title, alt, or aria-label instead.

If an overlay, modal, or tooltip blocks the image, scroll it into view with JavascriptExecutor and add a WebDriverWait for ElementToBeClickable. As a fallback, execute a JavaScript click on the WebElement to bypass the overlapping layer.

Assert the new page title with driver.getTitle(), the current URL with driver.getCurrentUrl(), or the presence of a unique element on the destination page. A combination of these checks gives the test confidence that the click really triggered navigation.

Summarize this post with: