playwright-python 处理Text input、Checkboxs 和 radio buttons（三）

Text input

输入框输入元素，直接用fill方法即可，支持 <input>,<textarea>, [contenteditable] 和<label>这些标签，如下代码：

page.fill('#name', 'Peter');

# 日期输入
page.fill('#date', '2020-02-02')

# 时间输入
page.fill('#time', '13-15')

# 本地日期时间输入
page.fill('#local', '2020-03-02T05:15')

# 通过label输入
page.fill('text=First Name', 'Peter')

Checkboxes 和 radio buttons

Checkbox 和 radio buttons直接可以用check和uncheck方法来进行勾选和去勾选，当然其实也可以直接用click方法来通过点击来进行勾选和去勾选，代码如下（添加时间等待是为了看到效果~）：

from playwright import sync_playwright
import time

with sync_playwright() as p:
    browser_type = p.chromium
    browser = browser_type.launch(headless=False, )  # args=["--start-maximized"]
    context = browser.newContext()
    page = context.newPage()
    page.goto('http://lucas234.gitee.io/static-demo/index.html')
    page.click("#currentaccount")
    # page.check("#currentaccount")
    time.sleep(3)
    page.click("#currentaccount")
    # page.uncheck("#currentaccount")
    time.sleep(3)
    context.close()
    page.close()

Select options

可以单选或者多选，但是只针对<select>元素标签有效果，对于自定义的dropdown（<datalist>、<div>、<ul>等）不能用selectOption函数

from playwright import sync_playwright
import time

with sync_playwright() as p:
    browser_type = p.chromium
    browser = browser_type.launch(headless=False, )  # args=["--start-maximized"]
    context = browser.newContext()
    page = context.newPage()
    page.goto('http://lucas234.gitee.io/static-demo/index.html')
    page.click("#dropdownlist")
    # 一、通过value值选择
    page.selectOption("#cars", "saab")
    # 二、通过标签选择
    # page.selectOption("#cars", {"label": "Saab"})
    # 三、还可以通过元素handle处理
    # page.querySelector("#cars").selectOption("saab")
    # 多选
    # page.selectOption('select#colors', ['red', 'green', 'blue'])
    time.sleep(3)
    context.close()
    page.close()

自动等待机制

默认元素的操作都有等待的机制，例如click操作将会：

• 等待元素出现在DOM树中
• 等待元素可见：有非空的边界框和非visibility:hidden
• 等待元素稳定：例如css动画结束
• 滑动到可视区域
• 等待它在动作点接收指针事件:例如，等待元素不再被其他元素遮挡
• 如果在上述任一检查中不符合，则会重新检查，直到超时

也可以显示的等待：

可以自定义超时时间，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)

参考

python官方文档已经出来了，文档