https://www.cnblogs.com/du-hong/p/17835463.html
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的錄製先介紹講解到這裡，感謝您耐心的閱讀！！！