3. 元素定位
官方文檔：
https://playwright.dev/python/docs/api/class-elementhandle/#element_handleis_visible
3.1 元素定位
元素定位是元素交互的前提條件，也是自動(dòng)化測(cè)試最重要的步驟之一。元素” 存在 “頁(yè)面”中 ，要定位元素，就是調(diào)用“頁(yè)面”的方法:
l querySelector(engine=body) # 選擇單個(gè)元素
l querySelectorAll(engine=body) # 選擇多個(gè)元素
l waitForSelector(engine=body) # 選擇單個(gè)元素，并且自動(dòng)等待到元素可見(jiàn)、可操作
代碼見(jiàn)下：
目前支持的定位引擎有：css、xpath、text：
Playwright支持提供簡(jiǎn)寫(xiě)語(yǔ)法，根據(jù)內(nèi)容自動(dòng)判斷選擇器：
1. 以 // 或 / 或者 .. 開(kāi)頭的，判斷為xpath
pp = page.querySelector("xpath=//h2")
pp = page.querySelector("http://h2")
2. 以引號(hào) "" 或者 ' 開(kāi)頭的，判斷為text
ppp = page.querySelector("text=文本輸入") \
ppp = page.querySelector("'文本輸入'")
注意：雙引號(hào)里有一個(gè)單引號(hào)，不然無(wú)法識(shí)別
3. 其他的，都判斷為css
p = page.querySelector("css=h2")
p = page.querySelector("h2")
3.2 元素高級(jí)定位
# :has 表示包含某個(gè)元素的元素
page.click("article:has(div.prome)")
# :is 用來(lái)對(duì)自身做斷言
page.click("button:is(:text('sign in'), :text('log in'))")
# :text 表示包含某個(gè)文本的元素
page.click("button:text('Sign in')") # 包含
page.click("button:text-is('Sign is')") # 嚴(yán)格匹配
page.click("button:text-matches('\w+')") # 正則
# 還可以根據(jù)方位匹配
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 之內(nèi)的元素
# 通過(guò) XPath 選擇
page.click("http://button[@id='search'])")
鏈?zhǔn)竭x擇器
選擇器可以與>>組合使用，例如selector1 >> selector2 >> selectors3。當(dāng)選擇器被鏈接時(shí)，下一個(gè)選擇器會(huì)相對(duì)于前一個(gè)選擇器的結(jié)果進(jìn)行查詢(xún)。
例如：
page.querySelector("div[role=\"document\"] >> text=\"確定\"")
備注：
1. 定位建議直接用錄制的方式，把流程中的定位都錄下來(lái)，錄制命令為：
python -m playwright codegen --target python -o formgetcookie.py -b chromium f.wps.cn/form-list --load-storage formTest134
2. 因?yàn)殇浿拼蟛糠侄际莟ext定位方式，建議有id的修改id定位
3.3 元素操作
3.3.1 頁(yè)面操作
page.goto("https://example.com") # 前往頁(yè)面
page.go_back(**kwargs)?#前進(jìn)
page.go_forward(**kwargs) # 后退
page.screenshot(path="screenshot.png") 截圖
print(page.title()) # 打印當(dāng)前頁(yè)標(biāo)題
print(page.url()) # 打印當(dāng)前頁(yè)URL
3.3.2 等待元素
page.wait_for_selector("text=\"查看數(shù)據(jù)匯總表\"")
可以自定義超時(shí)時(shí)間，state有四種狀態(tài)：“attached”, “detached”, “hidden”, “visible”：
attached：等待元素出現(xiàn)在DOM樹(shù)中
detached：等待元素消失在DOM樹(shù)中
hidden：等待元素從DOM中分離出來(lái)，或者有一個(gè)空的邊界框或visibility:hidden
visible：有非空的邊界框和非visibility:hidden
見(jiàn)下方代碼示例：
# state="attached", "detached", "hidden", "visible"
page.waitForSelector('#browsers', state='visible', timeout=30000)
3.3.2 操作元素
元素點(diǎn)擊
page.click(selector)
填充元素
page.fill(selector, value) # 在 input 中填充值
獲取某元素內(nèi)的所有文本
print(page.evalOnSelector('.headerLogo', """e => e.textContent"""))
print(page.querySelector('.headerLogo').textContent())
3.4 frame處理
處理frame，查找frame有三種方法：
1. frame的name屬性
2. frame的URL
3. 通過(guò)其他的任何的selector
示例：wps的登錄頁(yè)，登錄窗口是在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 選項(xiàng)框
Checkbox?和?radio buttons直接可以用check和uncheck方法來(lái)進(jìn)行勾選和去勾選，當(dāng)然其實(shí)也可以直接用click方法來(lái)通過(guò)點(diǎn)擊來(lái)進(jìn)行勾選和去勾選
page.click("#currentaccount")
3.5 下拉框
Select options可以單選或者多選，但是只針對(duì)元素標(biāo)簽有效果
# 一、通過(guò)value值選擇
page.selectOption("#cars", "saab")
# 二、通過(guò)標(biāo)簽選擇
# page.selectOption("#cars", {"label": "Saab"})
# 三、還可以通過(guò)元素handle處理
# page.querySelector("#cars").selectOption("saab")
# 多選
# page.selectOption('select#colors', ['red', 'green', 'blue'])
代碼示例：
# 選擇分支
page.select_option("select[id=\"select\"]", "develop")
3.5 頁(yè)面切換
問(wèn)題：我在A頁(yè)面點(diǎn)擊target="_blank"的鏈接后，瀏覽器打開(kāi)了B頁(yè)面 ，我要怎么定位到B頁(yè)面？
代碼見(jiàn)下：
page.goto("...") # 主頁(yè)面
with page.expect_popup() as popup_info:
page.click("...") # 此處點(diǎn)擊A頁(yè)面跳轉(zhuǎn)鏈接
page1 = popup_info.value
page1.goto("...") # B頁(yè)面的其他操作
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)
