Not able to capture the image with BufferedImage buffimg =ImageIO.read(new URL(webImageLoc)) in Selenium webdriver java

Question

I am trying to compare the page logo by downloading it first and after taking its screenshot. Below is the LUMA logo that I am trying to verify via Selenium WebDriver Java with Cucumber:

I am using AShot API to compare the logo.

I tried below code in Selenium: My PageObject function:

public class HomePage extends BasePage {

    public HomePage(WebDriver driver) {
        super(driver);
    }
    
    // Declaring global parameters
    WebDriverWait wait = new WebDriverWait(driver,Duration.ofSeconds(10));
    
    //Elements for page details 
    @FindBy(xpath = "//a[@aria-label='store logo']//img")
    WebElement logoLuma;

        public boolean compareHomePageLogo() throws IOException {
        boolean results = false;
        WebElement imgLuma = wait.until(ExpectedConditions.elementToBeClickable(logoLuma));
        
        // First downloading the logo image and storing it in local machine
        String webImageLoc = imgLuma.getAttribute("src");
        //System.out.println("URL is: " + new URL(webImageLoc));
        BufferedImage buffimg =ImageIO.read(new URL(webImageLoc));
        System.out.println(buffimg);
        File outputFile = new File(System.getProperty("user.dir")+"\\Screenshots\\expected.png");
        ImageIO.write(buffimg, "png", outputFile);
        
        // Taking screenshot of image element from search results
            Screenshot shot = new AShot().takeScreenshot(driver, imgLuma);
            File screenshotFile = new File(System.getProperty("user.dir") + "\\Screenshots\\actual.png");
        ImageIO.write(shot.getImage(), "png", screenshotFile);
        
        // Comparing both images
        BufferedImage expectedImage = ImageIO.read(outputFile); // Getting expected image
        BufferedImage actualImage = shot.getImage(); // Getting actual image
        
        ImageDiffer imgDiff = new ImageDiffer();
        ImageDiff diff = imgDiff.makeDiff(expectedImage, actualImage); // Storing diff result
        if(diff.hasDiff()) {
            System.out.println("Images are not same.");
            results = false;
        }
        else {
            System.out.println("Images are same.");
            results = true;
        }
        
        return results;
    }
}

My Step definition which is calling above function:

@Then("user can see the LUMA image on page")
public void user_can_see_the_luma_image_on_page() {
    hp = new HomePage(driver);
    try {
        Assert.assertTrue("Images are not same.", hp.compareHomePageLogo());
    }
    catch(Exception e) {
        logger.info(e.getMessage());
        Assert.fail();
    }
}

Here is the TestRunner:

package testRunner;

import io.cucumber.junit.Cucumber;
import io.cucumber.junit.CucumberOptions;
import org.junit.runner.RunWith;

@RunWith(Cucumber.class)
@CucumberOptions
        (
            features = { ".//src/test/resources/Features/LandingPage.feature" },
            glue = "stepDefinitions",
            plugin = 
            {
                "pretty",
                "html:reports/myreport.html",
                "json:reports/myreport.json",
                "rerun:target/rerun.txt", // Mandatory to capture failures
                "html:target/cucumber-html-report",
                "json:target/cucumber-reports/cucumber.json",
                "junit:target/cucumber-reports/cucumber.xml",
                "com.aventstack.extentreports.cucumber.adapter.ExtentCucumberAdapter:"
            },
                    
            dryRun = false,
            monochrome = true,
               tags = "@temp"
            )

public class TestRunner {

}

Running the above TestRunner with JUnit, getting below error in console:

  Given user navigates to "https://magento.softwaretestingboard.com/" # stepDefinitions.HomePageSteps.user_navigates_to(java.lang.String)
  When user can see the "Default welcome msg!" on page                # stepDefinitions.HomePageSteps.user_can_see_the_on_page(java.lang.String)
**null**
15:01:19.989 [main] INFO  stepDefinitions.HomePageSteps - **image == null!**
  Then user can see the LUMA image on page                            # stepDefinitions.HomePageSteps.user_can_see_the_luma_image_on_page()
      java.lang.AssertionError
    at org.junit.Assert.fail(Assert.java:87)
    at org.junit.Assert.fail(Assert.java:96)
    at stepDefinitions.HomePageSteps.user_can_see_the_luma_image_on_page(HomePageSteps.java:109)
    at ✽.user can see the LUMA image on page(file:///C:/Users/priyank.shah3/eclipse-workspace/Luma_eCommerce/./src/test/resources/Features/LandingPage.feature:17)

Scenario status ======>FAILED

As shown above, I am getting "image == null" (highlighted in bold). I tried troubleshooting by printing logs and came to know that it's not reading the file on below line on my PageObject class:

BufferedImage buffimg =ImageIO.read(new URL(webImageLoc));

Tried searching the possible solutions but nothing works till date. Need help on how to get the image here.

Answer 1

Your logo is in svg format. While ImageIO does not support a lot of formats (svg is one of the formats which are not supported out of the box) there are the opprotunities to add support for particular image format.

Check the solution from this post: https://wcm.io/testing/aem-mock/usage-imageio.html