- Python实现Web UI自动化测试实战：Selenium 3/4+unittest/Pytest+GitLab+Jenkins
- Storm 李鲲程 边宇明
- 1323字
- 2021-08-17 17:24:21
5.3 获取页面元素的相关信息
获取页面元素的信息主要有两个目的：一是执行完步骤后进行断言；二是获取前一步骤的响应结果，将其作为后续步骤的输入或判断条件。
本节我们带大家学习一下如何获取元素的相关信息。
5.3.1 获取元素的基本信息
◆目的
输出元素的大小、文本、标签名。
◆关键字
●.tag_name，输出元素的标签名。
●.size，输出元素的大小。
●.text，输出元素的文本（适用于链接元素）。
◆示例代码：test5_34.py
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("https://www.baidu.com/") #打开百度首页
ele = driver.find_element_by_link_text('新闻') #将新闻这个元素赋给变量ele
print(ele.tag_name) #输出标签名
print(ele.text) # 输出文本
print(ele.size) # 输出大小
driver.quit()
◆运行结果
新闻
{'height': 24, 'width': 26}
◆注意事项
按钮上的文字是不能通过“.text”来输出的。
5.3.2 获取元素的属性信息
◆目的
获取元素的属性信息，如id、name、class name、value等。
◆关键字
get_attribute('id/name/value等')：获取元素的属性信息。
◆示例代码：test5_35.py
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("https://www.baidu.com/")
ele1 = driver.find_element_by_id('su') # 通过id定位百度搜索按钮
ele2 = driver.find_element_by_id('kw') # 通过id定位百度搜索框
print(ele1.get_attribute('id')) #输出搜索按钮的id属性
print(ele2.get_attribute('name')) #输出搜索框的name属性
print(ele1.get_attribute('value')) #输出按钮的文字，也就是value属性
print(type(ele1.get_attribute('name')))
print(ele1.get_attribute('name'))
driver.quit()
◆运行结果
su wd 百度一下 <class 'str'>
◆注意事项
当要获取的元素无对应属性时，会返回一个空的字符串。
5.3.3 获取元素的CSS属性值
◆目的
输出元素的CSS属性值，如元素的高、宽、字体等。
◆关键字
value_of_css_property('height/width/font-family')：输出元素的CSS属性值。
◆示例代码：test5_36.py
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("https://www.baidu.com/")
ele = driver.find_element_by_link_text('新闻') #通过link_text定位新闻元素
#height，输出元素的高
print(ele.value_of_css_property('height'))
#width，输出元素的宽
print(ele.value_of_css_property('width'))
#font-family，输出元素所使用的字体
print(ele.value_of_css_property('font-family'))
driver.quit()
◆运行结果
24px 26px arial
5.3.4 判断页面元素是否可见
◆目的
判断页面元素是否可见。
◆示例HTML：myhtml5_13.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断元素是否可见</title>
<script type="text/javascript">
function showAndHidden1() {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
if (div1.style.display == 'block') div1.style.display='none';
else div1.style.display = 'block';
if (div2.style.display == 'block') div2.style.display='none';
else div2.style.display = 'block';
}
function showAndHidden2() {
var div3 = document.getElementById("div3");
var div4 = document.getElementById("div4");
if (div3.style.visibility == 'visible') div3.style.visibility='hidden';
else div3.style.visibility = 'visible';
if (div4.style.visibility == 'visible') div4.style.visibility='hidden';
else div4.style.visibility = 'visible';
}
</script>
</head>
<body>
<div>display:元素不占用页面位置</div>
<div id="div1" style="display:block">DIV 1</div>
<div id="div2" style="display:none">DIV 2</div>
<input id="button1" type="button" onclick="showAndHidden1();" value="DIV切换"/>
<hr>
<div>display:元素占用页面位置</div>
<div id="div3" style="visibility: visible;">DIV 3</div>
<div id="div4" style="visibility: hidden;">DIV 4</div>
<input id="button2" type="button" onclick="showAndHidden2();" value="DIV切换"/>
</body>
</html>
◆关键字
is_displayed：判断元素是否可见，如果可见，返回True；反之，返回False。
◆示例代码：test5_37.py
from selenium import webdriver
from time import sleep
import os
"""
判断页面元素是否可见
"""
driver = webdriver.Chrome()
html_file = os.getcwd() + os.sep + 'myhtml5_13.html'
driver.get(html_file)
ele1 = driver.find_element_by_id('div1')
ele2 = driver.find_element_by_id('div2')
ele3 = driver.find_element_by_id('div3')
ele4 = driver.find_element_by_id('div4')
# 通过is_displayed方法判断页面元素是否可见
# 对于style="display: none;style="visibility: hidden，页面不可见
print("ele1 is display: {}".format(ele1.is_displayed()))
print("ele2 is display: {}".format(ele2.is_displayed()))
print("ele3 is display: {}".format(ele3.is_displayed()))
print("ele4 is display: {}".format(ele4.is_displayed()))
driver.find_element_by_id('button1').click()
driver.find_element_by_id('button2').click()
print("————————————————")
print("ele1 is display: {}".format(ele1.is_displayed()))
print("ele2 is display: {}".format(ele2.is_displayed()))
print("ele3 is display: {}".format(ele3.is_displayed()))
print("ele4 is display: {}".format(ele4.is_displayed()))
driver.quit()
◆运行结果
ele1 is display: True ele2 is display: False ele3 is display: True ele4 is display: False ———————————————— ele1 is display: False ele2 is display: True ele3 is display: False ele4 is display: True
5.3.5 判断页面元素是否可用
◆目的
判断页面元素是否可用。
◆示例HTML：myhtml5_14.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断页面元素是否可操作</title>
</head>
<body>
<input id="input1" type="text" size="40" value="可操作">
<input id="input2" type="text" size="40" value="不可用" disabled>
<input id="input3" type="text" size="40" value="只读" readonly>
</body>
</html>
◆关键字
is_enabled：如果元素可用，返回True；反之，返回False。
◆示例代码：test5_38.py
from selenium import webdriver
from time import sleep
import os
"""
判断页面元素是否可用
"""
driver = webdriver.Chrome()
html_file = os.getcwd() + os.sep + 'myhtml5_14.html'
driver.get(html_file)
ele1 = driver.find_element_by_id('input1')
ele2 = driver.find_element_by_id('input2')
ele3 = driver.find_element_by_id('input3')
# 可以通过is_enabled方法判断页面元素是否可用
# 如果页面元素有“disabled”属性的话，则页面元素不可用
print("ele1 is enabled {}".format(ele1.is_enabled()))
print("ele2 is enabled {}".format(ele2.is_enabled()))
print("ele3 is enabled {}".format(ele3.is_enabled()))
driver.quit()
◆运行结果
ele1 is enabled True ele2 is enabled False ele3 is enabled True
◆注意事项
当某个元素被另外一个元素遮挡时，也会出现元素无法操作的情况。
5.3.6 判断元素的选中状态
◆目的
判断元素的选中状态。
◆关键字
is_selected：判断复选框或单选按钮的选中状态。
◆示例代码：test5_39.py
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get('http://sahitest.com/demo/clicks.htm')
sleep(3)
ele = driver.find_element_by_xpath('/html/body/ul/li/a/label/input')
print(ele.is_selected()) # 判断复选框是否被选中，否，返回False
ele.click() # 单击，使复选框处于选中状态
print(ele.is_selected()) # 判断复选框是否被选中，是，返回True
driver.quit()
◆运行结果
False True
◆注意事项
如果选中或者取消选中复选框或单选按钮页面有加载时间的话，要合理使用等待，然后再判断选中状态。