java - org.openqa.selenium.ElementNotVisibleException : Element is not currently visible while clicking a checkbox through SeleniumWebDriver and Java

Question

我必须选择以下 HTML 代码段中包含的复选框。 该复选框包含在输入标签中

<div formarrayname="entityTypes" fxlayout="" fxlayoutgap="10px" class="ng-untouched ng-pristine ng-valid ng-star-inserted" style="flex-direction: row; box-sizing: border-box; display: flex;">
                  <div class="form-row ng-untouched ng-pristine ng-valid" fxlayout="row" fxlayoutgap="10px" style="flex-direction: row; box-sizing: border-box; display: flex;">
                    <app-checkbox formcontrolname="isSelected" _nghost-c26="" class="ng-untouched ng-pristine ng-valid"><div _ngcontent-c26="" class="checkbox-wrapper">

  <span _ngcontent-c26="" class="tix-checkbox" fxlayout="row" fxlayoutalign="start center" style="flex-direction: row; box-sizing: border-box; display: flex; max-height: 100%; place-content: center flex-start; align-items: center;">
    <!---->
    <input _ngcontent-c26="" type="checkbox" name="undefined" class="ng-star-inserted" style="" xpath="1">
  
      Funder
      <label _ngcontent-c26=""></label>
  </span>
  
  <!---->

  <!---->

</div>
</app-checkbox>
                  </div>
                </div>

我尝试了各种方法来识别它并选择它，但它永远不可见。 我已将复选框标签的文本打印到控制台，因此无法理解为什么复选框本身不可见。 以下java代码成功打印标签，但无法单击复选框并抛出错误元素不可见。

//print text of input box
WebElement labelFunder = driver.findElement(By.xpath("//div[@fxflex='50']//div[3]//div[1]//app-checkbox[1]//div[1]//span[1]//input[1]"));
String textFunderLabel2 = labelFunder.getAttribute("innerText").toString();
System.out.println(textFunderLabel);
labelFunder.click();

我尝试了不同的等待，但也没有成功。

//select the funder checkbox
//driver.findElement(By.xpath("//div[@fxflex='50']//div[3]//div[1]//app-checkbox[1]//div[1]//span[1]//input[@type='checkbox']")).click();
//WebDriverWait wait = new WebDriverWait(driver, 30);
//WebElement checkbox = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("/html[1]/body[1]/app-root[1]/main[1]/section[1]/div[2]/app-company-detail[1]/div[2]/form[1]/md-tab-group[1]/div[1]/md-tab-body[1]/div[1]/div[1]/div[2]/div[1]/div[2]/div[3]/div[1]/app-checkbox[1]/div[1]/span[1]/input[1]")));
//checkbox.click();

有人能给我指出正确的方向吗

谢谢。

Answer 1

这个完整的错误消息是...

Exception in thread "main" org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with Command duration or timeout: 2.05 seconds

...暗示所需的元素在 HTML DOM 内不可见当WebDriver实例试图找到它时。

<小时/>

ElementNotVisibleException

ElementNotVisibleException抛出来表明虽然 DOM Tree 上存在一个元素，它不可见，因此无法与之交互。它是一个运行时异常，并具有以下层次结构:

java.lang.RuntimeException
    org.openqa.selenium.WebDriverException
        org.openqa.selenium.InvalidElementStateException
            org.openqa.selenium.ElementNotInteractableException
                org.openqa.selenium.ElementNotVisibleException

<小时/>

字段摘要

此异常的字段继承自类 org.openqa.selenium。 WebDriverException并如下:

Modifier and Type                        Field and Description
---------------------------------        ---------------------
protected static java.lang.String        BASE_SUPPORT_URL 
static java.lang.String                  DRIVER_INFO 
static java.lang.String                  SESSION_ID 

<小时/>

原因

从 ElementNotVisibleException 中得到的一个积极的结果是，WebElement 在 HTML 中存在，并且在尝试执行以下操作时通常会遇到此异常: click() 或读取隐藏在 View 中的元素的属性。

<小时/>

解决方案

由于 ElementNotVisibleException 确保 WebElement 在 HTML 中存在，因此前面的解决方案将按照详细的后续步骤进行两次折叠如下:

• 如果您下一步是读取所需元素的任何属性，那么您需要归纳WebDriverWait与 ExpectedConditions 结合使用子句设置为 visibilityOfElementLocated如下:

  //using id attribute
  new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(By.id("element_id"))).getAttribute("innerHTML");
  //using linkText attribute          
  new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(By.linkText("element_linkText"))).getAttribute("innerHTML");
  //using cssSelector     
  new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("element_cssSelector"))).getAttribute("innerHTML");
  //using xpath           
  new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("element_xpath"))).getAttribute("innerHTML");
  

• 如果下一步是在所需元素上调用 click()，那么您需要引入 WebDriverWait与 ExpectedConditions 结合使用子句设置为 elementToBeClickable如下:

  //using id attribute
  new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.id("element_id"))).click();
  //using linkText attribute          
  new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.linkText("element_linkText"))).click();
  //using cssSelector     
  new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.cssSelector("element_cssSelector"))).click();
  //using xpath           
  new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.xpath("element_xpath"))).click();
  

<小时/>

这个用例

所需的元素是 Angular元素，因此您需要引发WebDriverWait以使元素可点击，并且您可以使用以下解决方案之一:

• css选择器:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("span.tix-checkbox input.ng-star-inserted[name='undefined']"))).click();
  

• xpath:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//span[@class='tix-checkbox']//input[@class='ng-star-inserted' and @name='undefined']"))).click();