近期必讀文章：2021年，中國城市開啟大變局，我們這代人将何去何從
上篇：【學員作品】Playwright自動化測試工具之快速實戰
3.元素定位
官方文檔：
https://playwright.dev/python/docs/api/class-elementhandle/#element_handleis_visible
3.1 元素定位
元素定位是元素互動的前提條件，也是自動化測試最重要的步驟之一。元素” 存在 “頁面”中 ，要定位元素，就是調用“頁面”的方法:
lquerySelector(engine=body) # 選擇單個元素
lquerySelectorAll(engine=body) # 選擇多個元素
lwaitForSelector(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("https://example.com") # 前往頁面
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) 複制