《最新出爐》系列初窺篇-Python+Playwright自動化測試-31-JavaScript的調用執行-上篇

1.簡介

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

2.用法

上一篇中就提到過，這裏提取一下，語法如下：

# 原生js
js = '原生js;'
# 調用js
page.evaluate(js)

3.項目實戰

3.1場景一

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

   詳細參考博客：日曆時間控件（傳送門）

3.2場景二

1.有些頁面的內容不是打開頁面時直接加載的，需要我們滾動頁面，直到頁面的位置顯示在屏幕上時，纔會去請求服務器，加載相關的內容。所以，有時候我們就需要模擬頁面向下滾動的操作。而python沒有提供操作滾動條的方法，只能藉助js來完成！

2.使用JS語句模擬向下滾動頁面

可以使用JS語句，定位滾動條的位置到最下面，從而實現頁面的向下滾動。

語法如下：

js = "var q=document.documentElement.scrollTop=滾動條的位置"

page.evaluate(js)

4.實際案例（場景二）

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

4.1代碼設計

4.2參考代碼

# coding=utf-8🔥

# 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行

# 2.註釋：包括記錄創建時間，創建人，項目名稱。
'''
Created on 2023-11-11
@author: 北京-宏哥   QQ交流羣：705269076
公衆號：北京宏哥
Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-31-JavaScript的調用執行-上篇
'''

# 3.導入模塊
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://www.cnblogs.com/")
    js = "var q=document.documentElement.scrollTop=50000"
    page.evaluate(js)
    page.wait_for_timeout(3000)
    # page.pause()
    browser.close()

4.3運行代碼

1.運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：

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

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

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