宏哥微信粉絲群：https://bbs.csdn.net/topics/618423372?有興趣的可以掃碼加入
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, expectdef 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 asynciofrom playwright.async_api import Playwright, async_playwright, expectasync 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, expectdef 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.dev2.Playwright 打開一個瀏覽器窗口，其視口設置為特定的寬度和高度，并且沒有響應，因為需要在相同條件下運行測試。
使用該--viewport選項生成具有不同視口大小的測試。
playwright codegen --viewport-size=800,600 playwright.dev3.--device?使用設置視口大小和用戶代理等選項模擬移動設備時記錄腳本和測試。
模擬移動設備iPhone11，注意：device的值必須用雙引號，并且區分大小寫
playwright codegen --device="iPhone 11" playwright.dev 4.模擬配色
playwright codegen --color-scheme=dark playwright.dev5.模擬地理位置、語言和時區
playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com6.保留經過身份驗證的狀態
運行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_playwrightwith 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 optionscontext.route('**/*', lambda route: route.continue_())# Pause the page, and start recording manually.page = context.new_page()page.pause()8.小結
今天這一篇主要講解和分享了錄制的啟動、關閉和完整錄制流程以及其他命令的錄制。?好了，時間不早了，關于playwright的錄制先介紹講解到這里，感謝您耐心的閱讀！！！
???每天學習一點，今后必成大神-
往期推薦（由于跳轉參數丟失了，所有建議選中要訪問的右鍵，在新標簽頁中打開鏈接即可訪問）或者微信搜索: 北京宏哥? 公眾號提前解鎖更多干貨。
Appium自動化系列，耗時80天打造的從搭建環境到實際應用精品教程測試
Python接口自動化測試教程，熬夜87天整理出這一份上萬字的超全學習指南
Python+Selenium自動化系列，通宵700天從無到有搭建一個自動化測試框架
Java+Selenium自動化系列，仿照Python趁熱打鐵嘔心瀝血317天搭建價值好幾K的自動化測試框架
Jmeter工具從基礎->進階->高級，費時2年多整理出這一份全網超詳細的入門到精通教程
Fiddler工具從基礎->進階->高級，費時100多天吐血整理出這一份全網超詳細的入門到精通教程
Pycharm工具基礎使用教程
)
