無法點擊可見文本但isDisplayed =假

Question

我在練習Selenium-Webdriver並遇到期望元素（文本）在網頁上可見的問題，但我無法點擊它。

試圖檢查此元素是否顯示或不顯示命令行「isDisplayed」，並且控制檯返回錯誤結果。我有點困惑，網頁上的文字（請參閱附件中的亮點）是可見的，但爲什麼不能點擊？

在這種情況下，我們該如何對它執行一些操作？請你分享一下你的想法和戰略。

非常感謝。

這裏是網頁： http://www.lazada.com.ph/

我的代碼是

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

錯誤日誌：

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

錯誤說，這一切如下：

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' 

的WebElement您嘗試點擊是Not Visible，因爲它超出了Viewport的。正如你所使用Actions類，因此它顯示MoveTargetOutOfBoundsException

你可以考慮下面的代碼塊滾動內WebElement的Viewport第一再取JavascriptExecutor幫助點擊如下：

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

看來，找你的XPath給予更多然後是一個元素。

請嘗試下面的代碼。

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

問題是你的xpath返回3個元素。如果你嘗試下面的代碼，你可以看到這一點：

 //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++; 
     } 

輸出是：

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

如果單擊該元素與getText=Men's Fashion它的工作原理。

說實話我不知道爲什麼xpath返回3個元素。我希望有人給出答案。

Answer 4

有這麼多的方法來達到這個元素。以下更多情侶。

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