1. 項(xiàng)目概述為什么我們需要Playwright如果你和我一樣曾經(jīng)被重復(fù)的網(wǎng)頁(yè)操作、繁瑣的測(cè)試流程或者復(fù)雜的數(shù)據(jù)抓取任務(wù)折磨得焦頭爛額那你一定對(duì)“自動(dòng)化”這個(gè)詞充滿(mǎn)渴望。幾年前Selenium幾乎是這個(gè)領(lǐng)域的代名詞但用過(guò)的人都知道它像一臺(tái)需要精心調(diào)校的老爺車(chē)——WebDriver版本要匹配、瀏覽器要對(duì)應(yīng)、等待時(shí)間要手動(dòng)設(shè)置一個(gè)不小心就拋錨。直到我遇到了Playwright那種感覺(jué)就像從手動(dòng)擋換到了自動(dòng)駕駛的特斯拉。Playwright是微軟開(kāi)源的一個(gè)現(xiàn)代化瀏覽器自動(dòng)化庫(kù)。它最吸引我的地方不是那些華麗的宣傳語(yǔ)而是它真正解決了自動(dòng)化測(cè)試和爬蟲(chóng)中的幾個(gè)核心痛點(diǎn)跨瀏覽器一致性、可靠的自動(dòng)等待機(jī)制以及對(duì)現(xiàn)代Web技術(shù)如單頁(yè)應(yīng)用、Shadow DOM的原生支持。它不僅僅是一個(gè)測(cè)試工具更像是一個(gè)全能的瀏覽器操控機(jī)器人。你可以用它來(lái)模擬用戶(hù)的所有操作——點(diǎn)擊、輸入、滾動(dòng)、拖拽甚至攔截和修改網(wǎng)絡(luò)請(qǐng)求。對(duì)于Python開(kāi)發(fā)者來(lái)說(shuō)這意味著你可以用熟悉的語(yǔ)法讓瀏覽器去做任何你想讓它做的事情無(wú)論是自動(dòng)化測(cè)試、數(shù)據(jù)抓取、網(wǎng)頁(yè)監(jiān)控還是RPA機(jī)器人流程自動(dòng)化。這個(gè)項(xiàng)目標(biāo)題“Playwright安裝與Python集成探索跨瀏覽器測(cè)試的奇妙世界”其核心就是帶你從零開(kāi)始搭建一個(gè)穩(wěn)定、高效的瀏覽器自動(dòng)化環(huán)境。我們將不局限于簡(jiǎn)單的“安裝-運(yùn)行”而是深入探討如何將Playwright無(wú)縫集成到你的Python工作流中并理解其背后“跨瀏覽器”能力的實(shí)現(xiàn)原理。無(wú)論你是測(cè)試工程師、數(shù)據(jù)分析師還是想解放雙手的開(kāi)發(fā)者這篇文章都將為你打開(kāi)一扇新的大門(mén)。2. 環(huán)境準(zhǔn)備與核心安裝全解析在開(kāi)始編寫(xiě)任何一行自動(dòng)化代碼之前一個(gè)干凈、穩(wěn)定的環(huán)境是成功的基石。很多新手在這里踩坑不是因?yàn)镻laywright復(fù)雜而是因?yàn)榛A(chǔ)環(huán)境沒(méi)配置好。我將帶你走一遍我實(shí)踐過(guò)無(wú)數(shù)次的、最穩(wěn)妥的路徑。2.1 Python環(huán)境不僅僅是安裝首先確保你有一個(gè)可用的Python環(huán)境。我強(qiáng)烈建議使用Python 3.8或更高版本因?yàn)镻laywright充分利用了這些版本中的新異步特性。不要使用系統(tǒng)自帶的Python以免權(quán)限和包管理沖突。我的首選方案是使用Miniconda或虛擬環(huán)境venv# 使用conda創(chuàng)建獨(dú)立環(huán)境推薦便于管理不同項(xiàng)目的依賴(lài) conda create -n playwright-env python3.10 conda activate playwright-env # 或者使用Python自帶的venv python -m venv playwright-venv # Windows激活 playwright-venv\Scripts\activate # Linux/Mac激活 source playwright-venv/bin/activate創(chuàng)建虛擬環(huán)境的好處是隔離性。你在這個(gè)環(huán)境里安裝的任何包都不會(huì)影響系統(tǒng)或其他項(xiàng)目避免了版本地獄。激活環(huán)境后你的命令行提示符前通常會(huì)顯示環(huán)境名稱(chēng)如(playwright-env)。接下來(lái)是包管理工具pip的升級(jí)。雖然不是必須但一個(gè)最新版的pip能減少很多依賴(lài)解析錯(cuò)誤。python -m pip install --upgrade pip2.2 Playwright庫(kù)安裝一行命令背后的故事安裝Playwright Python庫(kù)本身非常簡(jiǎn)單pip install playwright這條命令會(huì)從PyPI下載并安裝playwright這個(gè)Python包。但請(qǐng)注意這僅僅安裝了控制瀏覽器的“驅(qū)動(dòng)程序”或“客戶(hù)端庫(kù)”。它本身不包含瀏覽器內(nèi)核。這就是為什么很多人安裝后直接運(yùn)行代碼會(huì)報(bào)錯(cuò)提示找不到瀏覽器。安裝完成后我習(xí)慣立刻驗(yàn)證一下安裝是否成功以及查看版本python -c “import playwright; print(playwright.__version__)”這能快速確認(rèn)庫(kù)是否可被正確導(dǎo)入。2.3 瀏覽器驅(qū)動(dòng)安裝核心步驟與避坑指南這是最關(guān)鍵也最容易出問(wèn)題的一步。Playwright需要對(duì)應(yīng)的瀏覽器二進(jìn)制文件來(lái)實(shí)際執(zhí)行操作。你需要運(yùn)行playwright install這條命令會(huì)做以下幾件事下載瀏覽器默認(rèn)會(huì)下載ChromiumChrome/Edge的開(kāi)源核心、Firefox和WebKitSafari的開(kāi)源核心的特定版本。這些版本是經(jīng)過(guò)Playwright團(tuán)隊(duì)嚴(yán)格測(cè)試保證API穩(wěn)定的。安裝依賴(lài)在Linux系統(tǒng)上它可能會(huì)自動(dòng)安裝一些系統(tǒng)庫(kù)依賴(lài)比如libwoff2等字體庫(kù)。配置路徑將瀏覽器可執(zhí)行文件放置在Playwright的私有緩存目錄中通常在用戶(hù)主目錄下的.cache/ms-playwright并建立索引。你必須知道的注意事項(xiàng)和高級(jí)用法注意playwright install默認(rèn)會(huì)下載所有三個(gè)瀏覽器Chromium, Firefox, WebKit。如果你的網(wǎng)絡(luò)環(huán)境不佳或者磁盤(pán)空間緊張這可能會(huì)耗時(shí)較長(zhǎng)總計(jì)約1GB。你可以選擇只安裝需要的瀏覽器playwright install chromium # 只安裝Chromium playwright install firefox # 只安裝Firefox playwright install webkit # 只安裝WebKit安裝過(guò)程常見(jiàn)問(wèn)題與解決方案下載速度慢或失敗Playwright默認(rèn)從微軟的Azure存儲(chǔ)下載國(guó)內(nèi)網(wǎng)絡(luò)可能不穩(wěn)定。解決方案是使用鏡像源或手動(dòng)下載。方案A使用環(huán)境變量指定下載鏡像如果鏡像源可用# 在運(yùn)行安裝命令前設(shè)置示例鏡像地址需自行尋找可用的 set PLAYWRIGHT_DOWNLOAD_HOSThttps://npmmirror.com/mirrors/playwright playwright install方案B手動(dòng)下載并放置最可靠首先讓Playwright嘗試安裝它會(huì)在錯(cuò)誤信息或日志中打印出它試圖下載的文件的確切URL。復(fù)制這個(gè)URL。使用下載工具如wget, curl或?yàn)g覽器下載該文件。找到Playwright的瀏覽器緩存目錄~/.cache/ms-playwright或%USERPROFILE%\AppData\Local\ms-playwright。根據(jù)瀏覽器和版本將下載的文件放入對(duì)應(yīng)的子目錄中。通常需要重命名文件以匹配Playwright期望的名稱(chēng)如chrome-win.zip。再次運(yùn)行playwright install它會(huì)檢查文件已存在并跳過(guò)下載。權(quán)限錯(cuò)誤Linux/Mac確保你對(duì)緩存目錄有讀寫(xiě)權(quán)限。有時(shí)需要手動(dòng)創(chuàng)建目錄或使用sudo不推薦最好修復(fù)用戶(hù)權(quán)限。安裝后驗(yàn)證安裝完成后運(yùn)行一個(gè)快速檢查命令確保一切就緒playwright --version這會(huì)輸出Playwright命令行工具的版本。更重要的驗(yàn)證是運(yùn)行一個(gè)簡(jiǎn)單的測(cè)試腳本我們馬上就會(huì)進(jìn)行。2.4 集成開(kāi)發(fā)環(huán)境IDE配置建議工欲善其事必先利其器。一個(gè)好的IDE能極大提升開(kāi)發(fā)效率。VS Code我的主力選擇。安裝官方Python擴(kuò)展和Playwright Test for VSCode擴(kuò)展。后者提供了強(qiáng)大的測(cè)試運(yùn)行、調(diào)試和代碼生成功能。在設(shè)置中將Python解釋器路徑指向你剛創(chuàng)建的虛擬環(huán)境。PyCharm專(zhuān)業(yè)Python IDE。在File - Settings - Project - Python Interpreter中添加你的虛擬環(huán)境路徑。它同樣對(duì)Playwright有良好的代碼補(bǔ)全支持。配置好IDE后創(chuàng)建一個(gè)新的Python文件我們就可以正式開(kāi)始探索了。3. 第一個(gè)腳本從“Hello World”到理解核心API讓我們摒棄復(fù)雜的理論直接動(dòng)手寫(xiě)代碼。第一個(gè)腳本的目標(biāo)不是完成多么復(fù)雜的任務(wù)而是讓你感受Playwright的工作流程并理解幾個(gè)最核心的對(duì)象。3.1 同步與異步兩種編程模式的選擇Playwright的Python API提供了兩種風(fēng)格同步sync_api和異步async_api。對(duì)于初學(xué)者和大多數(shù)自動(dòng)化腳本我強(qiáng)烈建議從同步API開(kāi)始因?yàn)樗暇€(xiàn)性的思維習(xí)慣寫(xiě)起來(lái)像普通的腳本。異步API性能更高適合構(gòu)建復(fù)雜的、高并發(fā)的應(yīng)用但學(xué)習(xí)曲線(xiàn)更陡峭。同步模式示例from playwright.sync_api import sync_playwright def main(): # 1. 啟動(dòng)Playwright上下文管理器 with sync_playwright() as p: # 2. 啟動(dòng)瀏覽器實(shí)例這里選擇ChromiumheadlessFalse表示顯示瀏覽器界面 browser p.chromium.launch(headlessFalse) # 3. 創(chuàng)建一個(gè)新的瀏覽器上下文類(lèi)似于一個(gè)獨(dú)立的隱身會(huì)話(huà) context browser.new_context() # 4. 在上下文中打開(kāi)一個(gè)新頁(yè)面 page context.new_page() # 5. 導(dǎo)航到目標(biāo)網(wǎng)址 page.goto(“https://www.example.com”) # 6. 獲取頁(yè)面標(biāo)題并打印 print(f“頁(yè)面標(biāo)題是{page.title()}”) # 7. 等待5秒方便我們觀察 page.wait_for_timeout(5000) # 8. 按順序關(guān)閉資源頁(yè)面 - 上下文 - 瀏覽器 page.close() context.close() browser.close() if __name__ “__main__”: main()逐行解析與核心概念sync_playwright()這是同步模式的入口點(diǎn)。使用with語(yǔ)句可以確保在代碼塊執(zhí)行完畢后Playwright的資源會(huì)被正確清理即使中間發(fā)生異常。這是一個(gè)好習(xí)慣。p.chromium.launch(headlessFalse)啟動(dòng)一個(gè)Chromium瀏覽器進(jìn)程。p.chromium你也可以用p.firefox或p.webkit來(lái)啟動(dòng)其他瀏覽器。這就是“跨瀏覽器”能力的源頭——同一套API切換一個(gè)單詞就能換瀏覽器。headlessFalse無(wú)頭模式意味著瀏覽器在后臺(tái)運(yùn)行沒(méi)有圖形界面。默認(rèn)是True無(wú)頭模式對(duì)于調(diào)試階段設(shè)為False可以看到瀏覽器在做什么非常直觀。browser.new_context()創(chuàng)建一個(gè)新的瀏覽器上下文。這是一個(gè)關(guān)鍵概念。你可以把它想象成一個(gè)獨(dú)立的瀏覽器會(huì)話(huà)它擁有獨(dú)立的cookie、本地存儲(chǔ)、緩存和證書(shū)。如果你需要模擬多個(gè)用戶(hù)登錄創(chuàng)建多個(gè)context是最佳實(shí)踐它們彼此隔離。context.new_page()在上下文中打開(kāi)一個(gè)新的標(biāo)簽頁(yè)頁(yè)面對(duì)象。一個(gè)上下文可以有多個(gè)頁(yè)面。page.goto()導(dǎo)航到指定的URL。它會(huì)自動(dòng)等待頁(yè)面觸發(fā)load事件。page.title()獲取當(dāng)前頁(yè)面的標(biāo)題。這是一個(gè)簡(jiǎn)單的頁(yè)面屬性訪(fǎng)問(wèn)。page.wait_for_timeout(5000)強(qiáng)制等待5秒5000毫秒。請(qǐng)注意這是“硬等待”是最后的手段。Playwright的強(qiáng)大之處在于它的“自動(dòng)等待”我們應(yīng)盡量避免使用它。這里只是為了演示時(shí)讓你能看到頁(yè)面。關(guān)閉順序雖然with sync_playwright()會(huì)最終清理但顯式地按頁(yè)面-上下文-瀏覽器的順序關(guān)閉是一個(gè)好習(xí)慣尤其是在循環(huán)或創(chuàng)建大量實(shí)例時(shí)。運(yùn)行這個(gè)腳本你應(yīng)該能看到一個(gè)Chromium瀏覽器窗口打開(kāi)訪(fǎng)問(wèn)example.com停留5秒后關(guān)閉。恭喜你你的第一個(gè)Playwright自動(dòng)化程序成功了3.2 異步模式初探為了完整性這里也給出異步模式的等效代碼。如果你熟悉asyncio可以在需要時(shí)使用。import asyncio from playwright.async_api import async_playwright async def main(): async with async_playwright() as p: browser await p.chromium.launch(headlessFalse) context await browser.new_context() page await context.new_page() await page.goto(“https://www.example.com”) print(f“頁(yè)面標(biāo)題是{await page.title()}”) await page.wait_for_timeout(5000) await page.close() await context.close() await browser.close() asyncio.run(main())可以看到主要區(qū)別在于async/await關(guān)鍵字。在本文后續(xù)部分如無(wú)特別說(shuō)明我們都使用同步API。4. 元素定位與網(wǎng)頁(yè)交互的基石自動(dòng)化腳本的核心是找到頁(yè)面上的元素按鈕、輸入框、鏈接等并與之交互。Playwright提供了多種強(qiáng)大且穩(wěn)定的定位器Locator策略。我的經(jīng)驗(yàn)是定位器的選擇直接決定了腳本的健壯性。一個(gè)脆弱的定位器會(huì)讓你的腳本在頁(yè)面稍有改動(dòng)時(shí)就崩潰。4.1 定位器策略詳解與最佳實(shí)踐Playwright的定位器是惰性的它定義了一個(gè)查找元素的方法但只有在執(zhí)行操作如click、fill時(shí)才會(huì)真正去查找。更重要的是它內(nèi)置了自動(dòng)等待和重試機(jī)制會(huì)等待元素變得可操作可見(jiàn)、啟用、穩(wěn)定。1. 最推薦按角色和文本定位 (get_by_role,get_by_text)這是最接近用戶(hù)視角的方式可讀性最好通常也最穩(wěn)定。# 點(diǎn)擊一個(gè)名為“登錄”的按鈕 page.get_by_role(“button”, name“登錄”).click() # 在一個(gè)名為“用戶(hù)名”的文本框中輸入 page.get_by_role(“textbox”, name“用戶(hù)名”).fill(“myuser”) # 點(diǎn)擊包含“下一步”文本的元素 page.get_by_text(“下一步”).click() # 使用正則表達(dá)式匹配部分文本 import re page.get_by_text(re.compile(r“訂單號(hào)\d”)).click()優(yōu)勢(shì)不依賴(lài)易變的CSS類(lèi)名或ID直接對(duì)應(yīng)UI文本和語(yǔ)義角色。即使前端重構(gòu)樣式只要按鈕文本和角色不變腳本就依然有效。get_by_role需要元素有正確的ARIA角色role屬性。現(xiàn)代前端框架如React, Vue通常會(huì)正確生成。你可以通過(guò)瀏覽器開(kāi)發(fā)者工具的“元素”面板查看元素的role。2. 最精準(zhǔn)按測(cè)試ID定位 (get_by_test_id)這是與前端開(kāi)發(fā)協(xié)作的最佳模式。約定在元素上添加一個(gè)專(zhuān)用的測(cè)試屬性如>!-- 前端代碼 -- button># Python自動(dòng)化代碼 page.get_by_test_id(“submit-login”).click()優(yōu)勢(shì)絕對(duì)穩(wěn)定專(zhuān)為測(cè)試設(shè)計(jì)完全不受樣式或布局變更影響。強(qiáng)烈建議在團(tuán)隊(duì)項(xiàng)目中推行此規(guī)范。3. 傳統(tǒng)但必要CSS選擇器與XPath (locator)當(dāng)以上方法不適用時(shí)我們才退而求其次使用CSS或XPath。# CSS選擇器通過(guò)ID、類(lèi)、屬性等 page.locator(“#search-input”).fill(“query”) # ID page.locator(“.submit-btn”).click() # 類(lèi)名 page.locator(“input[type‘email’]”).fill(“testexample.com”) # 屬性 # XPath功能強(qiáng)大但通常更脆弱 page.locator(“//button[contains(class, ‘primary’)]”).click() page.locator(“//div[id‘container’]//a[text()‘詳情’]”).click()CSS選擇器建議優(yōu)先使用ID其次使用具有明確語(yǔ)義的類(lèi)名如.cart-button而非.btn-primary.mt-4。XPath警告盡量避免使用絕對(duì)路徑如/html/body/div[3]/button和依賴(lài)元素順序的索引如//div[5]這些在頁(yè)面結(jié)構(gòu)變化時(shí)極易失效。使用相對(duì)路徑和屬性匹配。4. 其他實(shí)用定位器# 通過(guò)關(guān)聯(lián)的label標(biāo)簽文本定位輸入框 page.get_by_label(“密碼”).fill(“secret”) # 通過(guò)占位符文本定位 page.get_by_placeholder(“請(qǐng)輸入手機(jī)號(hào)”).fill(“13800138000”)4.2 定位器的組合與過(guò)濾Playwright定位器可以鏈?zhǔn)秸{(diào)用和組合以應(yīng)對(duì)復(fù)雜場(chǎng)景。# 組合先找到列表再找其中的特定項(xiàng) product_list page.locator(“.product-list”) first_product product_list.locator(“.item”).first first_product.click() # 過(guò)濾在找到的一組元素中篩選出符合條件的 # 點(diǎn)擊第一個(gè)狀態(tài)為“有效”的按鈕 page.locator(“button”).filter(has_text“有效”).first.click() # 找到包含特定文本的列表項(xiàng) active_item page.locator(“tr”).filter(has_text“進(jìn)行中”) # 父子/兄弟關(guān)系定位 parent_div page.locator(“div.parent”) child_span parent_div.locator(“span.child”) # 子元素 second_sibling page.locator(“ul li”).nth(1) # 第二個(gè)子元素索引從0開(kāi)始4.3 調(diào)試定位器使用Playwright Inspector寫(xiě)定位器最頭疼的就是不知道寫(xiě)對(duì)了沒(méi)有。Playwright內(nèi)置了一個(gè)強(qiáng)大的圖形化調(diào)試工具——Inspector。有兩種方式啟動(dòng)環(huán)境變量方式推薦在運(yùn)行腳本前設(shè)置PWDEBUG1。# Linux/Mac PWDEBUG1 python your_script.py # Windows (Command Prompt) set PWDEBUG1 python your_script.py # Windows (PowerShell) $env:PWDEBUG1; python your_script.py設(shè)置后運(yùn)行腳本會(huì)以“有頭”模式打開(kāi)瀏覽器并自動(dòng)彈出Playwright Inspector窗口。你可以逐步執(zhí)行使用“Step”按鈕一步步運(yùn)行代碼。拾取元素點(diǎn)擊“Pick locator”按鈕然后在頁(yè)面上點(diǎn)擊元素Inspector會(huì)自動(dòng)生成推薦的定位器代碼。查看日志查看所有Playwright命令的執(zhí)行詳情和結(jié)果。代碼方式在launch方法中傳入devtoolsTrue。browser p.chromium.launch(headlessFalse, devtoolsTrue)這會(huì)打開(kāi)瀏覽器的開(kāi)發(fā)者工具但不如Inspector功能專(zhuān)一。實(shí)操心得在開(kāi)發(fā)初期我?guī)缀蹩偸情_(kāi)著PWDEBUG1。用“拾取元素”功能生成定位器初稿然后根據(jù)其建議通常是get_by_role或get_by_test_id去優(yōu)化我的代碼。這比手動(dòng)在開(kāi)發(fā)者工具里猜選擇器快十倍。5. 核心交互操作模擬真實(shí)用戶(hù)行為定位到元素后下一步就是與之交互。Playwright的API設(shè)計(jì)得非常直觀模擬了真實(shí)用戶(hù)的幾乎所有操作。5.1 基礎(chǔ)操作點(diǎn)擊、輸入、選擇# 1. 點(diǎn)擊 - 最常用的操作 page.get_by_role(“button”, name“提交”).click() # 支持多種點(diǎn)擊選項(xiàng) page.locator(“#btn”).click(button“right”) # 右鍵點(diǎn)擊 page.locator(“#btn”).click(forceTrue) # 即使元素被遮擋也強(qiáng)制點(diǎn)擊 # 2. 輸入文本 page.locator(“#username”).fill(“admin”) # fill() 會(huì)先清空輸入框再輸入 page.locator(“#comment”).type(“Hello, World!“, delay100) # type() 模擬逐個(gè)字符輸入delay是毫秒間隔 # 3. 處理下拉框Select # 假設(shè)有一個(gè) select id“city”.../select page.locator(“#city”).select_option(“beijing”) # 通過(guò)value選擇 page.locator(“#city”).select_option(label“北京市”) # 通過(guò)顯示的文本選擇 # 4. 勾選復(fù)選框和單選框 page.locator(“#agree-terms”).check() # 勾選 page.locator(“#newsletter”).uncheck() # 取消勾選 page.locator(“input[name‘gender’][value‘female’]”).check() # 單選 # 5. 上傳文件 page.locator(“input[type‘file’]”).set_input_files(“/path/to/your/file.jpg”) # 上傳多個(gè)文件 page.locator(“input[type‘file’]”).set_input_files([“file1.jpg”, “file2.png”])5.2 高級(jí)交互懸停、拖放、鍵盤(pán)# 1. 鼠標(biāo)懸停 - 常用于觸發(fā)下拉菜單 page.locator(“#menu”).hover() # 2. 拖放元素 page.locator(“#source”).drag_to(page.locator(“#target”)) # 或者分步操作 page.locator(“#source”).hover() page.mouse.down() page.locator(“#target”).hover() page.mouse.up() # 3. 鍵盤(pán)操作 page.locator(“#input”).press(“Tab”) # 按下Tab鍵 page.locator(“#input”).press(“ShiftEnter”) # 組合鍵 # 更復(fù)雜的鍵盤(pán)輸入 page.keyboard.type(“Hello”) # 模擬鍵盤(pán)輸入 page.keyboard.press(“Backspace”) page.keyboard.down(“Control”) # 按住Control鍵 page.keyboard.press(“A”) # 按下A (CtrlA) page.keyboard.up(“Control”) # 松開(kāi)Control鍵5.3 等待的藝術(shù)告別硬編碼的sleep這是Playwright相對(duì)于Selenium最大的優(yōu)勢(shì)之一。你幾乎不需要使用time.sleep()。1. 自動(dòng)等待隱式等待Playwright在執(zhí)行操作如click,fill,check前會(huì)自動(dòng)等待元素滿(mǎn)足一系列條件元素被附加到DOM元素可見(jiàn)非隱藏非0尺寸元素啟用非disabled元素穩(wěn)定停止動(dòng)畫(huà) 默認(rèn)超時(shí)時(shí)間是30秒可以通過(guò)browser_context.set_default_timeout()修改。2. 顯式等待推薦對(duì)于非元素操作或者需要等待特定狀態(tài)時(shí)使用顯式等待。# 等待頁(yè)面導(dǎo)航完成例如點(diǎn)擊鏈接后 page.click(“a#next-page”) page.wait_for_url(“**/dashboard”) # 等待URL包含dashboard # 等待元素出現(xiàn)/可見(jiàn)/隱藏 page.wait_for_selector(“.success-message”, state“visible”) # 等待成功提示出現(xiàn) page.wait_for_selector(“.loading-spinner”, state“hidden”) # 等待加載動(dòng)畫(huà)消失 # 等待特定事件 page.wait_for_event(“l(fā)oad”) # 等待頁(yè)面load事件 page.wait_for_function(“window.innerWidth 1000”) # 等待JS條件成立 # 等待網(wǎng)絡(luò)請(qǐng)求 with page.expect_response(“**/api/data.json”) as response_info: page.click(“#load-data”) response response_info.value print(response.json()) # 獲取響應(yīng)數(shù)據(jù)3. 自定義等待條件from playwright.sync_api import expect # 使用expect斷言可讀性更好 expect(page.locator(“.status”)).to_have_text(“完成”) expect(page).to_have_url(“https://example.com/home”) expect(page.locator(“#list li”)).to_have_count(10) # 等待列表有10項(xiàng)我的避坑經(jīng)驗(yàn)永遠(yuǎn)優(yōu)先使用Playwright的內(nèi)置等待自動(dòng)等待和wait_for_*方法。只有在你明確知道需要固定延遲例如等待一個(gè)非網(wǎng)絡(luò)、非DOM的第三方動(dòng)畫(huà)時(shí)才使用page.wait_for_timeout()并且要加上清晰的注釋說(shuō)明原因。6. 處理復(fù)雜頁(yè)面結(jié)構(gòu)iframe、Shadow DOM與新窗口現(xiàn)代網(wǎng)頁(yè)充滿(mǎn)了動(dòng)態(tài)內(nèi)容和復(fù)雜組件自動(dòng)化腳本必須能應(yīng)對(duì)這些挑戰(zhàn)。6.1 征服iframeiframe內(nèi)聯(lián)框架是一個(gè)獨(dú)立的HTML文檔嵌入。你不能直接用主頁(yè)面的定位器去操作iframe內(nèi)的元素。# 方法1通過(guò)屬性定位iframe然后切換到其上下文 iframe_element page.frame_locator(“iframe[name‘payment’]”) # 通過(guò)name # 或者 page.frame_locator(“#my-iframe”) # 通過(guò)ID # 在iframe上下文中定位元素并操作 iframe_element.locator(“button#pay-now”).click() # 方法2獲取Frame對(duì)象適用于需要調(diào)用frame方法的情況 frame page.frame(name“payment”) # 通過(guò)name獲取Frame對(duì)象 if frame: frame.click(“button#pay-now”) else: # 通過(guò)URL匹配獲取 for f in page.frames: if “payment” in f.url: f.click(“button#pay-now”) break6.2 穿透Shadow DOMShadow DOM允許將封裝的“影子”DOM樹(shù)附加到元素實(shí)現(xiàn)樣式和標(biāo)記的封裝。Playwright使用語(yǔ)法來(lái)穿透Shadow DOM邊界。# 假設(shè)有一個(gè)自定義組件 my-component內(nèi)部有Shadow DOM和一個(gè)input # 錯(cuò)誤的做法page.locator(“my-component input”) 找不到 # 正確的做法使用 穿透 page.locator(“my-component input”).fill(“value inside shadow”) # 可以連續(xù)穿透多層 page.locator(“div#host shadow-rootopen span input”).click()技巧在瀏覽器開(kāi)發(fā)者工具中需要先在Settings - Preferences里開(kāi)啟Show user agent shadow DOM才能查看和復(fù)制Shadow DOM內(nèi)的元素選擇器。6.3 管理多頁(yè)面和彈出窗口點(diǎn)擊一個(gè)鏈接或按鈕可能會(huì)打開(kāi)新標(biāo)簽頁(yè)或彈出窗口。# 在點(diǎn)擊可能打開(kāi)新窗口的鏈接前監(jiān)聽(tīng)‘popup’事件 with page.expect_popup() as popup_info: page.click(“a[target‘_blank’]”) # 或者觸發(fā)window.open的按鈕 new_page popup_info.value # 獲取新頁(yè)面的Page對(duì)象 print(f“新頁(yè)面標(biāo)題{new_page.title()}”) # 在新頁(yè)面上操作 new_page.fill(“#search”, “something”) # 操作完成后可以關(guān)閉它 new_page.close() # 切換回原頁(yè)面繼續(xù)操作 page.bring_to_front() # 將原頁(yè)面提到前臺(tái)7. 高級(jí)特性與實(shí)戰(zhàn)技巧掌握了基礎(chǔ)我們來(lái)探索一些能讓你的自動(dòng)化腳本更強(qiáng)大、更智能的高級(jí)功能。7.1 網(wǎng)絡(luò)請(qǐng)求攔截與模擬這是Playwright的王牌功能之一可以極大提升腳本效率和靈活性。# 1. 攔截并修改請(qǐng)求例如修改請(qǐng)求頭 def handle_request(route, request): # 修改請(qǐng)求頭模擬移動(dòng)設(shè)備 headers request.headers headers[‘User-Agent’] ‘Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) ...’ # 繼續(xù)發(fā)出修改后的請(qǐng)求 route.continue_(headersheaders) page.route(“**/*”, handle_request) # 攔截所有請(qǐng)求 # 2. 攔截并直接返回模擬響應(yīng)Mock API def mock_response(route, request): if “/api/user” in request.url: route.fulfill( status200, content_type“application/json”, bodyjson.dumps({“name”: “Mock User”, “id”: 123}) ) else: route.continue_() page.route(“**/api/**”, mock_response) # 3. 阻塞某些請(qǐng)求如圖片、樣式表以加速測(cè)試 def block_assets(route, request): if request.resource_type in [“image”, “stylesheet”, “font”]: route.abort() else: route.continue_() page.route(“**/*”, block_assets)7.2 執(zhí)行JavaScript代碼有時(shí)需要通過(guò)執(zhí)行JS來(lái)獲取數(shù)據(jù)或操作頁(yè)面。# 1. 在頁(yè)面上下文中執(zhí)行JS并返回值 dimensions page.evaluate(“””() { return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight, deviceScaleFactor: window.devicePixelRatio }; }“””) print(dimensions) # 2. 在元素上下文中執(zhí)行JS href page.locator(“a#link”).evaluate(“element element.href”) print(href) # 3. 注入JS腳本文件 page.add_script_tag(path“./inject.js”) # 從文件注入 page.add_script_tag(content“window.myVar ‘injected’;”) # 注入代碼片段7.3 設(shè)備模擬與地理位置測(cè)試響應(yīng)式設(shè)計(jì)或需要特定地理位置的場(chǎng)景。from playwright.sync_api import sync_playwright def run(): with sync_playwright() as p: # 模擬iPhone 12 iphone_12 p.devices[“iPhone 12”] browser p.chromium.launch(headlessFalse) # 創(chuàng)建上下文時(shí)傳入設(shè)備參數(shù) context browser.new_context( **iphone_12, locale“zh-CN”, # 設(shè)置語(yǔ)言 timezone_id“Asia/Shanghai”, # 設(shè)置時(shí)區(qū) geolocation{“l(fā)ongitude”: 116.397, “l(fā)atitude”: 39.916}, # 設(shè)置北京地理位置 permissions[“geolocation”] # 允許地理位置權(quán)限 ) page context.new_page() page.goto(“https://maps.example.com”) # 頁(yè)面現(xiàn)在會(huì)認(rèn)為自己在iPhone 12上位于北京 page.screenshot(path“iphone-browser.png”) context.close() browser.close()7.4 文件下載與上傳處理# 1. 處理文件下載需要監(jiān)聽(tīng)‘download’事件 with page.expect_download() as download_info: page.click(“a#download-report”) # 點(diǎn)擊觸發(fā)下載的鏈接 download download_info.value # 等待下載完成并保存到指定路徑 save_path f“./downloads/{download.suggested_filename}” download.save_as(save_path) print(f“文件已下載到{save_path}”) # 2. 文件上傳前面基礎(chǔ)操作已介紹這里是監(jiān)聽(tīng)上傳事件 def handle_file_chooser(file_chooser): file_chooser.set_files(“./my-file.pdf”) # 在點(diǎn)擊上傳按鈕前監(jiān)聽(tīng)文件選擇器事件 page.on(“filechooser”, handle_file_chooser) page.click(“input[type‘file’]”) # 這會(huì)觸發(fā)文件選擇器進(jìn)而觸發(fā)上面的處理函數(shù)8. 項(xiàng)目實(shí)戰(zhàn)構(gòu)建一個(gè)健壯的自動(dòng)化測(cè)試腳本讓我們將以上所有知識(shí)融合編寫(xiě)一個(gè)模擬用戶(hù)登錄、搜索并斷言結(jié)果的完整腳本。這個(gè)腳本將體現(xiàn)等待策略、錯(cuò)誤處理和日志記錄等工程化實(shí)踐。import logging from playwright.sync_api import sync_playwright, TimeoutError as PlaywrightTimeoutError import sys # 配置日志方便調(diào)試和記錄 logging.basicConfig( levellogging.INFO, format‘%(asctime)s - %(levelname)s - %(message)s’, handlers[ logging.FileHandler(“automation.log”), logging.StreamHandler(sys.stdout) ] ) logger logging.getLogger(__name__) def test_baidu_search(): “”“一個(gè)完整的百度搜索自動(dòng)化測(cè)試示例”“” with sync_playwright() as p: # 啟動(dòng)瀏覽器設(shè)置視窗大小記錄日志 browser p.chromium.launch(headlessFalse, slow_mo1000) # slow_mo讓操作變慢方便觀察 context browser.new_context(viewport{‘width’: 1920, ‘height’: 1080}) page context.new_page() try: logger.info(“測(cè)試開(kāi)始訪(fǎng)問(wèn)百度首頁(yè)”) # 導(dǎo)航到百度等待網(wǎng)絡(luò)空閑狀態(tài) page.goto(“https://www.baidu.com”, wait_until“networkidle”) # 斷言頁(yè)面標(biāo)題應(yīng)包含“百度” assert “百度” in page.title(), f“頁(yè)面標(biāo)題異常{page.title()}” logger.info(“成功訪(fǎng)問(wèn)百度首頁(yè)”) # 定位搜索框并輸入關(guān)鍵詞 - 使用更穩(wěn)定的定位器 search_box page.get_by_role(“textbox”, name“百度一下”) # 顯式等待元素可見(jiàn)并可交互 search_box.wait_for(state“visible”) search_box.fill(“Playwright自動(dòng)化測(cè)試”) logger.info(“已在搜索框輸入關(guān)鍵詞”) # 定位搜索按鈕并點(diǎn)擊 search_button page.get_by_role(“button”, name“百度一下”) search_button.click() logger.info(“已點(diǎn)擊搜索按鈕”) # 等待搜索結(jié)果頁(yè)面加載完成URL應(yīng)變化 page.wait_for_url(“**/s?**”, timeout10000) logger.info(“已跳轉(zhuǎn)到搜索結(jié)果頁(yè)”) # 等待第一個(gè)搜索結(jié)果出現(xiàn) first_result page.locator(“#content_left h3 a”).first first_result.wait_for(state“visible”, timeout10000) # 獲取第一個(gè)結(jié)果的文本和鏈接 result_text first_result.text_content() result_href first_result.get_attribute(“href”) logger.info(f“第一個(gè)搜索結(jié)果{result_text[:50]}... - {result_href}”) # 斷言搜索結(jié)果應(yīng)包含相關(guān)關(guān)鍵詞 assert “playwright” in result_text.lower() or “自動(dòng)化” in result_text.lower(), \ f“搜索結(jié)果不相關(guān){result_text}” logger.info(“搜索結(jié)果相關(guān)性斷言通過(guò)”) # 可選截圖保存證據(jù) page.screenshot(path“baidu_search_result.png”, full_pageTrue) logger.info(“已截圖保存搜索結(jié)果頁(yè)”) logger.info(“ 測(cè)試用例執(zhí)行成功”) return True except PlaywrightTimeoutError as e: logger.error(f“操作超時(shí){e}”) # 超時(shí)時(shí)截圖便于排查 page.screenshot(path“error_timeout.png”, full_pageTrue) return False except AssertionError as e: logger.error(f“斷言失敗{e}”) page.screenshot(path“error_assertion.png”, full_pageTrue) return False except Exception as e: logger.error(f“發(fā)生未知錯(cuò)誤{e}”, exc_infoTrue) page.screenshot(path“error_unknown.png”, full_pageTrue) return False finally: # 無(wú)論成功失敗都關(guān)閉瀏覽器 logger.info(“清理資源關(guān)閉瀏覽器”) context.close() browser.close() if __name__ “__main__”: success test_baidu_search() sys.exit(0 if success else 1)這個(gè)腳本體現(xiàn)的工程化要點(diǎn)結(jié)構(gòu)化與函數(shù)化將邏輯封裝在函數(shù)內(nèi)清晰可復(fù)用。全面的日志記錄使用logging模塊記錄關(guān)鍵步驟和錯(cuò)誤便于事后分析。健壯的錯(cuò)誤處理使用try...except捕獲超時(shí)、斷言失敗和其他異常并在失敗時(shí)截圖保存現(xiàn)場(chǎng)。明確的等待策略結(jié)合wait_until、wait_for和自動(dòng)等待避免使用time.sleep。資源清理在finally塊中確保瀏覽器被關(guān)閉避免資源泄漏。使用穩(wěn)定的定位器優(yōu)先使用get_by_role和get_by_text。可配置的參數(shù)headless、slow_mo、timeout等都可以提取為配置變量。9. 集成到Python項(xiàng)目與持續(xù)集成單個(gè)腳本很好但真正的力量在于將其集成到你的開(kāi)發(fā)流程中。9.1 使用Pytest進(jìn)行測(cè)試組織Playwright官方推薦使用pytest作為測(cè)試運(yùn)行器并提供了強(qiáng)大的插件pytest-playwright。安裝pip install pytest pytest-playwright編寫(xiě)一個(gè)Pytest測(cè)試用例創(chuàng)建一個(gè)文件test_baidu.py。import re import pytest from playwright.sync_api import Page, expect pytest.fixture(scope“function”) def page(browser): “”“為每個(gè)測(cè)試函數(shù)提供一個(gè)干凈的頁(yè)面。”“” context browser.new_context() page context.new_page() yield page context.close() def test_baidu_search_title(page: Page): “”“測(cè)試百度首頁(yè)標(biāo)題。”“” page.goto(“https://www.baidu.com”) expect(page).to_have_title(re.compile(r“百度一下”)) def test_baidu_search_functionality(page: Page): “”“測(cè)試百度搜索功能。”“” page.goto(“https://www.baidu.com”) page.get_by_role(“textbox”, name“百度一下”).fill(“Playwright”) page.get_by_role(“button”, name“百度一下”).click() # 等待搜索結(jié)果出現(xiàn) expect(page.locator(“#content_left”)).to_be_visible() # 斷言搜索結(jié)果包含關(guān)鍵詞 expect(page.locator(“#content_left”)).to_contain_text(“Playwright”) def test_baidu_logo_present(page: Page): “”“測(cè)試百度Logo存在。”“” page.goto(“https://www.baidu.com”) logo page.locator(“#lg”) expect(logo).to_be_visible()運(yùn)行測(cè)試# 運(yùn)行所有測(cè)試 pytest # 運(yùn)行特定文件 pytest test_baidu.py # 運(yùn)行并顯示詳細(xì)日志 pytest -v # 運(yùn)行失敗時(shí)自動(dòng)打開(kāi)Playwright Inspector調(diào)試 pytest --headed --slowmo1000Pytest會(huì)自動(dòng)管理瀏覽器的啟動(dòng)和關(guān)閉通過(guò)browserfixture并生成漂亮的測(cè)試報(bào)告。9.2 配置管理與參數(shù)化將瀏覽器類(lèi)型、基礎(chǔ)URL、超時(shí)時(shí)間等配置化。 創(chuàng)建conftest.py文件import pytest from playwright.sync_api import Playwright def pytest_addoption(parser): parser.addoption( “--browser”, action“store”, default“chromium”, help“browser to run tests: chromium, firefox, webkit” ) parser.addoption( “--headless”, action“store”, default“True”, help“run in headless mode: True or False” ) parser.addoption( “--base-url”, action“store”, default“https://www.baidu.com”, help“base url for tests” ) pytest.fixture(scope“session”) def browser_type_launch_args(pytestconfig): return {“headless”: pytestconfig.getoption(“headless”) “True”} pytest.fixture(scope“session”) def browser_type(pytestconfig, playwright: Playwright): browser_name pytestconfig.getoption(“browser”) if browser_name “chromium”: return playwright.chromium elif browser_name “firefox”: return playwright.firefox elif browser_name “webkit”: return playwright.webkit else: raise ValueError(f“Unsupported browser: {browser_name}”) pytest.fixture(scope“session”) def browser(browser_type, browser_type_launch_args): browser browser_type.launch(**browser_type_launch_args) yield browser browser.close() pytest.fixture def base_url(pytestconfig): return pytestconfig.getoption(“base-url”)然后在測(cè)試中就可以使用base_urlfixture了。這樣你可以通過(guò)命令行參數(shù)輕松切換測(cè)試環(huán)境pytest --browserfirefox --headlessFalse --base-urlhttps://www.google.com9.3 集成到CI/CD以GitHub Actions為例在項(xiàng)目根目錄創(chuàng)建.github/workflows/playwright.ymlname: Playwright Tests on: [push, pull_request] jobs: test: timeout-minutes: 60 runs-on: ubuntu-latest steps: - uses: actions/checkoutv3 - uses: actions/setup-pythonv4 with: python-version: ‘3.10’ - name: Install dependencies run: | python -m pip install --upgrade pip pip install -r requirements.txt pip install pytest pytest-playwright - name: Install Playwright Browsers run: playwright install --with-deps chromium firefox webkit - name: Run tests (Chromium) run: pytest --browserchromium --headlessTrue - name: Run tests (Firefox) run: pytest --browserfirefox --headlessTrue - name: Run tests (WebKit) run: pytest --browserwebkit --headlessTrue - name: Upload test artifacts (if failed) if: failure() uses: actions/upload-artifactv3 with: name: playwright-screenshots path: | **/*.png **/*.log這個(gè)工作流會(huì)在每次代碼推送或拉取請(qǐng)求時(shí)在Ubuntu系統(tǒng)上安裝依賴(lài)和瀏覽器然后依次在Chromium、Firefox和WebKit上運(yùn)行測(cè)試實(shí)現(xiàn)真正的跨瀏覽器測(cè)試。如果測(cè)試失敗會(huì)自動(dòng)上傳截圖和日志供你分析。10. 性能優(yōu)化與最佳實(shí)踐總結(jié)最后分享一些讓Playwright腳本運(yùn)行得更快、更穩(wěn)定的經(jīng)驗(yàn)。1. 復(fù)用瀏覽器上下文避免重復(fù)登錄每次啟動(dòng)瀏覽器和建立上下文都很耗時(shí)。對(duì)于需要登錄的測(cè)試登錄一次然后復(fù)用這個(gè)上下文。# 在conftest.py或setup中創(chuàng)建一個(gè)已登錄的上下文 pytest.fixture(scope“session”) def logged_in_context(browser): context browser.new_context() page context.new_page() page.goto(“https://example.com/login”) # ... 執(zhí)行登錄操作 # 保存登錄狀態(tài)Cookies, Storage context.storage_state(path“./auth_state.json”) yield context context.close() # 在測(cè)試中直接使用已登錄的上下文 def test_with_logged_in_user(logged_in_context): page logged_in_context.new_page() # 新頁(yè)面也繼承了登錄狀態(tài)2. 并行執(zhí)行測(cè)試Pytest支持并行運(yùn)行測(cè)試可以大幅縮短測(cè)試套件的總執(zhí)行時(shí)間。pip install pytest-xdist pytest -n auto # 自動(dòng)根據(jù)CPU核心數(shù)分配worker3. 使用無(wú)頭模式Headless和禁用不必要的功能在CI/CD或生產(chǎn)環(huán)境運(yùn)行時(shí)務(wù)必使用無(wú)頭模式并禁用圖片、視頻等加載以提升速度。browser p.chromium.launch( headlessTrue, args[ ‘--disable-gpu’, ‘--disable-dev-shm-usage’, # 克服Docker內(nèi)存限制 ‘--no-sandbox’, ] ) context browser.new_context( viewport{‘width’: 1920, ‘height’: 1080}, ignore_https_errorsTrue, # 忽略HTTPS證書(shū)錯(cuò)誤測(cè)試環(huán)境 java_script_enabledTrue, # 攔截非必要資源 bypass_cspTrue, )4. 合理設(shè)置超時(shí)和等待策略全局超時(shí)設(shè)置要合理避免因個(gè)別元素加載慢導(dǎo)致整個(gè)測(cè)試套件超時(shí)。# 在context或page級(jí)別設(shè)置合理的默認(rèn)超時(shí) context.set_default_timeout(30000) # 30秒 context.set_default_navigation_timeout(60000) # 導(dǎo)航60秒 # 對(duì)于已知的慢操作可以單獨(dú)設(shè)置更長(zhǎng)的超時(shí) page.locator(“.slow-element”).click(timeout60000)5. 定期更新Playwright和瀏覽器Playwright團(tuán)隊(duì)會(huì)定期發(fā)布更新修復(fù)bug并提升性能。定期更新能獲得更好的穩(wěn)定性和新功能。pip install --upgrade playwright playwright install --force # 強(qiáng)制更新瀏覽器到最新兼容版本6. 編寫(xiě)可維護(hù)的定位器使用Page Object模式將頁(yè)面元素和操作封裝成類(lèi)提高代碼復(fù)用性和可讀性。定位器集中管理將所有的定位器字符串CSS選擇器、文本等放在一個(gè)常量文件或配置文件中一旦頁(yè)面變化只需修改一處。優(yōu)先使用語(yǔ)義化定位器get_by_role、get_by_text、get_by_test_id遠(yuǎn)比脆弱的CSS路徑穩(wěn)定。從安裝配置到高級(jí)實(shí)戰(zhàn)我們完整地探索了Playwright與Python集成的世界。它不僅僅是一個(gè)測(cè)試工具更是一個(gè)強(qiáng)大的瀏覽器自動(dòng)化平臺(tái)。我個(gè)人的體會(huì)是一旦你習(xí)慣了它的“自動(dòng)等待”和清晰的API就很難再回去用其他工具了。開(kāi)始可能會(huì)在元素定位上花些時(shí)間但利用好Inspector和遵循最佳實(shí)踐這個(gè)成本會(huì)越來(lái)越低。最重要的是動(dòng)手去寫(xiě)從一個(gè)簡(jiǎn)單的腳本開(kāi)始逐步增加復(fù)雜度你會(huì)發(fā)現(xiàn)自己自動(dòng)化一切網(wǎng)頁(yè)操作的能力在飛速增長(zhǎng)。如果在實(shí)踐中遇到任何問(wèn)題Playwright官方文檔非常詳盡社區(qū)也很活躍絕大多數(shù)坑都能找到解決方案。