How to check if an image is displayed on page using Selenium?

When it comes to web automation and testing, It is important to confirm that a picture has been rendered on a particular page. This is because bad content loading is regarded as a big issue in the good user interface. Users can easily get frustrated with missing or broken images, hence the need for testers and developers to check for the availability of the images.

In this article, we will explore how to check if an image is displayed on a webpage using Selenium in Java.

Prerequisites

• Java Development Kit (JDK) installed on your system.
• Eclipse IDE or any Java-compatible IDE.
• Chrome Browser.
• Basic knowledge of Java and Selenium WebDriver.
• Selenium WebDriver and Browser Driver installed.

How to check if an image is displayed on page using Selenium?

Following are the steps to check if an image is displayed on a page using Selenium:

Step 1. Set Up the Environment

Start by setting up the necessary environment for Selenium WebDriver in Java. You need to add the Selenium WebDriver dependency and the browser-specific driver (e.g., ChromeDriver) to your project.

Step 2. Navigate to the Webpage

After initializing the WebDriver, navigate to the target webpage that contains the image you want to check.

driver.get("https://www.geeksforgeeks.org");

Step 3. Locate the Image Element

Use the appropriate locator to identify the image on the webpage. In most cases, the `img` tag is used, and you can locate it using its ID, class, or other attributes.

WebElement imageElement = driver.findElement(By.xpath("//img[@id='exampleImage']"));

Step 4. Check if the Image is Displayed

Selenium provides a method called `isDisplayed()` that returns true if the element (in this case, the image) is visible and rendered on the page:

boolean isImageDisplayed = imageElement.isDisplayed();
if (isImageDisplayed) {
    System.out.println("Logo present");
} else {
    System.out.println("Logo NOT present);
}

Step 5. Close the WebDriver

driver.quit();

Syntax

driver.find_element(By.xpath, "//img[@src='https://media.geeksforgeeks.org/gfg-gg-logo.svg']")

Example to check if an image is displayed on page using Selenium

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class ImageVisibilityCheck {

    public static void main(String[] args)
    {
        // Set the path for the ChromeDriver manually
        System.setProperty("webdriver.chrome.driver",
                           "path/to/chromedriver");

        // Instantiate the ChromeDriver
        WebDriver driver = new ChromeDriver();

        try {
            // Navigate to the desired URL
            driver.get("https://geeksforgeeks.org");

            // Locate the image using its XPath
            WebElement image = driver.findElement(By.xpath(
                "//img[@src='https://media.geeksforgeeks.org/gfg-gg-logo.svg']"));

            // Check if the image is displayed
            if (image.isDisplayed()) {
                System.out.println("Logo present");
            }
            else {
                System.out.println("Logo NOT present");
            }
        }
        catch (Exception e) {
            e.printStackTrace();
        }
        finally {
            // Close the browser
            driver.quit();
        }
    }
}

Output

Conclusion

To check if an image is displayed on a webpage using Selenium, first locate the image element with a method like find_element_by_xpath(). Then, use the is_displayed() method to verify its visibility. If the image is visible, it returns True, otherwise False. This method ensures you can confirm whether the image is rendered properly on the page.