Zoom Functionality On An E-Commerce Website

One of the important scenarios, that most popular e-commerce websites like Flipkart,Myntra or Amazon provide, is the capability to zoom in the item on sale, so that the customer can have a close look at the item before purchasing. It surely is one of the indispensable property on an e-commerce webpage.

Now, this zooming capability is not provided by the browser itself. In most cases we use some Javascript code to execute this. So how do we test it? Is it difficult? How do we know that the zoom is actually present on the webpage, i.e. it’s actually shown on the webpage?

The method is actually quite familiar to most people- who have a fair understanding of how Selenium works. Let us see how the code works first.

package Flipkart;
import java.io.*;
import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

public class FlipkartImageZoom {

public WebDriver driver;
private String baseUrl;
public static void main(String[] args) {
// TODO Auto-generated method stub

FlipkartImageZoom obj=new FlipkartImageZoom();
obj.newFunc();
}
public void newFunc(){

driver=new FirefoxDriver();
driver.manage().window().maximize();
driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);

baseUrl="http://www.flipkart.com/fila-scroll-sneakers/p/itmey3f8ssgrdgdh?pid=SHOEY3F8HUHFVYJ9&srno=b_1&ref=2918f415-8924-46e9-8b99-993850a8cb48";

driver.get(baseUrl);

Actions act=new Actions(driver);

act.moveToElement(driver.findElement(By.xpath("//div[@class='imgWrapper']/img[1]"))).build().perform();

WebElement ele_zoom=driver.findElement(By.xpath("//div[@class='productImageZoom']"));

WebDriverWait wait=new WebDriverWait(driver, 10);

wait.until(ExpectedConditions.visibilityOf(ele_zoom));

if(ele_zoom.isDisplayed()){
System.out.println("Zoom displayed");
}

else{
System.err.println("No Zoom displayed");
}
}
}

So any idea what we are actually doing here? Here what we have done is we have identified the image of the item, and used the moveElement( ) function to move the mouse to that image, since the zoom functionality always happens when we move the mouse over the image.

Next we recognize if the zoomed element is present on the page or not, once we move the mouse over to the image, already being displayed on the webpage. The code waits for the ele_zoom webelement to be present on the webpage. If the element is displayed on webpage, inside the stipulated time ( which is maintained using WebDriverWait)