3. Element positioning
Official documents:
https://playwright.dev/python/docs/api/class-elementhandle/#element_handleis_visible
3.1 Element positioning
Element positioning is a prerequisite for element interaction and one of the most important steps in automated testing. "Element" exists in "Page". To locate an element, call the method of "Page":
l querySelector(engine=body) # select a single element
l querySelectorAll(engine=body) # select multiple elements
l waitForSelector(engine=body) # Select a single element, and automatically wait until the element is visible and operable
See the code below:
Currently supported positioning engines are: css, xpath, text:
Playwright supports the provision of abbreviated grammar and automatically determines the selector based on the content:
1. Those beginning with // or / or .. are judged to be xpath
pp = page.querySelector("xpath=//h2")
pp = page.querySelector("//h2")
2. Those beginning with quotation marks "" or 'are judged as text
ppp = page.querySelector("text=text input") \
ppp = page.querySelector("'text input'")
Note : There is a single quotation mark in the double quotation mark, otherwise it will not be recognized
3. Everything else is judged as css
p = page.querySelector("css=h2")
p = page.querySelector("h2")
3.2 Advanced positioning of elements
# :has means an element that contains an element
page.click("article:has(div.prome)")
# :is is used to assert itself
page.click("button:is(:text('sign in'), :text('log in'))")
# :text means an element that contains a certain text
page.click("button:text('Sign in')") # 包含
page.click("button:text-is('Sign is')") # Strict match
page.click("button:text-matches('\w+')") # 正则
# You can also match according to the location
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)") # Elements within 50px
# Select by XPath
page.click("//button[@id='search'])")
Chain selector
The selector can be used in combination with >>, such as selector1 >> selector2 >> selectors3. When the selector is linked, the next selector will be queried relative to the result of the previous selector.
E.g:
page.querySelector("div[role=\"document\"] >> text=\"确定\"")
Remarks:
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 页面切换
Question: After I clicked the target="_blank" link on page A, the browser opened page B. How do I locate page B?
See the code below:
page.goto("...") # Main page
with page.expect_popup() as popup_info:
page.click("...") # Click here to jump to page A
page1 = popup_info.value
page1.goto("...") # Other operations on page B
3.6 Commonly used assertions
# 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)