Cannot click on visible text but isDisplayed=False

Question

I am practicing Selenium-Webdriver and encounter the issue that the desirable element(text) is visible on web page, but I cannot click on it.

Trying to do check this element is displayed or not by command line "isDisplayed", and the console returns false result. I am a little bit confused that the text(please see the highlight on attached file) on web is visible but why cannot be clickable?

On this case, how can we perform some actions on it? could you please share your ideas and strategy to do.

Thank you so much.

Here is the web page: http://www.lazada.com.ph/

My code is

System.setProperty("webdriver.chrome.driver", driver_path);
 WebDriver driver = new ChromeDriver();

 driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
     driver.get("https://www.lazada.com.ph/");


     //Click on Men's Fashion
     WebElement loc = driver.findElement(By.xpath("//div[@data-qa-locator='brands-by-category-cats-item']/div[@data-tab-id='2']"));
     Actions hover = new Actions(driver);
     hover.moveToElement(loc).click().build().perform();

Error log:

false

Exception in thread "main" org.openqa.selenium.interactions.MoveTargetOutOfBoundsException: (-2114, -93.0999984741211) is out of bounds of viewport width (1366) and height (659)
Build info: version: '3.6.0', revision: '6fbf3ec767', time: '2017-09-27T16:15:26.402Z'
System info: host: 'Lorem', ip: '192.168.30.1', os.name: 'Windows 8.1', os.arch: 'amd64', os.version: '6.3', java.version: '1.8.0_65'
Driver info: org.openqa.selenium.firefox.FirefoxDriver
Capabilities [{moz:profile=C:\Users\Lorem\AppData\Local\Temp\rust_mozprofile.y3xzzu5rD0i5, rotatable=false, timeouts={implicit=0, pageLoad=300000, script=30000}, pageLoadStrategy=normal, moz:headless=false, platform=XP, specificationLevel=0, moz:accessibilityChecks=false, acceptInsecureCerts=true, browserVersion=56.0.2, platformVersion=6.3, moz:processID=4724, browserName=firefox, javascriptEnabled=true, platformName=XP}]
Session ID: 893e64ce-b53c-4bec-9f98-14832e4b7151
    at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
    at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
    at java.lang.reflect.Constructor.newInstance(Constructor.java:422)
    at org.openqa.selenium.remote.http.W3CHttpResponseCodec.createException(W3CHttpResponseCodec.java:185)
    at org.openqa.selenium.remote.http.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:120)
    at org.openqa.selenium.remote.http.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:49)
    at org.openqa.selenium.remote.HttpCommandExecutor.execute(HttpCommandExecutor.java:164)
    at org.openqa.selenium.remote.service.DriverCommandExecutor.execute(DriverCommandExecutor.java:83)
    at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:586)
    at org.openqa.selenium.remote.RemoteWebDriver.perform(RemoteWebDriver.java:652)
    at org.openqa.selenium.interactions.Actions$BuiltAction.perform(Actions.java:638)
    at basic.Wait.main(Wait.java:41)

score 0 · Answer 1 · answered Oct 29 '17 at 17:23

0

It seems that you'r xpath giving more then one element .

try below code .

WebElement loc = driver.findElement(By.xpath("(//div[@data-qa-locator='brands-by-category-cats-item']/div[@data-tab-id='2'])[2]"));
     Actions hover = new Actions(driver);
     hover.moveToElement(loc).click().build().perform();

answered Oct 29 '17 at 17:23

Ankur Singh

1,239
1
8
18

Thanks Ankur for helping me out. But it seems that this just work on Chrome, not in Firefox. :( – LearningandWorking Oct 31 '17 at 11:43

score 0 · Answer 2 · answered Oct 29 '17 at 18:19

The problem is that your xpath return 3 elements. If you try the following code, you could notice this:

        //Click on Men's Fashion
        List<WebElement> loc = driver.findElements(By.xpath("//div[@data-qa-locator='brands-by-category-cats-item']/div[@data-tab-id='2']"));
        System.out.println(loc.size());
        int i=1;
        for(WebElement we :loc)
        {
            System.out.println("innerText:" + we.getAttribute("innerText"));
            System.out.println("getLocation: " + we.getLocation());
            System.out.println("getText: " + we.getText());
            System.out.println("getSize: " + we.getSize());
            if(we.getText().contains("Men's Fashion"))
            {
                we.click();
            }

            System.out.println("------------ "+i+" -------------");
            i++;
        }

The output is:

3
innerText:Men's Fashion
getLocation: (-2210, 838)
getText: 
getSize: (141, 118)
------------ 1 -------------
innerText:Men's Fashion
getLocation: (178, 838)
getText: Men's Fashion
getSize: (141, 118)
------------ 2 -------------
innerText:Men's Fashion
getLocation: (2567, 838)
getText: 
getSize: (141, 118)
------------ 3 -------------

If you click the element with getText=Men's Fashion it works.

To be honest I don't know why the xpath return 3 elements. I hope someone give the answer.

Thanks for your detailed explanation. – LearningandWorking Oct 31 '17 at 11:44 — LearningandWorking, Oct 31 '17 at 11:44

score 0 · Answer 3 · answered Oct 30 '17 at 04:54

0

There are so many ways to reach to this element. couple more below.

//span[@data-id=4]
//span[@data-tracking-nav-header="Men's Fashion"]

answered Oct 30 '17 at 04:54

Sowjanya Davuluru

1

score 0 · Accepted Answer · answered Oct 30 '17 at 07:31

The error says it all as follows :

org.openqa.selenium.interactions.MoveTargetOutOfBoundsException: (-2114, -93.0999984741211) is out of bounds of viewport width (1366) and height (659)
Build info: version: '3.6.0', revision: '6fbf3ec767', time: '2017-09-27T16:15:26.402Z'

The WebElement which you are trying to click is Not Visible as it is out of the Viewport. As you have used Actions Class hence it shows MoveTargetOutOfBoundsException

You can consider the following code block to scroll the WebElement within the Viewport first then take help of JavascriptExecutor to click as follows :

    System.setProperty("webdriver.chrome.driver", "C:\\Utility\\BrowserDrivers\\chromedriver.exe");
    ChromeOptions options = new ChromeOptions();
    options.addArguments("start-maximized");
    options.addArguments("disable-infobars");
    options.addArguments("--disable-extensions"); 
    WebDriver driver = new ChromeDriver();
    driver.get("https://www.lazada.com.ph/");
    //Click on Men's Fashion
    WebElement elem = driver.findElement(By.xpath("//div[@class='c-category-tab  c-brands-by-category__tab']/span[@class='c-category-tab__icon c-category-tab__icon_category-fashion']"));
    ((JavascriptExecutor)driver).executeScript("arguments[0].scrollIntoView();", elem);
    ((JavascriptExecutor)driver).executeScript("arguments[0].click();", elem);

Thanks @DebanjanB, It works on both of Chrome and Firefor. I have just small question that the viewport which is relates to the screen-size. It normally describe how the UI looks like on Desktop, mobile, tablet view; but it is also have relationship to the visible of an element on a DEsktop view, could you please show me some article or knowledge regarding it? Moreover, using javascriptexecutor is also helpful as you helped me; but from the point of view of a tester, is there any recommendation when using it ? Thanks. — LearningandWorking, Oct 31 '17 at 11:42
This [**`Discussion/QA`**](https://stackoverflow.com/questions/44912203/selenium-web-driver-java-element-is-not-clickable-at-point-36-72-other-el/44916498#44916498) will clear a lot of your queries. Let me know if you have any question. Feel free to **`Upvote`** any Answers if they are useful to you. — undetected Selenium, Oct 31 '17 at 11:46

Cannot click on visible text but isDisplayed=False

4 Answers4