1.簡介
各種自動化框架都會有腳本錄製功能， playwright這麼牛叉當然也不例外。很早之前的selenium、Jmeter工具，發展到每種瀏覽器都有對應的錄製插件。今天我們就來看下微軟自動化框架playwright是如何錄製腳本的。很多小夥伴或者童鞋們會覺得奇怪，怎麼現在纔將錄製生成腳本啊，要是早點講解和分享，我還費什麼勁，揪頭髮寫代碼啊。宏哥這裏說一下：這麼做的目的就是爲了錄製生成腳本打基礎的。要不然開始直接上手就錄製了，就算生成腳本你也不知道什麼意思，更不用說腳本中有錯誤需要你調試修改腳本了。playwright 可以支持自動錄製生成腳本，也就是說只需要在頁面上點點點，就可以自動生成對應的腳本了。
2.啓動腳本自動錄製
1.在CMD命令行中，使用如下命令，打開自動錄製功能：
playwright codegen
2.執行該命令後，程序會自動打開兩個窗口，一個是瀏覽器窗口，您可以在其中與要測試的網站進行交互，另一個是 Playwright Inspector 窗口，您可以在其中記錄測試、複製測試、清除測試以及更改測試語言。隨着我們在瀏覽器窗口中進行手動操作，在Playwright Inspector界面中會自動生成手動操作對應的自動化代碼。如下圖所示：
3.在Playwright Inspector界面的Target選項中，可以切換編程語言：Python、Java、Node.js、.NET C#。如下圖所示：
4.在瀏覽器界面中，當把鼠標放置在某個區域上，會自動提示出定位該位置的選擇器代碼，使用起來非常方便。如下圖所示：
3.關閉腳本自動錄製
3.1方法一
錄製完成後，手動關掉瀏覽器即可。
3.2方法二
在CMD命令行中，使用快捷鍵Ctrl+C，然後輸入Y，關閉自動錄製功能，如下圖所示：
4.自動保存錄制腳本到本地文件
如果直接使用“playwright codegen”命令啓動腳本錄製，雖然在錄製的過程中會自動生成腳本，但關掉瀏覽器後，生成的腳本也被自動關掉了。這樣就再也找不回來了，白白辛苦半天。
如果想將生成的腳本自動保存在文件中，可以使用如下命令啓動腳本錄製：
playwright codegen -o 本地文件名
使用“-o”命令指定一個本地文件，在腳本錄製完成後，自動生成的腳本會保存在該文件中。
5.啓動瀏覽器時，自動打開指定頁面
如果未指定訪問的頁面時，錄製命令自動打開一個空白頁面。但我們可以使用如下命令，讓瀏覽器在啓動後，自動打開一個指定頁面。
playwright codegen 指定打開的網址 -o script.py
保存到本地的文件：
6.項目實戰
6.1同步生成腳本
宏哥這裏以百度搜索“北京-宏哥”爲例。一個完整的搜索流程代碼生成如下：
參開代碼：
from playwright.sync_api import Playwright, sync_playwright, expect def run(playwright: Playwright) -> None: browser = playwright.chromium.launch(headless=False) context = browser.new_context() page = context.new_page() page.goto("https://www.baidu.com/") page.locator("#kw").click() page.locator("#kw").fill("北京-宏哥") page.get_by_role("button", name="百度一下").click() # --------------------- context.close() browser.close() with sync_playwright() as playwright: run(playwright)
6.2異步生成腳本
1.啓動自動錄製腳本。
2.在Target切換到異步，如下圖所示：
3.開始錄製：一個完整的搜索流程代碼生成如下：
參開代碼：
import asyncio from playwright.async_api import Playwright, async_playwright, expect async def run(playwright: Playwright) -> None: browser = await playwright.chromium.launch(headless=False) context = await browser.new_context() page = await context.new_page() await page.goto("https://www.baidu.com/") await page.locator("#kw").click() await page.locator("#kw").fill("北京-宏哥") await page.get_by_role("button", name="百度一下").click() # --------------------- await context.close() await browser.close() async def main() -> None: async with async_playwright() as playwright: await run(playwright) asyncio.run(main())
6.3pytest框架生成腳本
如果你是寫自動化測試用例，還能自動生成 pytest 框架的代碼，太牛叉了。。。
1.啓動自動錄製腳本。
2.在Target切換到Pytest，如下圖所示：
3.開始錄製：一個完整的搜索流程代碼生成如下：
參開代碼：
from playwright.sync_api import Page, expect def test_example(page: Page) -> None: page.goto("https://www.baidu.com/") page.locator("#kw").click() page.locator("#kw").fill("北京-宏哥") page.get_by_role("button", name="百度一下").click()
7.擴展
7.1錄製相關命令操作
playwright還有很多錄製的命令操作，有興趣的可以自己試一下。相關命令參數如下：
1.codegen在瀏覽器中運行並執行操作
playwright codegen playwright.dev
2.Playwright 打開一個瀏覽器窗口，其視口設置爲特定的寬度和高度，並且沒有響應，因爲需要在相同條件下運行測試。
使用該--viewport選項生成具有不同視口大小的測試。
playwright codegen --viewport-size=800,600 playwright.dev
3.--device 使用設置視口大小和用戶代理等選項模擬移動設備時記錄腳本和測試。
模擬移動設備iPhone11，注意：device的值必須用雙引號，並且區分大小寫
playwright codegen --device="iPhone 11" playwright.dev
4.模擬配色
playwright codegen --color-scheme=dark playwright.dev
5.模擬地理位置、語言和時區
playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com
6.保留經過身份驗證的狀態
運行codegen以在會話結束時--save-storage保存cookie和localStorage 。這對於單獨記錄身份驗證步驟並在稍後的測試中重用它很有用。
執行身份驗證並關閉瀏覽器後，auth.json將包含存儲狀態。
playwright codegen --save-storage=auth.json
運行--load-storage以消耗先前加載的存儲。這樣，所有的cookie和localStorage都將被恢復，使大多數網絡應用程序進入身份驗證狀態。
playwright open --load-storage=auth.json my.web.app playwright codegen --load-storage=auth.json my.web.app # Perform actions in authenticated state.
7.2page.pause() 斷點調試
如果您想在某些非標準設置中使用 codegen（例如，使用browser_context.route()），可以調用page.pause()，這將打開一個帶有 codegen 控件的單獨窗口。這個相比大家在宏哥之前註釋的代碼裏看到過，主要是用來調試代碼的。
from playwright.sync_api import sync_playwright with sync_playwright() as p: # Make sure to run headed. browser = p.chromium.launch(headless=False) # Setup context however you like. context = browser.new_context() # Pass any options context.route('**/*', lambda route: route.continue_()) # Pause the page, and start recording manually. page = context.new_page() page.pause()
8.小結
今天這一篇主要講解和分享了錄製的啓動、關閉和完整錄製流程以及其他命令的錄製。 好了，時間不早了，關於playwright的錄製先介紹講解到這裏，感謝您耐心的閱讀！！！