Scrolling to a WebElement and clicking on it

Question

I am new to automation and am practicing on the flipkart website. On the page:

http://www.flipkart.com/mobiles/pr?sid=tyy,4io&otracker=clp_mobiles_CategoryLinksModule_0-2_catergorylinks_11_ViewAll

... when I try to click an element that is not in view of the page by scrolling to it, I get the exception: Element is not clickable

Below is the code:

WebElement mobile = driver.findElement(By.xpath ("//a[@title='Apple iPhone 6S (Silver, 128 GB) ']"));
JavascriptExecutor jse = (JavascriptExecutor) driver;
jse.executeScript("arguments[0].scrollIntoView();", mobile);
mobile.click();

I believe this issue is occurring because of the header available in flipkart: even though the window is getting scrolled to that particular element, the header is covering the element so it's not possible to click on it.

Can anyone help resolve this?

Answer 1

you can try like this

1. Case where you want to click on a element that is not in view of the page (without scrolling) try below

    public static void main(String[] args) throws InterruptedException { WebDriver driver = new FirefoxDriver(); driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); driver.get( "http://www.flipkart.com/mobiles/pr?sid=tyy,4io&otracker=clp_mobiles_CategoryLinksModule_0-2_catergorylinks_11_ViewAll"); driver.manage().window().maximize(); // Take everything on the page in list first . List<WebElement> completecalContent = driver.findElements(By.xpath("//*[@class='fk-display-block']")); System.out.println(completecalContent.size()); // printing all elements for (int i = 0; i < completecalContent.size(); i++) { System.out.println("Print complete Content : " + completecalContent.get(i).getText()); if (completecalContent.get(i).getText().equals("Apple iPhone 5S (Space Grey, 16 GB)")) { // move to a specific element ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView();", completecalContent.get(completecalContent.size() - 1)); // move slightly up as blue header comes in the picture ((JavascriptExecutor) driver).executeScript("window.scrollBy(0,-100)"); // then click on the element completecalContent.get(i).click(); } } } 

2. Case where you want to scroll then in that case update above code with these lines.

A. if you want to scroll to the bottom of the page then

((JavascriptExecutor) driver).executeScript("window.scrollTo(0, document.body.scrollHeight)");

B. if u want to scroll to a specific element then try this

WebElement element = driver.findElement(By.xpath("xpath to element"));
        ((JavascriptExecutor) driver).executeScript(
                "arguments[0].scrollIntoView();", element);

C. if you want to scroll on the basis of coordinates then try this

((JavascriptExecutor) driver).executeScript("window.scrollBy(0,500)");

Answer 2

Instead of scrolling up to web element you can try scrolling to little bit down in page like

 JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript("scroll(250, 0)"); //x value '250' can be altered 

Else you can try scrolling to element which is good enough above to required element. It means in code you tried instead of taking required webelement just scroll upto web element above the required so that the header does not cover required element.

Thank You, Murali

Answer 3

Hey if you are not certain about the element's position on the page, you can find the co-ordinates at run time and then execute your text.

You can get elements co-ordinate by using Point

Point point = element.getLocation();
int xcord = point.getX();  
int ycord = point.getY();

You can also get the dimensions of a webelement like its Height and Width using Dimension

Once you have the x and y co-ordinates and you have its dimensions. You can write your code to scroll till that particular co-ordinates on the page.

Hope it helps!