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

宏哥發表於2023-11-21
PythonJavaScript

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

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

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

相關文章