使用JavaScript scrollIntoView会导致元素模糊

我正在使用Java、Selenium和TestNG测试一个Web应用程序

我试图单击仅由打开弹出窗口的占位符引用的元素

我必须滚动到元素才能看到它

这是滚动代码：

public static boolean scrollIntoView(WebElement element, WebDriver driver) {
    debug.print(thisClass + " scroll into view...");
    int attempts = 0;
    while (attempts < 2) {
        try {
            // Create instance of Javascript executor
            JavascriptExecutor je = (JavascriptExecutor) driver;
            // now execute query which actually will scroll until that element has appeared
            je.executeScript("arguments[0].scrollIntoView(true);", element);
            debug.print(thisClass + " scrolled into view!");
            return true;
        } catch (StaleElementReferenceException e) {
            // expected
            break;
        } catch (Exception e) {
            int errorCode = 1520008991;
            System.err.println(thisClass + " Error Code: " + errorCode + " error in scrollIntoView: " + e.getMessage());
        }
        attempts++;
    }
    return false;
}

publicstaticboolearnscrollintoview（WebElement元素，WebDriver驱动程序）{
打印（thisClass+“滚动到视图…”）；
int=0；
而（尝试次数<2次）{
试一试{
//创建Javascript执行器的实例
JavascriptExecutor je=（JavascriptExecutor）驱动程序；
//现在执行查询，该查询实际上将滚动到该元素出现为止
je.executeScript（“参数[0].scrollIntoView（true）；”，元素）；
打印（thisClass+“滚动到视图中！”）；
返回true；
}捕获（StaleElementReferenceException e）{
//期望
打破
}捕获（例外e）{
内部错误代码=1520008991；
System.err.println（thisClass+“错误代码：”+errorCode+“scrollIntoView中的错误：”+e.getMessage（））；
}
尝试++；
}
返回false；
}

这是我要查找并单击元素的代码

// identifier = text used to identify placeholder
public static boolean findXpathPlaceholderAndClick(WebDriver driver, String identifier) {
    printLine();
    myPrint(thisClass + " findXpathPlaceholderAndClick. ");
    myPrint(thisClass + " Find placeholder using identifier: " + identifier);
    List<WebElement> placeholders = driver
            .findElements(By.xpath("//label[contains(@class, 'label-placeholder-text')]"));

    myPrint(thisClass + " placeholders count: " + placeholders.size());
    for (WebElement element : placeholders) {
        // select an element
        if(!element.isDisplayed()) {
            Common.scrollIntoView(element, driver);
        }
        String text = element.getAttribute("innerHTML");
        myPrint(thisClass + " text: " + text);
        if (text.contains(identifier)) {
            myPrint(thisClass + " found " + text);
            String forId = element.getAttribute("for");
            myPrint(thisClass + " id of input field = " + forId);
            WebElement inputField = driver.findElement(By.id(forId));
            if (!inputField.isDisplayed()) {
                return false;
            }
            try {
                inputField.click();
                return true;
            } catch (Exception e) {
                int errorCode = 1523444596;
                System.err.println(thisClass + " error Code: " + errorCode + " Exception: " + e.getMessage());
                e.printStackTrace();
                return false;
            }
        }
    }
    return false;
}

//标识符=用于标识占位符的文本
公共静态布尔FindxPathPlaceholder并单击（WebDriver驱动程序，字符串标识符）{
printLine（）；
myPrint（thisClass+“查找路径占位符并单击”）；
myPrint（thisClass+“使用标识符“+标识符”查找占位符）；
列表占位符=驱动程序
.findElements（By.xpath（“//label[contains（@class，'label placeholder text'））]”）；
myPrint（thisClass+占位符计数：“+占位符.size（））；
for（WebElement:占位符）{
//选择一个元素
如果（！element.isDisplayed（））{
Common.scrollIntoView（元素、驱动程序）；
}
String text=element.getAttribute（“innerHTML”）；
myPrint（thisClass+文本：“+文本）；
if（text.contains（标识符））{
myPrint（thisClass+“已找到”+文本）；
字符串forId=element.getAttribute（“for”）；
myPrint（thisClass+“输入字段的id=”+forId）；
WebElement inputField=driver.findElement（By.id（forId））；
如果（！inputField.isDisplayed（））{
返回false；
}
试一试{
inputField.click（）；
返回true；
}捕获（例外e）{
内部错误代码=1523444596；
System.err.println（thisClass+“错误代码：”+errorCode+“异常：”+e.getMessage（））；
e、 printStackTrace（）；
返回false；
}
}
}
返回false；
}

这是我试图单击的实际元素的HTML：

<div class="form-group label-placeholder">
    <input class="form-control text-ellipsis-global" id="gwt-uid-2401" data-empty="false" style="" type="text"> 
    <label class="label-placeholder-text" for="gwt-uid-2401">Geometry Required</label> 
    <label class="label-placeholder-icon" for="gwt-uid-2401" style="display: block;"> <i class="icon-display-list"></i> </label>
</div>

所需几何图形

最后，这是我的日志的输出：

    ------------------------------------------------------------------------------------------------------------------------------
utils.Common                                         findXpathPlaceholderAndClick. 
utils.Common                                         Find placeholder using identifier: Geometry Required
utils.Common                                         placeholders count: 6
utils.Common                                         text: Design name
utils.Common                                         text: Icon
utils.Common                                         text: Colour
utils.Common                                         text: Reference To
utils.Common                                         scroll into view...
utils.Common                                         scrolled into view!
utils.Common                                         text: Network
utils.Common                                         scroll into view...
utils.Common                                         scrolled into view!
utils.Common                                         text: Geometry Required
utils.Common                                         found Geometry Required
utils.Common                                         id of input field = gwt-uid-2401
tests.designer.CreateAssetDesignTest                 *** click Geometry Required failed ***
tests.designer.CreateAssetDesignTest                 ASSERT:  click Geometry Required?  false

utils.Common                                         Generating screenshot. 
utils.Common                                         error Code: 1523444596 Exception: Element <input id="gwt-uid-2401" class="form-control text-ellipsis-global" type="text"> is not clickable at point (150,85) because another element <button class="gwt-Button form-control btn back-button ripple-container" type="button"> obscures it
Build info: version: '3.8.1', revision: '6e95a6684b', time: '2017-12-01T19:05:32.194Z'
System info: host: 'SSTAPLE', ip: '172.16.190.147', os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0', java.version: '1.8.0_151'
Driver info: org.openqa.selenium.firefox.FirefoxDriver
Capabilities {acceptInsecureCerts: true, browserName: firefox, browserVersion: 59.0.3, javascriptEnabled: true, moz:accessibilityChecks: false, moz:headless: false, moz:processID: 23160, moz:profile: C:\Users\SStaple\AppData\Lo..., moz:useNonSpecCompliantPointerOrigin: false, moz:webdriverClick: true, pageLoadStrategy: normal, platform: XP, platformName: XP, platformVersion: 10.0, rotatable: false, timeouts: {implicit: 0, pageLoad: 300000, script: 30000}}
Session ID: 18bdbb72-a68a-49d7-a7d2-9dc00f455546

------------------------------------------------------------------------------------------------------------------------------
utils.Common FindxPathPlaceholder并单击。
utils.Common使用标识符查找占位符：需要几何图形
公用占位符计数：6
公用文本：设计名称
公用文本：图标
通用文本：颜色
公用文本：参考
公用滚动到视图中。。。
utils.Common已滚动到视图中！
公用文本：网络
公用滚动到视图中。。。
utils.Common已滚动到视图中！
公用文本：需要几何图形
utils。需要常见的几何图形
utils.输入字段的公共id=gwt-uid-2401
tests.designer.CreateAssetDesignTest***单击所需几何图形失败***
tests.designer.CreateAssetDesignTest断言：是否单击“所需几何体”？假的
通用生成屏幕截图。
utils.常见错误代码：1523444596异常：元素在点（150,85）处不可单击，因为另一个元素遮挡了它
构建信息：版本：“3.8.1”，修订版：“6e95a6684b”，时间：“2017-12-01T19:05:32.194Z”
系统信息：主机：'SSTAPLE'，ip:'172.16.190.147'，os.name:'Windows 10'，os.arch:'amd64'，os.version:'10.0'，java.version:'1.8.0_151'
驱动程序信息：org.openqa.selenium.firefox.FirefoxDriver
能力{AcceptInsureCerts:true，browserName:firefox，browserVersion:59.0.3，javascriptEnabled:true，moz:accessibilityChecks:false，moz:Headles:false，moz:processID:23160，moz:profile:C:\Users\SStaple\AppData\Lo…，moz:UseNonSpectCompliantPointeroRigin:false，moz:webdriverClick:true，pageLoadStrategy:normal，platform:XP，platformName:XP，platformVersion:10.0，rotatable:false，超时：{隐式：0，页面加载：300000，脚本：30000}
会话ID:18bdbb72-a68a-49d7-a7d2-9dc00f455546

因此，它正在查找元素OK&尝试单击它，但发现该元素被静态元素遮挡

我很确定滚动是个问题

---

有什么办法可以解决这个问题吗？

如果你看到错误消息，它会说明是哪个元素阻止了点击。你需要调查什么是阻止元素，以及如何消除它，等等。根据我的经验，通常是一些弹出窗口，等等。你需要关闭或等待它消失