目录
4.2.7 CSS定位语法—使用页面元素进行子页面元素的查找
1 元素定位概述
1.1 脚本运行流程
1.引包:from selenium import webdriver
2.创建对象:driver = webdriver.Chrome()
3.操作定位元素:driver.find_element…..
4.关闭对象:driver.quit()
1.2 对象
1.driver实际上是webdriver包下的Chrome()类所实例化出的对象,针对于Chrome浏览器操作具有一系列动作和属性。
2.selenium自动化操作通常都包含在对象创建和消亡之间。
3.driver.quit():释放dirver对象。
driver.close():关闭当前页面。
1.3 元素定位
1.页面中每个可操作对象,都有唯一路径,元素定位就是找出它的唯一路径,这个过程称为定位。
2.元素定位常见问题:
定位到的元素不唯一
定位路径出现错误
页面中出现可变元素,拒绝定位。
2 六种基本元素定位方法
2.1 id定位
Webdriver中对应的方法:find_element_by_id(ID值)
定位后操作:
send_keys():输入
clear():清空
click():点击
使用要点:
页面元素的ID属性都是唯一的,所以不存在根据ID属性值同时定位多个的情况。
在自动化测试实施过程中,很多核心页面元素均无ID属性值,需与开发沟通。
有些网站为防止批量操作,将ID设为随机自动生成模式,跑脚本前需与开发沟通。
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://www.sogou.com/")
driver.find_element_by_id("query").send_keys("封城")
driver.find_element_by_id("stb").click()
sleep(2)
driver.quit()
2.2 name定位
Webdriver中对应的方法:find_element_by_name(NAME值)
定位后操作:
send_keys():输入
clear():清空
click():点击
使用要点:
Name属性值在当前页面可以不唯一,如果有多个元素时,需进一步定位。
Find_elements_by*方法通常用来统计页面元素个数。
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://www.sogou.com/")
driver.find_element_by_name("query").send_keys("封城")
driver.find_element_by_id("stb").click()
sleep(2)
driver.quit()
2.3 class name定位
Webdriver中对应的方法:find_element_by_class_name(class值)
定位后操作:
send_keys():输入
clear():清空
click():点击
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://news.baidu.com/")
driver.find_element_by_class_name("word").send_keys("双十一")
driver.find_element_by_class_name("btn").click()
sleep(2)
driver.quit()
2.4 tag name定位
Webdriver中对应的方法:find_elements_by_tag_name(tag值)
注意事项:
当页面中元素值可变,且不唯一时,用tagname方法。
find_elements…方法会将所有符合条件的值都获取上来。
以列表形式返回。
使用要点:
标签名方式主要用于匹配多个页面元素的情况,将查找到的网页元素进行计数、遍历、修改属性的操作
在大多数情况下标签名在页面中都不唯一,因此很少使用此种方式对元素进行定位点击、输入等操作。
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://news.baidu.com/")
test = driver.find_elements_by_tag_name("input")
test[0].send_keys("双十一")
test[1].click()
sleep(2)
driver.quit()
2.5 link text定位
Webdriver中对应的方法:find_element_by_link_text(linktext)
定位后操作:
send_keys():输入
clear():清空
click():点击
使用要点:
此定位方式需要完全匹配链接标签中的文本内容
常用于页面中存在多个链接文字高度相似,且无法使用部分链接文字进行定位的情况。
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://news.baidu.com/")
driver.find_element_by_link_text("上海疫情通报").click()
sleep(2)
driver.quit()
2.6 partial link text定位
Webdriver中对应的方法:find_element_by_partial_link_text(linktext)
定位后操作:
send_keys():输入
clear():清空
click():点击
使用要点:
此方式定位页面链接只城要模糊匹配即可。
常用于匹配页面链接文字不定期发生少量变化的情况。
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://news.baidu.com/")
driver.find_element_by_partial_link_text("新型冠状病毒").click()
sleep(2)
driver.quit()
3 Xpath定位
3.1 Xpath的定义
Xpath是XML Path语言的缩写,是一门在XML文档中查找信息的语言。
它在XML文档中通过元素和属性进行导航,主要用于在XML中选择节点。
Xpath语言可以用于在整个文档中沿着path或step来寻找指定的节点。
比CSS定位灵活,但速度稍逊。
3.1.1 节点
<booklist>:文档节点
<title>:元素节点
Type=“computer”:属性节点
3.1.2 节点间的关系
父节点(Parent)
每个元素以及属性都有一个父节点。
子节点(Children)
一个元素节点可有零个、一个或多个子节点。
同胞节点(Sibling)
表示拥有相同父节点的节点。
先辈节点(Ancestor)
表示某节点的父节点,父节点的父节点,以及父节点的所有祖先节点。
后代节点(Descendant)
表示某个节点的子节点,子节点的子节点,以及子节点的所有后代节点
3.2 Xpath定位语法—绝对路径
目标:
查找第一个div标签下的“查询”按钮。
表达式:
/html/body/div/input[@value=“查询”]
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://127.0.0.1/07_xpath.html")
driver.find_element_by_xpath("/html/body/div/input[@value='查询']").click()
sleep(2)
driver.close()
3.3 Xpath定位语法—相对路径
目标:
查找第一个div标签下的“查询”按钮。
表达式:
//input[@value=“查询”]
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://127.0.0.1/07_xpath.html")
driver.find_element_by_xpath("//input[@value='查询']").click()
sleep(2)
driver.close()
3.4 Xpath定位语法—索引号
目标:
查找第一个div标签下的“查询”按钮。
表达式:
//input[2]
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://127.0.0.1/07_xpath.html")
driver.find_element_by_xpath("//input[2]").click()
sleep(2)
driver.close()
定位第二个div下的超链接
//div[last()]/a
定位第一个div中的超链接
//div[last()-1]/a
定位最前面一个属于div元素的子元素中的input元素
//div/input[position()<2]
3.5 Xpath定位语法—属性值
目标:
定位第一张img元素。
表达式:
//img[@alt=“div1-img1”]
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://127.0.0.1/07_xpath.html")
driver.find_element_by_xpath("//img[@alt='div1-img1']").click()
sleep(2)
driver.close()
定位页面的第一张图片
//img[@href=‘http://www.sogou.com’]
定位第二个div中第一个input输入框
//div[@id=‘div2’]/input[@name=‘div2input’]
定位第一个div中的第一个链接
//div[@id=‘div1’]/a[@href=‘http://www.sogou.com’]
定位页面的查询按钮
//input[@type=‘button’]
3.6 Xpath定位语法—模糊属性值
starts-with(str1,str2)
查找属性alt的属性值以”div1”关键字开始的页面元素
//img[starts-with(@alt,’div1’)]
contains(str1,str2)
查找alt属性的属性值包含”img”关键字的页面元素。
//img[contains(@alt,’img’)]
3.7 Xpath定位语法—Xpath轴(Axes)
轴可以定义相对于当前节点的节点集。
此定位方式可根在文档树中的元素相对位置关系进行页面元素定位。
方法:
先找到一个相对好定位的元素
以它为轴,根据它和要定位元素间的相对位置关系进行定位
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://127.0.0.1/07_xpath.html")
driver.find_element_by_xpath("//img[@alt='div2-img2']//parent::div/input[2]").click()
sleep(2)
driver.close()
parent:选择当前节点的上层父节点
//img[@alt=‘div2-img2’]/parent::div
child:选择当前节点的下层所有子节点
//div[@id=‘div1’]/child::img
ancestor:选择当前节点所有上层的节点
//img[@alt=‘div2-img2’]/ancestor::div
descendant:选择当前节点所有下层的节点(子、孙)
//div[@name=‘div2’]/descendant::img
following:选择当前节点之后显示的所有节点
//div[@id=‘div1’]/following::img
following-sibling:选择当前节点后续所有兄弟节点
//a[@href=‘http://www.sogou.com’]/following-sibling::input
preceding:选择当前节点前面的所有节点
//img[@alt=‘div2-img2’]/preceding::div
Preceding-sibling:选择当前节点前面的所有亲兄弟节点
//input[@value=‘查询’]/preceding-sibling::a[1]
3.8 Xpath定位语法—页面元素的文本
通过text()函数可以定位到元素文本包含某些关键内容的页面元素
Xpath表达式
//a[text()=“搜狗搜索”]
//a[.=“搜狗搜索”]
//a[contains(.,”百度”)]
//a[contains(text(),”百度”)]
//a[contains(text(),”百度”)]/preceding::div
//a[contains(百度”)]/..
4 CSS定位
4.1 css定位定义
CSS:层叠样式表。
是一种用于表现HTML或XML等文件样式的前端页面语言。
主要用于描述页面元素的展现和样式的定义。
比Xpath定位速度快、稳定。
4.2 CSS定位语法
4.2.1 CSS定位语法—绝对路径
目标:
查找第一个div元素中的“查询按钮”。
表达式:
Html>body>input[value=“查询”]
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://127.0.0.1/08_css.html")
driver.find_element_by_css_selector("html>body>div>input[value='查询']").click()
sleep(2)
driver.close()
注意事项
不推荐在频繁变化的被测试页面上使用绝对路径方式。
CSS定位表达式用>符号分割。
不再使用@符号选择属性
4.2.2 CSS定位语法—相对路径
目标:
查找第一个div元素中的“查询按钮”。
表达式:
input[value=“查询”]
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://127.0.0.1/08_css.html")
driver.find_element_by_css_selector("input[value='查询']").click()
sleep(2)
driver.close()
4.2.3 CSS定位语法—class名称
目标:
查找第一个div元素中的input输入框。
表达式:input.spread
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://127.0.0.1/08_css.html")
driver.find_element_by_css_selector("input.spread").send_keys("selenium")
sleep(2)
driver.close()
注意事项:
当使用元素的class属性来定位时,用点来分割元素名与class属性名。
点后面是class属性值。
4.2.4 CSS定位语法—id属性
目标:
查找第一个div元素下ID属性值为”div1input”的input页面元素。
表达式:
input#div1input
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://127.0.0.1/08_css.html")
driver.find_element_by_css_selector("input#div1input").send_keys("selenium")
sleep(2)
driver.close()
注意事项
当使用元素的ID属性来定位时,用#来分割元素名与ID属性名。
后面是ID属性
4.2.5 CSS定位语法—其他属性
目标:
查找第一个div元素下第一张图片元素img。
表达式:
img[alt=‘div1-img1’]
img[alt=‘div1-img1’][href=‘http://www.sogou.com’]
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://127.0.0.1/08_css.html")
test=driver.find_element_by_css_selector("img[alt='div1-img1']")
print(test.get_attribute("alt"))
sleep(2)
driver.close()
注意事项
两种表达式在本测试页中等价。
表达式1使用单属性,即img元素的alt属性值进行定位。
表达式2使用双属性定位。
用多个属性可以保证元素在页面中的唯一性
4.2.6 CSS定位语法—属性部分内容
目标:
在页面中查找“搜狗搜索”链接。
表达式:
a[href^=“http://www.so”]
a[href$=“gou.com”]
a[href*=“so”]
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://127.0.0.1/08_css.html")
test=driver.find_element_by_css_selector("a[href^="http://www.so"]']")
print(test.get_attribute("href"))
sleep(2)
driver.close()
注意事项
表达式1字符”^”指明从字符串开始匹配
表达式2字符”$”指明在字符串结尾匹配
表达式3字符”*”指明需要进行模糊匹配
此定位方式可匹配动态变化的属性值的页面元素,只要找到属性中固定不变的关键部分就可以。
此方法可以解决大部分复杂定位难题。
4.2.7 CSS定位语法—使用页面元素进行子页面元素的查找
目标:
在页面中查找第一个div下的第一个input。
表达式:
div#div1>input#div1input
div input
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://127.0.0.1/08_css.html")
test=driver.find_element_by_css_selector("div#div1>input#div1input")
print(test.get_attribute("class"))
sleep(2)
driver.close()
注意事项
Div1#div表示在被测网页上定位到ID属性值为div1的div元素。
表示在已查找到的div元素的子页面元素中进行查找。
Input#div1input表示查找ID属性值为div1input的input页面元素。
4.2.8 CSS定位语法—使用伪类定位
目标:
在页面中查找第一个div下的指定子元素。
表达式:
div#div1 :first-child
div#div1 :nth-child(2)
div#div1 :last-child
input:focus
input:enabled
input:checked
input:not([id])
注意事项
表达式中的:号前面必须有一个空格,否则无法完成定位。
4.2.9 CSS定位语法—查找同级兄弟页面元素
目标:
在页面中查找第一个div下第一个input子页面元素的同级兄弟页面元素。
表达式:
div#div1 > input + a
div#div1 > input + a + img
div#div1 > input + * + img
ul#recordlist > p~li
4.2.10 CSS定位语法—多元素选择器
目标:
同时选择多个不同的页面元素。
表达式:
div#div1,input,a
4.3 Xpath与CSS的比较
Xpath定位功能相对强大一些。
CSS定位执行速度更快一点。
某些浏览器并不支持CSS定位。
一般自动化测试实施过程中使用Xpath定位要比CSS方式普遍。