Actions moveToElement()未定位元素中心，点击遭拦截问题求助

我有一个表格，尝试用Actions.MoveToElement()从右向左滚动列（从最后一列到第一列），操作后目标元素仍未完全进入表格视口。点击时出现元素被拦截的错误，无法完成点击。试过Javascript和Actions两种滚动方法，结果一致。

相关代码 #

定位元素与滚动方法 #

WebElement element = driver.findElement(By.xpath("//[@id='tableId']/thead/tr/th[@style and @aria-label='trade-data-header-row-0']"));

import org.openqa.selenium.interactions.Actions;     
public void scrollToElement(WebElement element) {
//        ((JavascriptExecutor) getDriver()).executeScript("arguments[0].scrollIntoView(true);",element);
        actions = new Actions(getDriver());
        waitForDOMToBeLoaded();
        actions.moveToElement(element).build().perform();
        waitForDOMToBeLoaded();
    }

点击元素方法 #

public void clickElement(WebElement element) {
        waitForDOMToBeLoaded();
        wait.until(ExpectedConditions.elementToBeClickable(element));
        element.click();
        waitForDOMToBeLoaded();
    }

视口可见性检测方法 #

执行中HTS code列元素未完全在视口中，但调用以下方法返回true：

public Boolean isVisibleInViewport(WebElement element) {

        return (Boolean)((JavascriptExecutor)getDriver()).executeScript(
                "var elem = arguments[0],                 " +
                        "  box = elem.getBoundingClientRect(),    " +
                        "  cx = box.left + box.width / 2,         " +
                        "  cy = box.top + box.height / 2,         " +
                        "  e = document.elementFromPoint(cx, cy); " +
                        "for (; e; e = e.parentElement) {         " +
                        "  if (e === elem)                        " +
                        "    return true;                         " +
                        "}                                        " +
                        "return false;                            "
                , element);
    }

错误信息 #

org.openqa.selenium.ElementClickInterceptedException: element click intercepted: Element <button class="MuiButtonBase-root-378 MuiButton-root-351 MuiButton-text-353 jss665" tabindex="0" type="button" aria-label="sort-button-HTS Code-sort-by-desc">...</button> is not clickable at point (691, 152). Other element would receive the click: <th class="MuiTableCell-root-703 MuiTableCell-head-704 jss654 jss655 MuiTableCell-sizeSmall-707" scope="col" aria-label="table-checkbox">...</th>
  (Session info: chrome=122.0.6261.69)
Build info: version: '4.19.1', revision: 'abe0ee07dc'
System info: os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0', java.version: '17.0.8'
Driver info: org.openqa.selenium.remote.RemoteWebDriver$ByteBuddy$KCI95tvJ$ByteBuddy$PGBjE0aS
Command: [c3c9243fc7a1fdf218a46dc2561d0c93, clickElement {id=f.257F1F7CBD62B574E128FB297BA14BE4.d.ADEA7719F7D12F893130A70880BC813C.e.224}]

元素HTML结构 #

<table class="MuiTable-root-744" id="discrepancyTable" aria-label="discrepancy-table" style="max-width: 1635px;">
   <thead class="MuiTableHead-root-746 jss707" aria-label="discrepancy-head">
      <tr class="MuiTableRow-root-747 MuiTableRow-head-749" style="display: table;">
         <th class="MuiTableCell-root-751 MuiTableCell-head-752 jss702 jss703 MuiTableCell-sizeSmall-755" scope="col" aria-label="table-checkbox">
            <span class="MuiButtonBase-root-378 MuiIconButton-root-456 jss491 MuiCheckbox-root-612 MuiCheckbox-colorPrimary-614 MuiIconButton-colorPrimary-460" aria-disabled="false" title="selectTradeRows" aria-label="discrepancy-rows-all-check">
               <span class="MuiIconButton-label-463">
                  <input class="jss494" type="checkbox" data-indeterminate="false" aria-label="data-header-all-check" value="">
                  <svg class="MuiSvgIcon-root-324" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                     <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
                  </svg>
               </span>
               <span class="MuiTouchRipple-root-628"></span>
            </span>
         </th>
         <th class="MuiTableCell-root-751 MuiTableCell-head-752 jss711 MuiTableCell-sizeSmall-755" scope="col" aria-label="trade-data-header-row-0" style="min-width: 230px;">
            <button class="MuiButtonBase-root-378 MuiButton-root-351 MuiButton-text-353 jss713" tabindex="0" type="button" aria-label="sort-button-HTS Code-sort-by-desc">
               <span class="MuiButton-label-352">
                  <span class="jss714">HTS Code</span>
                  <svg class="MuiSvgIcon-root-324" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                     <path d="M7 10l5 5 5-5z"></path>
                  </svg>
               </span>
            </button>
         </th>
         <th class="MuiTableCell-root-751 MuiTableCell-head-752 jss710 MuiTableCell-sizeSmall-755" scope="col" aria-label="trade-data-header-row-1" style="min-width: 400px;">
            <button class="MuiButtonBase-root-378 MuiButton-root-351 MuiButton-text-353 jss712" tabindex="0" type="button" aria-label="sort-button-HTS Description">
               <span class="MuiButton-label-352">
                  <span class="jss715">HTS Description</span>
                  <svg class="MuiSvgIcon-root-324" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                     <path d="M7 10l5 5 5-5z"></path>
                  </svg>
               </span>
            </button>
         </th>
         <th class="MuiTableCell-root-751 MuiTableCell-head-752 jss710 jss719 MuiTableCell-sizeSmall-755" scope="col" aria-label="trade-data-header-row-2" style="min-width: 230px;">
            <button class="MuiButtonBase-root-378 MuiButton-root-351 MuiButton-text-353 jss712" tabindex="0" type="button" aria-label="sort-button-NZ Value">
               <span class="MuiButton-label-352">
                  <span class="jss715">NZ Value</span>
                  <svg class="MuiSvgIcon-root-324" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                     <path d="M7 10l5 5 5-5z"></path>
                  </svg>
               </span>
            </button>
         </th>
         <th class="MuiTableCell-root-751 MuiTableCell-head-752 jss710 jss719 MuiTableCell-sizeSmall-755" scope="col" aria-label="trade-data-header-row-3" style="min-width: 230px;">
            <button class="MuiButtonBase-root-378 MuiButton-root-351 MuiButton-text-353 jss712" tabindex="0" type="button" aria-label="sort-button-US Value">
               <span class="MuiButton-label-352">
                  <span class="jss715">US Value</span>
                  <svg class="MuiSvgIcon-root-324" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                     <path d="M7 10l5 5 5-5z"></path>
                  </svg>
               </span>
            </button>
         </th>
         <th class="MuiTableCell-root-751 MuiTableCell-head-752 jss710 jss719 MuiTableCell-sizeSmall-755" scope="col" aria-label="trade-data-header-row-4" style="min-width: 230px;">
            <button class="MuiButtonBase-root-378 MuiButton-root-351 MuiButton-text-353 jss712" tabindex="0" type="button" aria-label="sort-button-Value Discrepancy">
               <span class="MuiButton-label-352">
                  <span class="jss715">Value Discrepancy</span>
                  <svg class="MuiSvgIcon-root-324" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                     <path d="M7 10l5 5 5-5z"></path>
                  </svg>
               </span>
            </button>
         </th>
         <th class="MuiTableCell-root-751 MuiTableCell-head-752 jss710 MuiTableCell-sizeSmall-755" scope="col" aria-label="trade-data-header-row-5" style="min-width: 230px;">
            <button class="MuiButtonBase-root-378 MuiButton-root-351 MuiButton-text-353 jss712" tabindex="0" type="button" aria-label="sort-button-Value %">
               <span class="MuiButton-label-352">
                  <span class="jss715">Value %</span>
                  <svg class="MuiSvgIcon-root-324" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                     <path d="M7 10l5 5 5-5z"></path>
                  </svg>
               </span>
            </button>
         </th>
      </tr>
   </thead>
</table>

解决方案 #

1. 滚动表格容器而非目标元素 #

表格的横向滚动由父容器控制（通常是带overflow-x: auto的div），直接滚动容器才能精准定位：

// 定位表格的滚动容器（根据实际DOM调整选择器）
WebElement scrollContainer = driver.findElement(By.xpath("//div[contains(@class, 'table-container')]"));
WebElement targetElement = driver.findElement(By.xpath("//th[@aria-label='trade-data-header-row-0']/button"));

// 滚动容器到目标元素的位置
((JavascriptExecutor) getDriver()).executeScript("arguments[0].scrollLeft = arguments[1].offsetLeft;", scrollContainer, targetElement);

2. 修复视口可见性检测逻辑 #

原方法仅判断中心点是否被覆盖，改为检测元素整体是否在视口内：

public Boolean isFullyVisibleInViewport(WebElement element) {
    return (Boolean)((JavascriptExecutor)getDriver()).executeScript(
            "var elem = arguments[0]; " +
            "var rect = elem.getBoundingClientRect(); " +
            "return (" +
                "rect.top >= 0 && " +
                "rect.left >= 0 && " +
                "rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && " +
                "rect.right <= (window.innerWidth || document.documentElement.clientWidth)" +
            ");", element);
}

3. 强制点击绕过拦截 #

若滚动后仍有拦截问题，用JS直接执行点击：

public void forceClickElement(WebElement element) {
    ((JavascriptExecutor) getDriver()).executeScript("arguments[0].click();", element);
}

4. 实现从右向左滚动的完整流程 #

先滚动到最后一列，再滚动到目标列：

WebElement lastColumn = driver.findElement(By.xpath("//th[@aria-label='trade-data-header-row-5']"));
WebElement scrollContainer = driver.findElement(By.xpath("//div[contains(@class, 'table-container')]"));
WebElement targetElement = driver.findElement(By.xpath("//th[@aria-label='trade-data-header-row-0']/button"));

// 先滚动到最后一列
((JavascriptExecutor) getDriver()).executeScript("arguments[0].scrollLeft = arguments[1].offsetLeft + arguments[1].offsetWidth;", scrollContainer, lastColumn);
// 再滚动到目标列
((JavascriptExecutor) getDriver()).executeScript("arguments[0].scrollLeft = arguments[1].offsetLeft;", scrollContainer, targetElement);

内容的提问来源于stack exchange，提问作者VinnyTech