ElementClickInterceptedException: </button> 在点 (470, 236) 不可点击

Question

我有这个 Angular 代码，我想通过自动点击操作进行测试：

<mobileweb-tab-container-item _ngcontent-qoc-c24="" _nghost-qoc-c27="" class="ng-star-inserted">
   <!----><!---->
   <a _ngcontent-qoc-c27="" href="null" class="ng-star-inserted">
      <div _ngcontent-qoc-c27="" class="icon-box" fxlayout="column" fxlayoutalign="space-evently center" style="flex-direction: column; box-sizing: border-box; display: flex; place-content: center flex-start; align-items: center;">
         <img _ngcontent-qoc-c27="" class="icon" id="outbound.pick.load.image" src="assets/img/outbound/pick/load.jpg">
         <div _ngcontent-qoc-c27="" class="icon-label" id="outbound.pick.load.image.label">Load</div>
      </div>
   </a>
</mobileweb-tab-container-item>

完整来源：https://pastebin.com/BbKbarPH

我使用此代码自动执行点击操作：

首先选择标签：

        WebDriverWait webDriverWait = new WebDriverWait(driver, 25);
        new Actions(driver).moveToElement(webDriverWait.until(ExpectedConditions.elementToBeClickable(By.id(tabId)))).click().build().perform();

第二次点击图标：

        WebDriverWait webDriverWait = new WebDriverWait(driver, 25);
        System.out.println("Click on Icon " + name + " using id locator " + iconId);
        WebElement webElement = webDriverWait.until(ExpectedConditions.elementToBeClickable(By.id(iconId)));
        webElement.click();

问题是有时找不到该元素。例如：

org.openqa.selenium.TimeoutException: Expected condition failed: waiting for element to be clickable: By.id: warehouse.all.accessorial-charge.image (tried for 25 second(s) with 500 milliseconds interval)
at org.mobile.accessorial.charge.AccessorialChargeTest.accessorialChargeTest(AccessorialChargeTest.java:161)
Caused by: org.openqa.selenium.NoSuchElementException: 
no such element: Unable to locate element: {"method":"css selector","selector":"#warehouse\.all\.accessorial\-charge\.image"}
(Session info: headless chrome=92.0.4515.159)
For documentation on this error, please visit: https://www.seleniumhq.org/exceptions/no_such_element.html
Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:17:03'
System info: host: 'DTXA-ENVTEST01', ip: '10.100.35.181', os.name: 'Windows Server 2016', os.arch: 'amd64', os.version: '10.0', java.version: '1.8.0_291'
Driver info: org.openqa.selenium.chrome.ChromeDriver
Capabilities {acceptInsecureCerts: false, browserName: chrome, browserVersion: 92.0.4515.159, chrome: {chromedriverVersion: 92.0.4515.107 (87a818b10553..., userDataDir: C:\Users\devadmin\AppData\L...}, goog:chromeOptions: {debuggerAddress: localhost:54247}, javascriptEnabled: true, networkConnectionEnabled: false, pageLoadStrategy: normal, platform: WINDOWS, platformName: WINDOWS, proxy: Proxy(), setWindowRect: true, strictFileInteractability: false, timeouts: {implicit: 0, pageLoad: 300000, script: 30000}, unhandledPromptBehavior: dismiss and notify, webauthn:extension:credBlob: true, webauthn:extension:largeBlob: true, webauthn:virtualAuthenticators: true}
Session ID: 9c789c51f703a81f1d1ac2b0ac792bba
*** Element info: {Using=id, value=warehouse.all.accessorial-charge.image}
at org.mobile.accessorial.charge.AccessorialChargeTest.accessorialChargeTest(AccessorialChargeTest.java:161)

在标签加载期间，有一个动画来加载标签和图标。是否有其他方法可以实现等待组件完全加载并执行点击操作的侦听器？

Answer 1

在代码中添加可见性和可点击等待，

WebDriverWait wait = new WebDriverWait(driver, 20);
By appct = By.xpath("//button[text()='Accept All Cookies']");
wait.until(ExpectedConditions.elementToBeClickable(appct));
wait.until(ExpectedConditions.visibilityOfAllElements(driver.findElements(appct)));

Answer 2

如@Prophet 所述，您可以检查invisibilityOfElementLocated，但是您应该在元素加载/动画不可见后立即查找该元素的可见性。

WebDriverWait wait = new WebDriverWait(driver, 30);
wait.until(ExpectedConditions.invisibilityOfElementLocated(By.id("id of animation icon")));
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id(tabId))).click();

如果你正在寻找一个监听器来实现：-

WebDriverWait wait = new WebDriverWait(driver, 30);
WebElement animation= wait.until(ExpectedConditions.invisibilityOfElementLocated(By.xpath("xpath of animation")));
WebElement tab = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id(tabId)));
beforeClickOn(tab , driver);
tab.click();
afterClickOn(tab, driver);

在您编写的任何类中，从 AbstractWebDriverEventListener 扩展该类

Answer 3

您可以使用ExpectedConditions 等到动画元素消失

WebDriverWait wait = new WebDriverWait(driver, 30);
wait.until(ExpectedConditions.invisibilityOfElementLocated(element));

命令，其中element 是动画元素By 定位器。
这里的 By 定位器可以是 Selenium 使用的任何定位器类型。
类似于以下内容：

By.cssSelector("div.className")  
By.xpath("//div[@id='theId']")
By.id("theId")

等
所以一些特殊情况可能看起来像：

WebDriverWait wait = new WebDriverWait(driver, 30);
wait.until(ExpectedConditions.invisibilityOfElementLocated(By.xpath("//span[contains(@class,'animation')]")));

您也可以使用 JavaScript 单击元素，即使它被其他元素（动画）覆盖

WebElement element = driver.findElement(By.id("warehouse.all.accessorial-charge.image"));
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("arguments[0].click();", element);

但不建议使用这种方法，只有在找不到替代方法时才应使用，因为这不会模仿真实的用户操作。