22. 元素交互基础

本节目标：掌握元素的基本交互操作，包括点击、输入、清空和提交，学完能对页面元素执行常见的交互动作。

点击元素 click()

click() 是最常用的元素交互方法。

from DrissionPage import Chromium

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

# 找到按钮并点击
tab.ele('text:登录').click()

三种点击模式

click() 支持三种点击方式，通过 by_js 参数控制。

# 默认：优先模拟点击，被遮挡时改用 js 点击
ele.click()

# 强制模拟点击，即使被遮挡也点
ele.click(by_js=False)

# 用 js 点击，无视遮罩层
ele.click(by_js=True)

默认情况下 by_js=None，程序会先尝试模拟点击。如果元素被遮挡、不可见或无法滚动到视口，会自动切换到 js 点击。

模拟点击更接近真实用户操作，能触发更多事件。js 点击更暴力，但可能漏掉一些事件处理。优先用模拟点击。

点击前自动滚动

模拟点击前，程序会尝试把元素滚动到视口中。不需要手动滚动页面。

输入内容 input()

input() 用于向输入框输入文本。

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

输入前清空

默认不会清空已有内容。设置 clear=True 可以在输入前自动清空。

# 先清空再输入
ele.input('新内容', clear=True)

输入并回车

在文本末尾加 \n 可以输入后回车。

# 输入关键词并回车搜索
ele.input('DrissionPage\n')

用 js 输入

设置 by_js=True 可以用 js 方式输入，速度更快但不能输入组合键。

ele.input('Hello', by_js=True)

输入组合键

input() 还能输入组合键。先导入 Keys 类：

from DrissionPage.common import Keys

# 输入 ctrl+a 全选
ele.input(Keys.CTRL_A)

# 输入 ctrl+c 复制
ele.input(Keys.CTRL_C)

# 自定义组合键
ele.input((Keys.CTRL, 'a', Keys.DEL))  # ctrl+a+del

Keys 内置了常用组合键：CTRL_A、CTRL_C、CTRL_X、CTRL_V、CTRL_Z、CTRL_Y。

清空文本 clear()

clear() 用于清空输入框内容。

# 模拟按键方式清空（ctrl+a+del）
ele.clear()

# js 方式清空（直接设置 value 为空）
ele.clear(by_js=True)

模拟方式更接近真实操作，js 方式更直接。

获取焦点 focus()

focus() 让元素获取焦点。

ele.focus()

有些页面需要先获取焦点才能输入，这时就用到 focus()。

拖拽 drag() 和 drag_to()

相对拖拽

drag() 将元素拖拽到相对当前位置的偏移处。

# 向右下方拖拽 50*50 像素，用时 1 秒
ele.drag(50, 50, 1)

拖拽到目标

drag_to() 将元素拖拽到另一个元素或坐标上。

# 拖拽到另一个元素上
ele1.drag_to(ele2)

# 拖拽到页面坐标 (100, 200)
ele1.drag_to((100, 200))

悬停 hover()

hover() 模拟鼠标悬停在元素上。

# 悬停在元素中点
ele.hover()

# 悬停在元素内指定偏移位置
ele.hover(50, -30)

很多网页的二级菜单需要悬停才显示，这时就用到 hover()。

实际例子：登录流程

一个完整的登录操作：

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('mypass', clear=True)

# 点击登录按钮
tab.ele('text:登录').click()

实际例子：搜索操作

百度搜索的典型流程：

from DrissionPage import Chromium

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

# 在搜索框输入关键词并回车
tab.ele('#kw').input('DrissionPage\n')

# 或者分步来
# tab.ele('#kw').input('DrissionPage')
# tab.ele('text:百度一下').click()

小结

方法	作用	常用参数
`click()`	点击	`by_js`
`input()`	输入文本	`clear`, `by_js`
`clear()`	清空文本	`by_js`
`focus()`	获取焦点	无
`drag()`	相对拖拽	`offset_x`, `offset_y`, `duration`
`drag_to()`	拖拽到目标	`ele_or_loc`, `duration`
`hover()`	悬停	`offset_x`, `offset_y`

这些是最基础的元素交互方法。掌握了它们，就能完成大部分网页自动化任务。