selenium webdriver——JS滚动到指定位置

---

1.DOM滚动方法

1、scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true，或者省略它，窗口会尽可能滚动到自身顶部与元素顶部平齐。-------目前各浏览器均支持

2、scrollIntoViewIfNeeded(alignCenter) 只在当前元素在视窗的可见范围内不可见的情况下，才滚动浏览器窗口或容器元素，最终让当前元素可见。如果当前元素在视窗中可见，这个方法不做任何处理。如果将可选参数alignCenter设置为true，则表示尽量将元素显示在视窗中部（垂直方向）------Safari、Chrome实现了这个方法

3、scrollByLines(lineCount) 将元素的内容滚动指定的行数的高度，lineCount的值可以为正值或是负值。---Safari、Chrome实现了这个方法

4、scrollByPages(pageCount) 将元素的内容滚动指定的页面的高度，具体高度由元素的高度决定。---Safari、Chrome实现了这个方法

 

scrollIntoView()和scrollIntoVIewIfNeeded()作用的是元素的窗口，而scrollByLines()、scrollByPages()影响元素自身，下面是几个示例：

//将页面主体滚动5行

document.body.scrollByLines(5);

//确保当前元素可见

document.getElementById(“test”).scrollIntoView();

//确保只在当前元素不可见的情况下才使其可见

document.getElementById(“test”).scrollIntoViewIfNeeded();

//将页面主体往回滚1页

doument.body.scrollByPages(-1);

 

由于只有scrollIntoView被各浏览器均支持，所以这个方法最为常用。

---

2.滚动到指定位置

为啥使用滚动？ 因为如果页面没有完全显示，element如果是在下拉之后才能显示出来，只能先滚动到该元素才能进行click，否则是不能click操作

JavascriptExecutor js=(JavascriptExecutor)driver;
        // roll down and keep the element to the center of browser
        js.executeScript("arguments[0].scrollIntoView(true)", e);

其中e为指定位置元素定位.比如：driver.findElement(By.xpath(".//*[@id='page']/a[10]"))

 

可以封装滚动到元素的方法

    /**
     * @author hjianhui
     * @param element
     */
    public void scrollToElement(By by) {
        WebElement e = findElement(driver, by);
        log.info("scroll view element");
        JavascriptExecutor js = (JavascriptExecutor) driver;
        // roll down and keep the element to the center of browser
        js.executeScript("arguments[0].scrollIntoView(true);", e);
    }

 

打开百度，搜索selenium,向下滑动点击下一页，代码如下：

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.TimeoutException;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;import org.openqa.selenium.support.ui.ExpectedCondition;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.Assert;

/**
* @author Hjianhui
* JavaScript.java  2016-08-04 
* 
*/
public class testScrollToElement{

    public static void main(String[] args) {


        WebDriver driver = new ChromeDriver();
        try{
            driver.get("http://www.baidu.com");
            JavascriptExecutor driver_js= (JavascriptExecutor) driver;
            //利用js代码键入搜索关键字
            driver_js.executeScript("document.getElementById(\"kw\").value=\"selenium\"");
            driver.findElement(By.id("su")).click();
            //等待元素页面加载
            waitForElementToLoad(driver, 10, By.xpath(".//*[@id='container']/div[2]/div/div[2]"));
            //向下滑动直到找到元素下一页
            driver_js.executeScript("arguments[0].scrollIntoView(true)",driver.findElement(By.xpath(".//*[@id='page']/a[10]"))); 
　　　         
            driver.findElement(By.xpath(".//*[@id='page']/a[10]")).click();
        }catch (Exception e){
            e.printStackTrace();
        }
        driver.quit();    
    }
    
    /**
     * 在给定的时间内去查找元素，如果没找到则超时，抛出异常
     * */
    public static void waitForElementToLoad(WebDriver driver, int timeOut, final By By) {
        try {
            (new WebDriverWait(driver, timeOut)).until(new ExpectedCondition<Boolean>() {

                public Boolean apply(WebDriver driver) {
                    WebElement element = driver.findElement(By);
                    return element.isDisplayed();
                }
            });
        } catch (TimeoutException e) {
            Assert.fail("超时!! " + timeOut + " 秒之后还没找到元素 [" + By + "]");
        }
    }
}