Playwright執行 JavaScript 腳本：探索瀏覽器自動化的新境界

言

我們在進行web自動化時，經常遇到一些不好操作的元素，普通的元素定位和操作容易報錯，如果我們使用的selenium的話，就可以使用selenium調用js腳本進行操作。在playwright 中也有類似的方法，使用page.evaluate()執行JavaScript腳本。 page.evaluate()和page.evaluate_handle()之間的唯一區別是page.evaluate_handle()返回JSHandle。

page.evaluate() 返回調用執行的結果
page.evaluate_handle()返回JSHandle

page.evaluate()

返回evaluate() 返回執行JavaScript腳本的結果，使用示例如下：

pythonfrom playwright.sync_api import sync_playwright

def run_js_script():
    with sync_playwright() as playwright:
        browser = playwright.chromium.launch(headless=False)
        context = browser.new_context()
        page = context.new_page()
        page.goto('https://www.baidu.com')

        print(page.evaluate("1 + 2"))

        # 關閉瀏覽器
        context.close()
        browser.close()

run_js_script()

也可以執行一個函數，如下：

pythonfrom playwright.sync_api import sync_playwright

def run_js_script():
    with sync_playwright() as playwright:
        browser = playwright.chromium.launch(headless=False)
        context = browser.new_context()
        page = context.new_page()
        page.goto('https://www.baidu.com')

        print(page.evaluate("() => '拜仁慕尼黑'"))

        # 關閉瀏覽器
        context.close()
        browser.close()

run_js_script()

注：如果傳遞給page.evaluate()的函數返回一個不可序列化的值，則page.evaluate()解析為undefined

示例

打印網頁標題

執行document.title 獲取頁面的title，代碼如下：

pythonfrom playwright.sync_api import sync_playwright

def run_js_script():
    with sync_playwright() as playwright:
        browser = playwright.chromium.launch(headless=False)
        context = browser.new_context()
        page = context.new_page()
        page.goto("https://www.baidu.com/")
        title = page.evaluate('document.title')
        print(title)
        page.pause()
        # 關閉瀏覽器
        context.close()
        browser.close()

run_js_script()

操作元素示例

pythonfrom playwright.sync_api import sync_playwright

def run_js_script():
    with sync_playwright() as playwright:
        browser = playwright.chromium.launch(headless=False)
        context = browser.new_context()
        page = context.new_page()
        page.goto("https://www.baidu.com/")
        js = """
            document.getElementById('kw').value='playwright';
            document.getElementById('su').click();
            """
        page.evaluate(js)
        page.pause()
        # 關閉瀏覽器
        context.close()
        browser.close()

run_js_script()

頁面如下：

page.evaluate_handle()

page.evaluate_handle()的返回值是JSHandle。

pythonfrom playwright.sync_api import sync_playwright

def run_js_script():
    with sync_playwright() as playwright:
        browser = playwright.chromium.launch(headless=False)
        context = browser.new_context()
        page = context.new_page()
        page.goto("https://www.baidu.com/")
        a_handle = page.evaluate_handle("document.body")
        result_handle = page.evaluate_handle("body => body.innerHTML", a_handle)
        print(result_handle.json_value())
        result_handle.dispose()
        page.pause()
        # 關閉瀏覽器
        context.close()
        browser.close()

run_js_script()

總結

本文主要介紹了playwright執行js腳本的操作，與selenium一樣，playwright同樣可以執行js腳本來完成一些不便操作的元素。

買mate40，但總是搶不到，所以想試著能不能寫個腳本代碼。

第一步：把想要搶購的商品加進購物車，注意：腳本是對購物車內全部商品進行下單操作，所以不夠買的商品最好先從購物車內刪除。
第二步：寫好Python腳本，在搶購之前運行，并設置好搶購時間。

私信小編01即可獲取大量python學習資源

Python腳本實現

安裝Python。我安裝的是anaconda

安裝webdriver擴展。它是Selenium模塊的一部分。Selenium是一個用于Web應用程序測試的工具，用于測試你的應用程序看是否能夠很好得工作在不同瀏覽器和操作系統之上。Selenium測試直接運行在瀏覽器中，就像真正的用戶在操作一樣。所以其實就是安裝Selenium：Win+R，輸入cmd，在命令行中輸入pip show selenium
安裝chrome瀏覽器（因為我用的是谷歌）
安裝chromedriver。它是chrome的插件，是為了webDriver能通過操作chromedriver來控制chrome瀏覽器自動操作，如打開網頁，點擊按鈕等操作。

下載地址：

http://chromedriver.storage.googleapis.com/index.html或者https://npm.taobao.org/mirrors/chromedriver/

**注意：下載時要根據電腦系統和chrome瀏覽器版本來選擇對應的chromedriver版本。**可以通過瀏覽器右上角的三點→幫助→關于Google Chrome來查看自己的chrome版本。

下載chromedriver安裝包后，進行解壓，放在chrome安裝的同級目錄下，同時在環境變量PATH中添加路徑。

然后用以下代碼檢驗是否安裝成功：

然鵝，此時我遇到了錯誤，如下

于是，我把chromedriver.exe放到了我python腳本的文件夾后，就完美解決問題了！

【補充】
我知道自己為什么出現上面那個錯誤了，因為路徑沒輸入！
在下圖所示紅框處輸入自己的下載的chromedriver安裝路徑即可成功運行。

完整的Python腳本代碼如下：

avaScript 是網景（Netscape）公司開發的一種基于客戶端瀏覽器、面向（基于）對象、事件驅動式的網頁腳本語言。JavaScript語言的前身叫作Livescript。

JavaScript的特點：

簡單、易學、易用；
跨平臺；IE、Navigator
符合ECMA（歐洲計算機制造協會）標準，可移植；
事件驅動式的腳本程序設計思想；
動態、交互式的操作方式。

JavaScript的作用：

交互式操作；
表單驗證；
網頁特效；
Web游戲
服務器腳本開發等。

JavaScript的編寫環境：

文本編輯器

JavaScript的執行平臺：

Web瀏覽器

JavaScript的執行方式：

解釋執行（由上而下）

JavaScript的版本：

JavaScript1.0——JavaScript1.4

瀏覽器對JavaScript的支持：

JavaScript/IE3.0、JavaScript1.2/IE4.0；

微軟允許用戶自行設置對JavaScript處理模式。

JavaScript與Java、VBScript、JScript的關系：

JavaScript與Java的區別體現在：

首先，它們是兩個公司開發的不同的兩個產品，Java是SUN公司推出的新一代面向對象的程序設計語言，特別適合于Internet應用程序開發；而JavaScript是Netscape公司的產品，其目的是為了擴展Netscape Navigator功能而開發的一種可以嵌入Web頁面中的基于對象和事件驅動的解釋性語言。

其次，JavaScript是基于對象的，而Java是面向對象的，即Java是一種真正的面向對象的語言，即使是開發簡單的程序，必須設計對象。JavaScript是種腳本語言，它可以用來制作與網絡無關的，與用戶交互作用的復雜軟件。它是一種基于對象和事件驅動的編程語言。因而它本身提供了非常豐富的內部對象供設計人員使用。

第三，兩種語言在其瀏覽器中所執行的方式不一樣。Java的源代碼在傳遞到客戶端執行之前，必須經過編譯，因而客戶端上必須具有相應平臺上的仿真器或解釋器，它可以通過編譯器或解釋器實現獨立于某個特定的平臺編譯代碼的束縛。JavaScript是一種解釋性編程語言，其源代碼在發往客戶端執行之前不需經過編譯，而是將文本格式的字符代碼發送給客戶，由瀏覽器解釋執行。

第四，兩種語言所采取的變量是不一樣的。Java采用強類型變量檢查，即所有變量在編譯之前必須作聲明。JavaScript中變量聲明，采用其弱類型。即變量在使用前不需作聲明，而是解釋器在運行時檢查其數據類型。

第五，代碼格式不一樣。Java是一種與HTML無關的格式，必須通過像HTML中引用外媒體那么進行裝載，其代碼以字節代碼的形式保存在獨立的文檔中。JavaScript的代碼是一種文本字符格式，可以直接嵌入HTML文檔中，并且可動態裝載。編寫HTML文檔就像編輯文本文件一樣方便。

第六，嵌入方式不一樣。在HTML文檔中，兩種編程語言的標識不同，JavaScript使用<script>...</script>來標識，而Java使用<applet> ... </applet> 來標識。

第七，靜態綁定和動態綁定。Java采用靜態聯編，即Java的對象引用必須在編譯時的進行，以使編譯器能夠實現強類型檢查，如不經編譯則就無法實現對象引用的檢查。JavaScript采用動態聯編，即JavaScript的對象引用在運行時進行檢查。

JavaScript學習教程

如果想要更高效、更系統地學會javascript，最好采用邊學邊練的學習模式。

今天分享的這套JavaScript學習教程，講解了前端開發中的核心技術JavaScript，俗稱JS

內容涵蓋：JavaScript核心語法、JavaScript內置支持類、JavaScript調試、JavaScript DOM編程、JavaScript BOM編程、大量前端小案例、JavaScript事件處理、JavaScript對象、繼承、JSON等知識點，該視頻可以開啟你的WEB前端之路。

課程目錄

1. .JavaScript教程-JavaScript概述

2. .JavaScript教程-HTML嵌入JavaScript代碼的第一種方式1

3. .JavaScript教程-HTML嵌入JavaScript代碼的第一種方式2

4. .JavaScript教程-HTML嵌入JavaScript代碼的第二種方式

5. .JavaScript教程-HTML嵌入JavaScript代碼的第三種方式

6. JavaScript教程-JS的標識符

7. .JavaScript教程-JS的變量1

8. .JavaScript教程-JS的變量2

9. JavaScript教程-JS的函數初步1

10. .JavaScript教程-JS的函數初步2

11. .JavaScript教程-全局變量和局部變量

12. .JavaScript教程-JS的數據類型

13. .JavaScript教程-Undefined數據類型

14. .JavaScript教程-Number數據類型

15. .JavaScript教程-Boolean數據類型

16. .JavaScript教程-回顧數據類型

17. .JavaScript教程-String數據類型

18. .JavaScript教程-Object數據類型

19. JavaScript教程-Object數據類型2

20. .JavaScript教程-Object數據類型3

21. .JavaScript教程-null undefined NaN的區別以及等同和全等運算符

22. .JavaScript教程-JS的常用事件

23. .JavaScript教程-回調函數的概念

24. .JavaScript教程-注冊事件的兩種方式

25. JavaScript教程-JS代碼的執行順序

26. .JavaScript教程-JS代碼的執行順序2

27. JavaScript教程-捕捉回車鍵

28. .JavaScript教程-捕捉回車鍵2

29. .JavaScript教程-void運算符

30. .JavaScript教程-JS的控制語句

31. JavaScript教程-設置和獲取文本框的value

32. JavaScript教程-innerHTML和innerText屬性

33. .JavaScript教程-正則表達式

34. .JavaScript教程-郵箱地址的正則表達式

35. JavaScript教程-擴展字符串的trim函數

36. .JavaScript教程-回顧JS

37. JavaScript教程-表單驗證

38. JavaScript教程-表單驗證2

39. JavaScript教程-表單驗證3

40. .JavaScript教程-表單驗證4

41. .JavaScript教程-復選框的全選和取消全選

42. .JavaScript教程-獲取下拉列表選中項的value

43. .JavaScript教程-周期函數setInterval

44. .JavaScript教程-內置支持類Array

45. .JavaScript教程-BOM編程window的open和close

46. .JavaScript教程-BOM編程彈出確認框

47. .JavaScript教程-（補錄）-將當前窗口設置為頂級窗口

48. .JavaScript教程-BOM編程history和location對象

49. .JavaScript教程-JSON在開發中的使用

50. .JavaScript教程-JSON在開發中的使用2

51. JavaScript教程-JSON在開發中的使用3

52. .JavaScript教程-JSON在開發中的使用4

53. JavaScript教程-JSON在開發中的使用5

關注+轉發本文后私信扣“1”

在線咨詢

上一篇：「Springboot」Springboot整合郵件服務(HTML/附件/模板-QQ網易)
下一篇：如何提高B端表單操作效率，這里有7個技巧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商