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 + "]");
        }
    }
}