前言

誰(shuí)說(shuō)瀏覽器不能自動(dòng)化？

大家好，我是花姐！

前幾天加班到半夜，困得不行，但手上還有個(gè)網(wǎng)頁(yè)表單要填，填完才能下班。于是我突然靈光一閃：

"Python 不是萬(wàn)能的嗎？干嘛不用它自動(dòng)填表？" 

于是，我打開 VsCode，摸索了一會(huì)兒 Playwright，五分鐘后，代碼敲好，表單一鍵填寫完畢，我合上電腦，拎包走人。

這感覺(jué)，簡(jiǎn)直爽爆了！

所以今天就來(lái)聊聊 Playwright —— 這個(gè)比 Selenium 還要快的自動(dòng)化測(cè)試庫(kù)，讓你的瀏覽器變成聽話的小貓咪！

Playwright 是啥？比 Selenium 強(qiáng)在哪？

Playwright 是微軟開源的一款瀏覽器自動(dòng)化測(cè)試工具，支持 Chrome、Firefox、WebKit（Safari）、Edge，還能在 無(wú)頭模式（Headless）運(yùn)行。

它比 Selenium 更快的原因：

• 原生支持多瀏覽器（Selenium 需要 WebDriver）
• 默認(rèn)無(wú)頭模式（Selenium 需要手動(dòng)設(shè)置）
• 自動(dòng)等待元素加載（Selenium 需要 time.sleep()）
• 支持 API 測(cè)試、手機(jī)模擬、下載/上傳文件等高級(jí)功能

總之，Playwright 適用于 自動(dòng)化爬取網(wǎng)頁(yè)、填表、截圖、數(shù)據(jù)抓取、自動(dòng)化測(cè)試 等等。

安裝 Playwright（3 秒搞定?。?/h2>

pip install playwright
playwright install

第一個(gè)命令裝 Playwright，第二個(gè)命令下載瀏覽器內(nèi)核（不然它沒(méi)法控制瀏覽器）。

執(zhí)行完畢，你的 Python 已經(jīng)具備讓瀏覽器乖乖聽話的能力了！

Hello Playwright！讓瀏覽器跑起來(lái)

來(lái)看一個(gè)最簡(jiǎn)單的示例，我們用 Playwright 打開百度，然后截圖。

from playwright.sync_api import sync_playwright

def run():
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page()
        page.goto("https://www.baidu.com")
        page.screenshot(path="baidu.png")
        browser.close()

run()

代碼解析：

• sync_playwright()：?jiǎn)?dòng) Playwright，支持 with 語(yǔ)法，確保程序結(jié)束后資源釋放。
• p.chromium.launch()：?jiǎn)?dòng) Chrome（你也可以用 p.firefox.launch()）。
• page.goto("https://www.baidu.com")：訪問(wèn)百度。
• page.screenshot(path="baidu.png")：截圖。
• browser.close()：關(guān)閉瀏覽器。

執(zhí)行完代碼，你的項(xiàng)目目錄下就會(huì)多出一張 baidu.png，打開看看，百度首頁(yè)是不是靜靜地躺在那里？

自動(dòng)化填表（比你手速快 100 倍！）

很多網(wǎng)站的登錄頁(yè)、搜索框、表單都能用 Playwright 輕松搞定，比如打開百度然后輸入Python搜索相關(guān)內(nèi)容：

from playwright.sync_api import sync_playwright
import time

def run():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()
        page.goto("https://www.baidu.com")
        
        page.fill(".s_ipt", "Python")  # 輸入Python
        page.click("input[type='submit']")  # 點(diǎn)擊登錄按鈕
        page.screenshot(path="baidu_search.png")
        time.sleep(10) # 方便大家查看效果 這里等待10秒
        browser.close()
run()

代碼解析：

• page.fill(selector, value)：模擬輸入框輸入，s_ipt是百度網(wǎng)頁(yè)輸入框?qū)?yīng)的class名稱。
• page.click(selector)：點(diǎn)擊按鈕。
• headless=False：讓瀏覽器可見（默認(rèn)是無(wú)頭模式）。

執(zhí)行后，你會(huì)看到瀏覽器自動(dòng)打開百度，輸入Python，然后搜索，整個(gè)過(guò)程行云流水，堪比黑客電影里的場(chǎng)景！??

模擬用戶操作（滑動(dòng)、點(diǎn)擊、拖拽）

讓 Playwright 模擬用戶操作簡(jiǎn)直太簡(jiǎn)單了，比如 滾動(dòng)頁(yè)面、點(diǎn)擊按鈕、拖拽元素：

page.click("button.submit")  # 點(diǎn)擊按鈕
page.hover("#menu")  # 鼠標(biāo)懸停
page.mouse.wheel(0, 500)  # 模擬滾動(dòng)鼠標(biāo)（向下滾 500 像素）
page.drag_and_drop("#source", "#target")  # 拖拽元素

你可以用這個(gè)方法自動(dòng)化 點(diǎn)擊廣告、滾動(dòng)頁(yè)面、拖拽文件，甚至搶購(gòu)秒殺商品（手動(dòng)狗頭??）！

網(wǎng)頁(yè)元素如何定位

1. 打開谷歌瀏覽器

輸入目標(biāo)網(wǎng)站，比如https://www.baidu.com,然后按F12打開開發(fā)者工具

點(diǎn)擊紅框里的按鈕

把鼠標(biāo)放到想查看對(duì)應(yīng)控件的地方，就可以看到控件對(duì)應(yīng)的id、class、類型了。比如我想查看百度輸入框控件對(duì)應(yīng)的內(nèi)容

我們可以看到百度輸入框?qū)?yīng)的類型是input、id是kw，class是s_ipt

2. 撰寫規(guī)則代碼掌控指定控件 —— 基礎(chǔ)定位方法

Playwright 定位元素的核心思想

Playwright 的定位 器（Locators）是其自動(dòng)等待和重試能力的核心，通過(guò)智能等待元素加載、重試機(jī)制避免因網(wǎng)絡(luò)延遲或動(dòng)態(tài)渲染導(dǎo)致的定位失敗。推薦優(yōu)先使用語(yǔ)義化定位 器（如角色、文本），而非傳統(tǒng) CSS/XPath，以提高代碼可讀性和穩(wěn)定性。

2.1. CSS 選擇器

通過(guò) HTML 標(biāo)簽、類名、ID 等 CSS 語(yǔ)法定位：

# 定位 ID 為 "username" 的輸入框
page.locator("#username").fill("admin")

# 定位類名為 "submit-btn" 的按鈕
page.locator("button.submit-btn").click()

適用場(chǎng)景：元素有固定 ID/類名，或需層級(jí)嵌套選擇（如 div > input）。

2.2. XPath 表達(dá)式

通過(guò) XML 路徑語(yǔ)法定位復(fù)雜結(jié)構(gòu)：

# 定位 name 屬性為 "email" 的輸入框
page.locator("http://input[@name='email']").fill("test@example.com")

# 定位包含特定文本的按鈕
page.locator("http://button[contains(text(), '提交')]").click()

適用場(chǎng)景：元素屬性動(dòng)態(tài)變化、需復(fù)雜條件篩選時(shí)。

2.3. 按角色定位（Role）

基于 ARIA 角色和可訪問(wèn)性屬性，最接近用戶感知：

# 定位名稱為 "登錄" 的按鈕
page.get_by_role("button", name="登錄").click()

# 定位角色為輸入框且名稱為 "用戶名"
page.get_by_role("textbox", name="用戶名").fill("user123")

支持角色：button、link、checkbox、heading 等。

2.4. 按文本內(nèi)容定位

# 精確匹配文本
page.get_by_text("歡迎回來(lái)").click()

# 正則表達(dá)式模糊匹配
page.get_by_text(re.compile(r"訂單編號(hào)\d+")).hover()

適用場(chǎng)景：元素?zé)o固定屬性，但文本內(nèi)容穩(wěn)定。

2.5. 按標(biāo)簽關(guān)聯(lián)定位

# 通過(guò)關(guān)聯(lián)的 <label> 文本定位輸入框
page.get_by_label("密碼：").fill("secret")

# 通過(guò)占位符定位
page.get_by_placeholder("請(qǐng)輸入手機(jī)號(hào)").type("13800138000")

優(yōu)勢(shì)：與表單控件天然綁定，避免層級(jí)依賴。

2.6. 按測(cè)試 ID 定位

專為測(cè)試設(shè)計(jì)的屬性，需頁(yè)面添加 data-testid：

# 定位 data-testid="submit-button" 的元素
page.get_by_test_id("submit-button").click()

最佳實(shí)踐：與開發(fā)約定唯一測(cè)試 ID，提升定位穩(wěn)定性。

動(dòng)態(tài)元素處理技巧

1. 顯式等待元素加載

# 等待元素可見后再操作
page.locator(".loading").wait_for(state="visible")

# 等待元素消失
page.wait_for_selector(".spinner", state="hidden")

2. 處理 iframe 嵌套

# 定位到 iframe 內(nèi)的元素
iframe = page.frame(name="payment-iframe")
iframe.get_by_text("確認(rèn)支付").click()

3. Shadow DOM 穿透

通過(guò) >> 符號(hào)穿透 Shadow DOM 層級(jí)：

page.locator("div#shadow-host >> input.custom-input").fill("data")

復(fù)雜場(chǎng)景定位策略

1. 多重條件篩選

# 定位類名為 "item" 且包含文本 "特價(jià)" 的元素
page.locator(".item", has_text="特價(jià)").click()

# 組合角色和文本過(guò)濾
page.get_by_role("listitem").filter(has_text="待付款").nth(0).click()

2. 相對(duì)定位

# 父子關(guān)系定位
parent = page.locator("div.parent")
child = parent.locator("span.child")

# 兄弟元素定位
second_item = page.locator("ul > li").nth(1)

3. 動(dòng)態(tài)列表處理

# 遍歷商品列表并點(diǎn)擊第三個(gè)商品
items = page.locator(".product-list > li")
await items.nth(2).click()

# 根據(jù)文本動(dòng)態(tài)定位最新添加的條目
new_item = page.locator("tr:has-text('2024-03-18')").last

Playwright vs Selenium，選哪個(gè)？

如果你要做 自動(dòng)化測(cè)試、爬蟲、網(wǎng)頁(yè)填表，Playwright 絕對(duì)是 優(yōu)選！但如果你的項(xiàng)目已經(jīng)基于 Selenium，那也沒(méi)必要急著換。

結(jié)語(yǔ)：用 Playwright 解放雙手！

學(xué)會(huì) Playwright 之后，你會(huì)發(fā)現(xiàn)世界都不一樣了：

• 想自動(dòng)化登錄網(wǎng)站？沒(méi)問(wèn)題！
• 想批量爬取網(wǎng)頁(yè)數(shù)據(jù)？小意思！
• 想定時(shí)打開某個(gè)網(wǎng)站？安排！

反正，只要是你手工操作的網(wǎng)頁(yè)任務(wù)，基本都可以用 Playwright 自動(dòng)化完成。

以上就是Python自動(dòng)化神器Playwright的用法詳解的詳細(xì)內(nèi)容，更多關(guān)于Python Playwright庫(kù)用法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論