Cannot click on visible text but isDisplayed=False - selenium

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)

Answer 1

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);

Answer 2

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();

Answer 3

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.

Answer 4

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"]