org.openqa.selenium.ElementNotVisibleException：通过 Selenium WebDriver 和 Java 单击复选框时，元素当前不可见

Question

我必须 select 包含在以下 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>

我尝试了各种方法来识别它 select 但它永远不可见。我已经将复选框标签的文本打印到控制台，所以无法理解为什么复选框本身不可见。以下 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

尝试 javascript 点击：

public void clickElementWithJS(By locator) {
    String jsClickCode = "arguments[0].scrollIntoView(true); arguments[0].click();";
    try {
        WebElement elementToClick = driver.findElement(locator);
        ((JavascriptExecutor) driver).executeScript(jsClickCode, elementToClick);
    } catch(Exception e) {
        System.out.println("Element could not be clicked.. "  + e.getMessage());
    }
}

Answer 2

这条完整的错误信息是...

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

...意味着当 WebDriver 实例试图找到它。

ElementNotVisibleException

ElementNotVisibleException is thrown to indicate that although an element is present on the DOM Tree，它不可见，因此无法与之交互。它是一个 运行时 异常并具有以下层次结构：

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

字段摘要

这个异常的字段继承自classorg.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 present HTML 并且在尝试 click() 或 read 从视图中隐藏的元素的属性时通常会遇到此异常。

解决方案

As ElementNotVisibleException 确保 WebElement present 在 HTML 中因此，按照下面详述的后续步骤，前面的解决方案将是两倍：

如果下一步是读取所需元素的任何属性，则需要按如下方式归纳WebDriverWait in-conjunction with ExpectedConditions clause set to 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 in-conjunction with ExpectedConditions clause set to 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 以使 元素可点击 并且您可以使用以下任一解决方案：

cssSelector:

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

org.openqa.selenium.ElementNotVisibleException：通过 Selenium WebDriver 和 Java 单击复选框时，元素当前不可见

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

java

selenium

xpath

css-selectors

webdriverwait

ElementNotVisibleException

字段摘要

原因

解决方案

这个用例