24. 表单操作

输入框操作

基本输入

input() 方法用于向输入框输入文本。如 §22 所述，这是最常用的表单操作。

from DrissionPage import Chromium

tab = Chromium().latest_tab
tab.get('https://www.baidu.com')

# 找到输入框并输入
tab.ele('#kw').input('DrissionPage')

清空后输入

# 方式一：先清空再输入
ele = tab.ele('#kw')
ele.clear()
ele.input('新内容')

# 方式二：使用 clear 参数一步完成
ele.input('新内容', clear=True)

输入并回车

# 输入内容后按回车提交
ele.input('DrissionPage\n')

# 或者使用 enter 参数
ele.input('DrissionPage', enter=True)

组合键输入

from DrissionPage.common import Keys

# 全选输入框内容
ele.input(Keys.CTRL_A)

# 组合键操作
ele.input((Keys.CTRL, 'a', Keys.DEL))  # ctrl+a 全选再删除

下拉框操作

原生 select 元素

原生 <select> 元素可以用 select() 方法选择。

# 通过可见文本选择
select = tab.ele('#country')
select.select('中国')

# 通过 value 属性选择
select.select(value='CN')

点击式下拉框

很多网站用 div 模拟下拉框，需要点击展开再选择。

# 点击展开下拉框
dropdown = tab.ele('.custom-select')
dropdown.click()

# 等待选项出现
tab.wait.ele_displayed('.dropdown-options')

# 点击目标选项
tab.ele('.dropdown-options > .option@text=中国').click()

使用 JS 操作

# 直接用 JS 设置值
tab.run_js('document.querySelector("#country").value = "CN"')

# 触发 change 事件
tab.run_js('''
    var select = document.querySelector("#country");
    select.value = "CN";
    select.dispatchEvent(new Event("change"));
''')

单选框和复选框

复选框操作

复选框用 click() 切换选中状态。用 states.is_checked 判断是否已选中。

checkbox = tab.ele('#agree')

# 勾选（如果未选中）
if not checkbox.states.is_checked:
    checkbox.click()

# 取消勾选（如果已选中）
if checkbox.states.is_checked:
    checkbox.click()

单选框操作

单选框同样用 click() 选中，一组单选框选中一个会自动取消其他。

# 选中某个单选选项
tab.ele('#gender-male').click()

# 检查是否选中
if tab.ele('#gender-male').states.is_checked:
    print('已选择男性')

通过 label 关联

有时单选/复选框隐藏了，可以点击关联的 label。

# 点击 label 来选中复选框
tab.ele('label[for="agree"]').click()

文件上传

方式一：click.to_upload()（推荐）

这是最自然的方式。不需要在 DOM 里找文件控件，点击触发上传的按钮即可。

# 点击上传按钮，自动填入文件路径
ele = tab.ele('#uploadButton')
ele.click.to_upload(r'C:\test.txt')

# 上传多个文件
ele.click.to_upload([r'C:\file1.txt', r'C:\file2.txt'])

# 多文件用 \n 分隔
ele.click.to_upload(r'C:\file1.txt\nC:\file2.txt')

方式二：手动设置路径

如果页面需要特殊的触发方式，可以手动控制上传流程。

# 设置要上传的文件路径
tab.set.upload_files('demo.txt')

# 点击触发文件选择框的按钮
tab.ele('#uploadBtn').click()

# 等待路径填入完成
tab.wait.upload_paths_inputted()

方式三：传统 input() 方式

直接找到 <input type="file"> 元素，用 input() 填入路径。

upload = tab.ele('tag:input@type=file')

# 上传单个文件
upload.input(r'D:\test1.txt')

# 上传多个文件（用列表）
upload.input([r'D:\test1.txt', r'D:\test2.txt'])

# 上传多个文件（用 \n 分隔）
upload.input(r'D:\test1.txt\nD:\test2.txt')

# 正确做法
iframe = tab.get_frame(1)
iframe.set.upload_files('demo.txt')
iframe.ele('@type=file').click()
iframe.wait.upload_paths_inputted()

表单提交

点击提交按钮

# 找到提交按钮并点击
tab.ele('button[type=submit]').click()

# 或者用 input 类型的提交按钮
tab.ele('input[type=submit]').click()

回车提交

在最后一个输入框按回车，触发表单提交。

tab.ele('#password').input('密码\n')

JS 提交

# 直接调用表单的 submit 方法
tab.ele('form#login-form').run_js('this.submit()')

# 或者在页面级别执行
tab.run_js('document.querySelector("form#login-form").submit()')

完整示例：登录表单

from DrissionPage import Chromium

tab = Chromium().latest_tab
tab.get('https://example.com/login')

# 填写用户名
tab.ele('#username').input('myuser', clear=True)

# 填写密码
tab.ele('#password').input('mypassword', clear=True)

# 勾选"记住我"
remember = tab.ele('#remember')
if not remember.states.is_checked:
    remember.click()

# 点击登录按钮
tab.ele('#login-btn').click()

# 等待跳转到首页
tab.wait.url_change('/dashboard')