本文详细讲解了元素定位的六种基础方法，包括id、name、class、tagname、linktext和partiallinktext，深入解析XPath定位的语法和规则，以及CSS定位的优劣和使用技巧，帮助读者理解并运用在自动化测试中.
目录
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~li4.2.10 CSS定位语法—多元素选择器
目标：
同时选择多个不同的页面元素。
表达式：
div#div1,input,a4.3 Xpath与CSS的比较
Xpath定位功能相对强大一些。
CSS定位执行速度更快一点。
某些浏览器并不支持CSS定位。
一般自动化测试实施过程中使用Xpath定位要比CSS方式普遍。
1491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
