针对元素有哪些常见的简单操作？
点击
输入内容、清除内容
返回元素尺寸、坐标
获取元素标签文本
获取元素属性值
检查元素：是否可见、是否可点击、是否已被选择
表单提交
首先，先将一个测试html保存到本地，后续案例就按照这个页面来演示啦！
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>师不予测试笔记</title>
<style>
img{
margin: 10px 0 0 0 ;
width: 320px;}
</style>
</head>
<body>
<div class="form1">
<form method="GET" action="">
<p>username： <input type="text" name="username" style="color: #999;" value="请输入用户名"
onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#008B8B'}"
onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}"></p>
<p>password： <input type="password" name="password" ></p>
<input id="login" type="submit" value="提交">
</form>
</div>
<a id="one" href="https://tool.oschina.net/commons?type=3" target="_blank" class="mnav sp dot">我是链接名称</a>
<div>举个例子</div>
<strong>举个例子</strong>
<img src="logo.png" alt="">
</body>
</html>
<button type="button" class="ant-btn1" disabled="disabled">不可点击元素</button>
<button type="button" class="ant-btn2">可点击元素</button>
<button type="button" class="ant-btn3" style="display: none">不可见元素</button>
<button type="button" class="ant-btn4" style="display: block">可见元素</button>
<select name="Province" id="">
<option value="北京">北京</option>
<option value="上海" selected>上海</option>
</select>
点击
#!/usr/bin/env python
# -*- coding: utf-8 -*-
# @Time : 2022/1/8 19:11
# @Author : shisuiyi
# @File : 元素选择.py
# @Software: win10 Tensorflow1.13.1 python3.9
from selenium import webdriver
from selenium.webdriver.common.by import By
# 加载浏览器驱动
driver = webdriver.Chrome()
# 访问网址
driver.get("file:///D:/Lemon/py45/webatuo/元素操作.html")
# =====通过 元素Class查找（仅返回匹配到的第一个）=====
login_btn = driver.find_element('id', "login")
# 点击
login_btn.click()
输入内容、清除内容
# 找到name = username的元素
username = driver.find_element('name', "username")
# 输入值 师不予
username.send_keys("师不予")
sleep(3)
# 清空内容
username.clear()
返回元素尺寸、坐标
# 找到元素名称为img
img = driver.find_element(By.CSS_SELECTOR, "img[src = 'logo.png']")
# 打印 元素宽高
print(f"元素宽高:{img.size}")
# 打印 元素 x , y坐标值
print(f"元素坐标值：{img.location}")
执行结果
元素宽高:{'height': 332, 'width': 320}
元素坐标值：{'x': 77, 'y': 170}
知识点
size和location都是实例属性
返回的都是字典
元素坐标值是通过元素的最左上角和浏览器内容区域的左上角来定位的
获取元素标签文本
# 获取第一个标签为a的文本
a_text = driver.find_element('xpath', "//a")
print(a_text.text)
# 获取第一个标签为div的文本
div_text = driver.find_element('xpath', "//div")
print(div_text.text)
执行结果
我是链接名称
username：
password：
知识点
.text 返回的是标签里面的文本，如 内容.... ，返回的则是中间那些内容
如果标签内还有子标签，那也只会获取子标签的文本内容，不会获取标签，像上面获取div的text一样
获取元素属性值
# 获取元素属性值
a_attr = driver.find_element_by_class_name("mnav")
print(a_attr.get_attribute("href"))
执行结果
a_attr = driver.find_element_by_class_name("mnav")
检查元素：是否可见、是否可点击、是否已被选择
# 找到 不可见元素
ant_btn3 = driver.find_element(By.CLASS_NAME, "ant-btn3")
# 找到 可见元素
ant_btn4 = driver.find_element(By.CLASS_NAME, "ant-btn4")
# 查看是否可见
print("不可见元素:", ant_btn3.is_displayed())
print("可见元素:", ant_btn4.is_displayed())
# 找到 不可点击元素
ant_btn1 = driver.find_element(By.CLASS_NAME, "ant-btn1")
# 找到 可点击元素
ant_btn2 = driver.find_element(By.CLASS_NAME, "ant-btn2")
# 查看是否可点击
print("不可点击元素:", ant_btn3.is_enabled())
print("可点击元素:", ant_btn4.is_enabled())
# 找到 未被选中的元素
option1 = driver.find_elements(By.TAG_NAME, "option")[0]
# 找到 已被选中的元素
option2 = driver.find_elements(By.TAG_NAME, "option")[-1]
# 查看是否被选择
print("未被选择元素:", option1.is_selected())
print("已被选择元素:", option2.is_selected())
执行结果
不可见元素: False
可见元素: True
不可点击元素: True
可点击元素: True
未被选择元素: False
已被选择元素: True
知识点
某个元素若有 display：none 的样式则是不可见，否则就是可见
某个元素若有 disabled 属性则是不可点击，否则就是可点击
某个元素若有 selected 属性则是已被选择
表单提交
driver.get("https://www.baidu.com")
# 找到搜索框
search_text = driver.find_element_by_id('kw')
# 输入搜索内容
search_text.send_keys('师不予の测试笔记')
# 提交表单
search_text.submit()
知识点
submit() 方法用于提交表单。
实际场景：在搜索框输入关键字之后的“回车” 操作， 就可以通过该方法模拟
在定位元素后高亮元素(以调试为目的)？
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.action_chains import ActionChains
from time import sleep
def highlight_element(driver, element):
# 使用 JavaScript 修改元素样式
driver.execute_script("arguments[0].setAttribute('style', 'border: 2px solid red;');", element)
sleep(1) # 等待一段时间以便观察效果
# 还原元素原有样式
driver.execute_script("arguments[0].setAttribute('style', arguments[1]);", element, "")
# 创建 WebDriver 实例
driver = webdriver.Chrome()
# 导航到目标页面
driver.get("https://www.example.com")
# 定位元素
element = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.ID, "exampleElement")))
# 高亮元素
highlight_element(driver, element)
# 其他操作...
# ...
# 关闭浏览器
driver.quit()
评论