簡介

Playwright是微軟開源的一個UI自動化測驗工具，添加了默認等待時間增加腳本穩定性，并提供視頻錄制、網路請求支持、自定義的定位器、自帶除錯器等新特性，

安裝

pip install playwright  # 安裝playwright的python版本
playwright install  # 安裝playwright自帶的瀏覽器和ffmepg，此步驟耗時較長

開始錄制

在命令列執行以下代碼

playwright codegen

自動打開瀏覽器和錄制界面

以百度為例，輸入百度網址打開百度頁面，搜索框中輸入“playwright”，點擊“百度一下”按鈕，錄制代碼如下

from playwright.sync_api import sync_playwright

def run(playwright):
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()

    # Open new page
    page = context.new_page()

    # Go to https://www.baidu.com/
    page.goto("https://www.baidu.com/")

    # Click input[name="wd"]
    page.click("input[name=\"wd\"]")

    # Fill input[name="wd"]
    page.fill("input[name=\"wd\"]", "playwright")

    # Click text=百度一下
    page.click("text=百度一下")
    # assert page.url == "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=playwright&fenlei=256&oq=playwright&rsv_pq=bf1abd6c000029f7&rsv_t=1937PYyfHvfyS6fay57V1zS1iCIiYC4%2B8I6srjLqYYkXrf8H9kce%2BLQKVzA&rqlang=cn&rsv_dl=tb&rsv_enter=0&rsv_btype=t&prefixsug=playwright&rsp=5"

    # Click text=百度一下
    # with page.expect_navigation(url="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=playwright&fenlei=256&oq=playwright&rsv_pq=a03207ba00008498&rsv_t=ecf2ko5wPyHrjSHwUBLAZZwxkyObcfsg5ge7apN1BeAdigW%2BzzxD%2F3CJI7k&rqlang=cn&rsv_dl=tb&rsv_enter=0&rsv_btype=t&prefixsug=playwright&rsp=5"):
    with page.expect_navigation():
        page.click("text=百度一下")

    # Click text=百度一下
    page.click("text=百度一下")
    # assert page.url == "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=playwright&fenlei=256&oq=playwright&rsv_pq=bf1abd6c000029f7&rsv_t=1937PYyfHvfyS6fay57V1zS1iCIiYC4%2B8I6srjLqYYkXrf8H9kce%2BLQKVzA&rqlang=cn&rsv_dl=tb&rsv_enter=0&rsv_btype=t&prefixsug=playwright&rsp=5"

    # ---------------------
    context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

洗掉不必要的代碼，簡化后如下

from playwright.sync_api import sync_playwright  # 匯入playwright同步api

def run(playwright):  # 定義run方法
    browser = playwright.chromium.launch(headless=False)  # 創建chromium的browser物件，當前使用的是playwright安裝的自帶的chromium
    context = browser.new_context()  # 創建context物件，context之間是相互隔離的，可以理解為輕量級的瀏覽器實體

    page = context.new_page()  # 創建page物件，真正打開瀏覽器界面

    page.goto("https://www.baidu.com/")  # 跳轉到百度url

    page.fill("input[name=\"wd\"]", "playwright")  # 通過css定位在搜索框中輸入"playwright"

    with page.expect_navigation():  # 預期結果，點擊"百度一下"按鈕后會發生頁面導航
        page.click("text=百度一下")  # 通過playwright自定義的文字定位器定位"百度一下"按鈕并點擊

    # ---------------------
    context.close()  # 關閉context
    browser.close()  # 關閉browser

with sync_playwright() as playwright:  # playwright使用入口，通過背景關系方式
    run(playwright)  # 呼叫run方法，將playwright實體傳入

通過以上代碼可以了解到：

1. playwright支持同步和異步兩種使用方法
2. 不需要為每個瀏覽器下載webdriver
3. 相比selenium多了一層context抽象
4. 支持無頭瀏覽器，且較為推薦（headless默認值為True）
5. 可以使用傳統定位方式（CSS，XPATH等），也有自定義的新的定位方式（如文字定位）
6. 沒有使用selenium的先定位元素，再進行操作的方式，而是在操作方法中傳入了元素定位，定位和操作同時進行（其實也playwright也提供了單獨的定位方法，作為可選）
7. 很多方法使用了with的背景關系語法

基本概念

browser

瀏覽器：支持多種瀏覽器：Chromium（chrome、edge）、Firefox、WebKit（Safari），一般每一種瀏覽器只需要創建一個browser實體，示例:

browser = playwright.chromium.launch()
browser = playwright.firefox.launch()

context

背景關系：一個瀏覽器實體下可以有多個context，將瀏覽器分割成不同的背景關系，以實作會話的分離，如需要不同用戶登錄同一個網頁，不需要創建多個瀏覽器實體，只需要創建多個context即可，示例：

context1 = browser.new_context()
context2 = browser.new_context()

page

頁面：一個context下可以有多個page，一個page就代表一個瀏覽器的標簽頁或彈出視窗，用于進行頁面操作，示例：

page = context.new_page()

# 顯式導航，類似于在瀏覽器中輸入URL
page.goto('http://example.com')
# 在輸入框中輸入字符
page.fill('#search', 'query')

# 點擊提交按鈕
page.click('#submit')
# 列印當前url
print(page.url)

frame

一個頁面至少包含一個主frame，新的frame通過iframe標簽定義，frame之間可以進行嵌套，只有先定位到frame才能對frame里面的元素進行定位和操作，playwright默認使用page進行的元素操作會重定向到主frame上，示例：

# 通過名稱獲得frame
frame = page.frame('frame-login')

# 通過frame的url獲得frame
frame = page.frame(url=r'.*domain.*')

# 通過選擇器獲得frame
frame_element_handle = page.query_selector('.frame-class')
frame = frame_element_handle.content_frame()

# 操作frame中的元素
frame.fill('#username-input', 'John')

選擇器

所有元素操作都需要使用選擇器定位到要操作的元素，playwright同時支持css、xpath和自定義的選擇器，使用時無需指定型別，playwright會自動進行判斷，示例：

# Using data-test-id= selector engine
page.click('data-test-id=foo')

# CSS and XPath selector engines are automatically detected
page.click('div')
page.click('//html/body/div')

# Find node by text substring
page.click('text=Hello w')

# Explicit CSS and XPath notation
page.click('css=div')
page.click('xpath=//html/body/div')

# Click an element with text 'Sign Up' inside of a #free-month-promo.
page.click('#free-month-promo >> text=Sign Up')

# Capture textContent of a section that contains an element with text 'Selectors'.
section_text = page.eval_on_selector('*css=section >> text=Selectors', 'e => e.textContent')

自動等待

像page.click(selector)、page.fill(selector, value)之類的元素操作會自動等待元素可見且可操作，

# Playwright 會等待 #search 元素出現在 DOM 中
page.fill('#search', 'query')

# Playwright 會等待元素停止影片并接受點擊
page.click('#search')

# 等待 #search 出現在 DOM 中
page.wait_for_selector('#search', state='attached')
# 等待 #promo 可見, 例如具有 `visibility:visible` 
page.wait_for_selector('#promo')

# 等待 #details 變得不可見, 例如通過 `display:none`.
page.wait_for_selector('#details', state='hidden')
# 等待 #promo 從 DOM 中移除
page.wait_for_selector('#promo', state='detached')