3. 元素定位

官方文件：

https://playwright.dev/python/docs/api/class-elementhandle/#element_handleis_visible

3.1 元素定位

元素定位是元素互動的前提條件，也是自動化測試最重要的步驟之一。元素” 存在 “頁面”中 ，要定位元素，就是呼叫“頁面”的方法:

l querySelector(engine=body) # 選擇單個元素

l querySelectorAll(engine=body) # 選擇多個元素

l waitForSelector(engine=body) # 選擇單個元素，並且自動等待到元素可見、可操作

程式碼見下：

目前支援的定位引擎有：css、xpath、text：

Playwright支援提供簡寫語法，根據內容自動判斷選擇器：

1. 以 // 或 / 或者 .. 開頭的，判斷為xpath

pp = page.querySelector("xpath=//h2")

pp = page.querySelector("//h2")

2. 以引號 "" 或者 ' 開頭的，判斷為text

ppp = page.querySelector("text=文字輸入") \

ppp = page.querySelector("'文字輸入'")

注意：雙引號裡有一個單引號，不然無法識別

3. 其他的，都判斷為css

p = page.querySelector("css=h2")

p = page.querySelector("h2")

3.2 元素高階定位

# :has 表示包含某個元素的元素

page.click("article:has(div.prome)")

# :is 用來對自身做斷言

page.click("button:is(:text('sign in'), :text('log in'))")

# :text 表示包含某個文字的元素

page.click("button:text('Sign in')") # 包含

page.click("button:text-is('Sign is')") # 嚴格匹配

page.click("button:text-matches('\w+')") # 正則

# 還可以根據方位匹配

page.click("button:right-of(#search)") # 右邊

page.click("button:left-of(#search)") # 左邊

page.click("button:above(#search)") # 上邊

page.click("button:below(#search)") # 下邊

page.click("button:near(#search)") # 50px 之內的元素

# 透過 XPath 選擇

page.click("//button[@id='search'])")

鏈式選擇器

選擇器可以與>>組合使用，例如selector1 >> selector2 >> selectors3。當選擇器被連結時，下一個選擇器會相對於前一個選擇器的結果進行查詢。

例如：

page.querySelector("div[role=\"document\"] >> text=\"確定\"")

備註：

1. 定位建議直接用錄製的方式，把流程中的定位都錄下來，錄製命令為：

python -m playwright codegen --target python -o formgetcookie.py -b chromium f.wps.cn/form-list --load-storage formTest134

2. 因為錄製大部分都是text定位方式，建議有id的修改id定位

3.3 元素操作

3.3.1 頁面操作

page.goto(") # 前往頁面

page.go_back(**kwargs)  #前進

page.go_forward(**kwargs) # 後退

page.screenshot(path="screenshot.png") 截圖

print(page.title()) # 列印當前頁標題

print(page.url()) # 列印當前頁URL

3.3.2 等待元素

page.wait_for_selector("text=\"檢視資料彙總表\"")

可以自定義超時時間，state有四種狀態：“attached”, “detached”, “hidden”, “visible”：

attached：等待元素出現在DOM樹中

detached：等待元素消失在DOM樹中

hidden：等待元素從DOM中分離出來，或者有一個空的邊界框或visibility:hidden

visible：有非空的邊界框和非visibility:hidden

見下方程式碼示例：

# state="attached", "detached", "hidden", "visible"

page.waitForSelector('#browsers', state='visible', timeout=30000)

3.3.2 操作元素

元素點選

page.click(selector)

填充元素

page.fill(selector, value) # 在 input 中填充值

獲取某元素內的所有文字

print(page.evalOnSelector('.headerLogo', """e => e.textContent"""))

print(page.querySelector('.headerLogo').textContent())

3.4 frame處理

處理frame，查詢frame有三種方法：

1. frame的 name屬性

2. frame的 URL

3. 透過其他的任何的 selector

示例：wps的登入頁，登入視窗是在iframe下

程式碼：

login_frame

= page.query_selector("#smsWrap>iframe").content_frame()

login_frame.fill("input[id=\"phone\"]", "15675632561")

login_frame.click("div[id=\"rectBottom\"]")

3.5 選項框

Checkbox  和  radio buttons 直接可以用 check 和 uncheck 方法來進行勾選和去勾選，當然其實也可以直接用 click 方法來透過點選來進行勾選和去勾選

page.click("#currentaccount")

3.5 下拉框

Select options可以單選或者多選，但是隻針對元素標籤有效果

# 一、透過value值選擇

page.selectOption("#cars", "saab")

# 二、透過標籤選擇

# page.selectOption("#cars", {"label": "Saab"})

# 三、還可以透過元素handle處理

# page.querySelector("#cars").selectOption("saab")

# 多選

# page.selectOption('select#colors', ['red', 'green', 'blue'])

程式碼示例：

# 選擇分支
page.select_option("select[id=\"select\"]", "develop")

3.5 頁面切換

問題：我在A頁面點選target="_blank"的連結後，瀏覽器開啟了B頁面 ，我要怎麼定位到B頁面？

程式碼見下：

page.goto("...") # 主頁面

with page.expect_popup() as popup_info:

page.click("...") # 此處點選A頁面跳轉連結

page1 = popup_info.value

page1.goto("...") # B頁面的其他操作

3.6 常用斷言

# element_handle.is_checked()
element_handle.is_disabled()
element_handle.is_editable()
element_handle.is_enabled()
element_handle.is_hidden()
element_handle.is_visible()
page.is_checked(selector)
page.is_disabled(selector)
page.is_editable(selector)
page.is_enabled(selector)
page.is_hidden(selector)
page.is_visible(selector)