> 本文节选自霍格沃兹测试学院内部教材
在做 Web
自动化时，最根本的就是操作页面上的元素，首先要能找到这些元素，然后才能操作这些元素。工具或代码无法像测试人员一样用肉眼来分辨页面上的元素。那么要怎么来定位到这些元素，本章会介绍各种定位元素的方法。
**id**
Selenium 自带 id 定位，可以通过元素的 id 属性进行定位，比如下面的代码：
*
driver.find_element_by_id('site-logo')
name
Selenium 自带 name 定位，可以通过元素的 name 属性进行定位，比如下面的代码：
*
driver.find_element_by_name('wd')
**注意** ：通常来说 name 属性与 id 属性在页面中唯一，推荐使用。
XPath
XPath 是一个定位语言，英文全称为：XML Path Language，用来对 XML 上的元素进行定位，但也适用于 HTML。下面来看一个例子：
要定位的元素是百度首页的搜索输入框
首先寻找 id 为 form 的 form 元素，然后再寻找它的子元素 span，span 的 class 属性为 `bg s_ipt_wr
quickdelete-wrap`，最后找 span 的子元素 input：
* *
driver.find_element_by_xpath\ ("//form[@id='form']/span[@class='bg s_ipt_wr quickdelete-wrap']/input")
下面的定位也可以找到这个 input，请注意，这里使用了双斜杠`//`，它可以找到子孙节点，而单斜杠`/`只能找到子节点：
*
driver.find_element_by_xpath("//form[@id='form']//input[@id='kw']")
XPath 表达式更多内容可参考下面表格：
表达式| 描述
---|---
nodename| 选取此节点的所有子节点。
/| 从根节点选取。
//| 从匹配选择的当前节点选择文档中的节点，而不考虑它们的位置。
.| 选取当前节点。
..| 选取当前节点的父节点。
@| 选取属性。
如何检验 XPath 定位是否正确？可以使用 chrome 的检查模式 -> Console，输入`$x('XPath 表达式')`即可，比如下面：
css_selector
XPath 可以定位绝大多数元素，但是它采用从上到下的遍历模式，速度并不快，而 css_selector 采用样式定位，速度要优于
XPath，而且语法更简洁：
下面是 Selenium 使用 css_selector 的例子：
css_selector 找到 class 属性为 active 的元素，然后 `>` 表示找 class 属性为 active 的元素的子节点
*
driver.find_element_by_css_selector('.logo-big')
下表列出了常用的 css_selector 表达式的用法：
表达式| 描述
---|---
.intro| class="intro" 的所有元素
#firstname| id="firstname" 的所有元素
a[target=_blank]| 具有属性 target="_blank" 的所有 a 元素
p:nth-child(2)| 属于其父元素的第二个 p 元素
使用 Chrome 的检查模式 -> Console 也可以在当前页面检测 css_selector 是否正确，输入`$('css selector
表达式')`即可：
link
元素中会出现文字，比如下面的分类，可以利用这段文字进行定位：
*
driver.find_element_by_link_text('欢迎光临霍格沃兹测试学院')
也可以采用部分匹配方式，不必写全：“欢迎光临”、“欢迎光临霍格沃兹测试学院”、“霍格沃兹”
*
driver.find_element_by_partial_link_text('霍格沃兹测试学院')
**注意** ：partial_link_text 与 link_text 的区别：
partial_link_text 不用写全，只需写部分即可，比如上面使用“霍格沃兹”即可匹配到“欢迎光临霍格沃兹测试学院”。
tag_name
DOM 结构中，元素都有自己的 tag，比如 input tag, button tag, anchor tag 等等，每一个 tag 拥有多个属性，比如
id, name, value class,等等。下面的高亮部分就是 tag：
可以使用 tag 进行定位:
*
driver.find_element_by_tag_name('input')
**注意** ：尽量避免使用 tag_name 定位元素，因为有大量重复的元素！
tag_name
可以通过元素的 class 属性值进行定位：
这里的 active 用的就是上图 class 的值
*
driver.find_element_by_class_name('active')
推荐使用
* ID/Name 是最安全的定位选项。根据 W3C 标准，它在页面中是唯一的，ID 在树结构中也是唯一的。
* CSS Selector 语法简洁，搜索速度快于 Xpath。
* XPath 定位功能强大，采用遍历搜索，速度略慢。
* link，class name， tag name：不推荐使用，无法精准定位。
常见操作
Selenium 常见操作有：
* 输入、点击、清除
* 关闭窗口、浏览器
* 获取元素属性
* 获取网页源代码、刷新页面
* 设置窗口大小
输入、点击、清除
输入、点击、清除对应 Selenium 中的 send_keys、click、clear
* * * * * * *
from selenium import webdriver
driver = webdriver.Chrome()driver.get('http"//www.baidu.com')driver.find_element_by_name('wd').send_keys('霍格沃兹测试学院')driver.find_element_by_id('su').click()driver.find_element_by_name('wd').clear()
关闭窗口、浏览器
关闭当前句柄窗口（不关闭进程）`close()`，关闭整个浏览器进程 `quit()`
`
`
* * * * * * * * * *
#导入对应的依赖from selenium import webdriver#初始化webdriverdriver = webdriver.Chrome()#访问网站driver.get('http"//www.baidu.com')#关闭当前窗口driver.close()#关闭浏览器driver.quit()
获取元素属性
获取元素标签上的属性 get_attribute('value')，元素的坐标 location，元素的大小 size
* * * * * * * * * * * * * * *
import loggingfrom selenium import webdriver
def test_baidu(): driver = webdriver.Chrome() driver.get('https://www.baidu.com') search = driver.find_element_by_id('su') logging.basicConfig(level=logging.INFO) logging.info(search.get_attribute('value')) #获取search的value属性值并打印 logging.info(search.get_attribute('value')) #打印search的位置坐标 logging.info(search.location) #打印search的元素大小 logging.info(search.size)
输出结果为：
> INFO:root:百度一下
>
> INFO:root:百度一下
>
> INFO:root:{'x': 844, 'y': 188}
>
> INFO:root:{'height': 44, 'width': 108}
获取网页源代码、刷新页面
网页源代码 page_source，刷新页面 refresh()：
* * * * * * * * * *
import loggingfrom selenium import webdriver
driver = webdriver.Chrome()driver.get('http"//www.baidu.com')#刷新页面driver.refresh()logging.basicConfig(level=logging.INFO)#打印当前页面的源代码logging.info(driver.page_source)
设置窗口大小
最小化 minimize_window()，最大化 maximize_window()，设置窗口具体的大小
set_window_size(width,height)
* * * * * * * * * *
from selenium import webdriver
driver = webdriver.Chrome()driver.get('http"//www.baidu.com')#最小化窗口driver.minimize_window()#最大化窗口driver.maximize_window()#将浏览器设置为1000*1000的大小driver.set_window_size(1000, 1000)
web控件定位与常见操作就先讲到这里啦，大家还想看什么内容的文章也可以留言告诉我们哦
** _
来霍格沃兹测试开发学社，学习更多软件测试与测试开发的进阶技术，知识点涵盖web自动化测试 app自动化测试、接口自动化测试、测试框架、性能测试、安全测试、持续集成/持续交付/DevOps，测试左移、测试右移、精准测试、测试平台开发、测试管理等内容，课程技术涵盖bash、pytest、junit、selenium、appium、postman、requests、httprunner、jmeter、jenkins、docker、k8s、elk、sonarqube、jacoco、jvm-sandbox等相关技术，全面提升测试开发工程师的技术实力
视频资料领取：https://qrcode.testing-studio.com/f?from=jianshu&url=https://ceshiren.com/t/topic/15844
