《手把手教你》系列技巧篇（三十九）-java+ selenium自動化測試-JavaScript的調用執行-上篇（詳解教程）

1.簡介

　　在做web自動化時，有些情況selenium的api無法完成，需要通過第三方手段比如js來完成實現，比如去改變某些元素對象的屬性或者進行一些特殊的操作，本文將來講解怎樣來調用JavaScript完成特殊操作。

2.用法

　　創建一個執行 JS 的對象，也就是 JavascriptExecutor 對象，這個對象是由 driver 進行強制類型轉換而來，即JavascriptExecutor js= (JavascriptExecutor)driver；然后這個對象 js 就可以調用 executeScript 方法來執行一段 JS，這段 JS 的語句是以一段字符串的形式給傳參到 executeScript 中去的。

//執行方式
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
jsExecutor.executeScript("js代碼");

3.項目實戰

3.1場景一

1.時間插件限制手動輸入的情況下，sendkeys無法寫入數據，需要執行js來移除readonly屬性！

   詳細參考博客：日歷時間控件（https://www.cnblogs.com/du-hong/p/15479221.html）

3.2場景二

1.有些頁面元素需要拉動滾動條才能獲取到(因為拉取滾動條才加載)，而selenium和webdriver都沒有提供操作滾動條的方法，只能借助js來完成！

2.主要代碼如下所示：

//執行方式
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
String js = "document.body.scrollTop=200";
jsExecutor.executeScript(js);//執行js

4.實際案例（場景二）

宏哥在這里直接就用博客園的滾動條給小伙伴或者是童鞋們來實戰演示一下，大家可以注意宏哥錄制瀏覽器動作視頻的滾動條在向下滾動直到博客園的底部。

4.1代碼設計

4.2參考代碼

package lessons;

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.ie.InternetExplorerDriver;

/**
 * @author 北京-宏哥
 * 
 * 《手把手教你》系列技巧篇（三十九）-java+ selenium自動化測試-JavaScript的調用執行（詳解教程）
 *
 * 2021年11月3日
 */
public class ScrollTopTest {
    
    public static void main(String[] args) {
        
        System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe"); //指定驅動路徑
        WebDriver driver = new ChromeDriver ();
        try {
            driver.get("https://www.cnblogs.com/");
            driver.manage().window().maximize();
            Thread.sleep(5000);
            //執行方式
            JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
            //String js = "document.documentElement.scrollTop=200"; 
            String js = null;
            for (int i = 0; i < driver.manage().window().getSize().height*3; i=i+3) {
                if(driver instanceof ChromeDriver) {
                    js = "document.documentElement.scrollTop="+i;
                }else if(driver instanceof FirefoxDriver) {
                    js = "document.documentElement.scrollTop="+i;
                }else if(driver instanceof InternetExplorerDriver) {
                    js = "document.documentElement.scrollTop="+i;
                }
                jsExecutor.executeScript(js);//執行js
            }
            Thread.sleep(5000);
        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            System.out.println("執行結束，關閉瀏覽器！");
            driver.quit();
        }
    }

}

4.3運行代碼

1.運行代碼，右鍵Run AS->Java Appliance，控制台輸出，如下圖所示：

2.運行代碼后電腦端的瀏覽器的動作，如下小視頻所示：

5.小結

1.獲取瀏覽器滾動條滾動距離的問題，共有兩種方法，

document.body.scrolltop//當沒有DOCTYPE聲明時，用它
document.documentElement.scrollTop//標准網頁，用它

2.也有人說chrome只能使用document.body.scrollTop方法得到height值，本人試用了一下，得到的結果是

以此可見，Chrome依然遵循上面的標准，使用document.documentElement.scrollTop方式，得到height值

其實在實際使用中，為確保在各個瀏覽器中的正常使用，js代碼可采用如下方法：

var height = document.body.scrolltop||document.documentelement.scrolltop

因為這二者只有一個值有效，因此保證了在各種情況下都能獲取瀏覽器滾動條滾動的距離。當然了，我們也可以事先在控制台上試一下，或者是一個獲取不到就是用另一個方法（二選一即可）。

好了，今天時間也不早了，宏哥就講解和分享到這里，感謝大家耐心的閱讀！喜歡宏哥的別忘記支持一下哈！！！