Python语言Selenium库UI自动化测试（一）元素定位方法
简介
当我们日常搭建自动化测试框架时，用Python调用浏览器时，通常有Requests库、Selenium库
这两个库是进行爬虫或者自动化测试时必不可少的，语法都比较简答，这里先介绍Selenium库
Selenium主要分为2部分，Selenium和WebDrive，Selenium和Requests一样，进行API调用等操作，WebDrive是调用浏览器并定位浏览器的元素进行一些操作
我是直接参考官方文档，内容也比较少，就把官方文档里的常用方法梳理出来大家看看了
（官方文档地址：/docs/03_webdriver.jsp#how-does-webdriver-drive-the-browser-compared-to-selenium-rc）
下面我们来看看一些常用的方法
调用浏览器
这里需要注意的是，我们需要针对不同版本的安装不同的浏览器版本和不同的浏览器驱动，我自己是Selenium 3.14 +Firefox 52 + geckodriver V0.11.1.rar*（/sevensolo/article/details/93410613）*
网上还有很多其他的，大家可以本地装起来看下
定位UI元素
定位方法的用法:
打开Web页面，查看源代码（可以使用F12或Firebug）,可以查看元素的属性
Selenium Webdriver
通常使用findelement或者findelements方法结合By类返回元素句柄来进行元素定位
其中By常用的定位方式有8种：
·By ID ·By Class Name ·By Tag Name ·By Name ·By Link Text ·By Partial Link Text ·By CSS Seletor ·By XPathzhi
这8种定位方式在Python selenium中对应的方法为：
**
· findElement(By.id())
· findElement(By.name())
· findElement(By.className())
· findElement(By.tagName())
· findElement(By.linkText())
· findElement(By.partialLinkText())
· findElement(By.xpath())
· findElement(By.cssSelector())**
By ID
· 官方实例
<div id="coolestWidgetEvah">...</div>
最常用也是最简单的方式，通过id定位UI页面元素
调用方法
element = driver.find_element_by_id("coolestWidgetEvah")orfrom mon.by import Byelement = driver.find_element(by=By.ID, value="coolestWidgetEvah")
如果你要获取的页面元素标签是id，那么可以通过id来进行定位
· By ID实例
源代码如下：
<html><head><body link="#0000cc"><a id="result_logo" href="/" onmousedown="return c({'fm':'tab','tab':'logo'})"><form id="form" class="fm" name="f" action="/s"><span class="soutu-btn"></span><input id="kw" class="s_ipt" name="wd" value="" maxlength="255" autocomplete="off">
需要定位input标签的输入框
方法如下：
driver.findElement(by.id("kw"))
By Class Name
· 官方实例
<div class="cheese"><span>Cheddar</span></div><div class="cheese"><span>Gouda</span></div>
如果定位的元素是Class命名的，我们用这个方法，需要注意的是，用Class命名的通常很多元素都是Class，可以仔细看下上面的例子
只是赋予不同的值
调用方法
cheeses = driver.find_elements_by_class_name("cheese")orfrom mon.by import Bycheeses = driver.find_elements(By.CLASS_NAME, "cheese")
· By Class Name实例
该方法可以通过元素的标签名称来查找元素。该方法跟之前两个方法的区别是，这个方法搜索到的元素通常不止一个，所以一般建议结合使用findElements方法来使用。比如我们现在要查找页面上有多少个button，就可以用button这个tagName来进行查找
源代码如下：
<button type="button" class="el-button el-button--primary el-button--medium" style="width: 100%; height: 42px; margin-top: 12px;"><!----><!----><span>登 录</span></button>
想要定位登录元素方法如下：
driver.findElement(By.className("el-button el-button--primary el-button--medium"))
注意：使用className来进行元素定位时，有时会碰到一个元素指定了若干个class属性值的“复合样式”的情况，如下面这个button：登录。这个button元素指定了三个不同的css伪类名作为它的样式属性值，此时就必须结合后面要介绍的cssSelector方法来定位了，稍后会有详细例子。
By Tag Name
· 官方实例
<iframe src="..."></iframe>
如果使用的是Tag Name，我们用这个方法
frame = driver.find_element_by_tag_name("iframe")orfrom mon.by import Byframe = driver.find_element(By.TAG_NAME, "iframe")
· By Tag Name实例
该方法可以通过元素的标签名称来查找元素。该方法跟之前两个方法的区别是，这个方法搜索到的元素通常不止一个，所以一般建议结合使用findElements方法来使用。
源代码：
<input type="password" autocomplete="off" name="password" placeholder="请输入登录密码" class="el-input__inner">
另外，在使用tagName方法进行定位时，还有一个地方需要注意，通常有些HTML元素的tagName是相同的，单选框、复选框、文本框和密码框的元素标签都是input，此时单靠tagName无法准确地得到我们想要的元素，需要结合type属性才能过滤出我们要的元素
需要定位密码输入框
driver.findElement(By.tagName("el-input__inner"))# 过滤出想要的元素for i in inputs:if type = 'password'pass
By Name
· 官方实例
<input name="cheese" type="text"/>
定位方法
cheese = driver.find_element_by_name("cheese")orfrom mon.by import Bycheese = driver.find_element(By.NAME, "cheese")
· By Name实例
源代码如下：
<input type="text" autocomplete="off" name="username" placeholder="请输入用户名登录" class="el-input__inner">
需要定位输入用户名输入框
方法如下：
driver.findElement(By.name("username"))
By Link Text
· 官方实例
<a href="/search?q=cheese">cheese</a>>
定位方法
cheese = driver.find_element_by_link_text("cheese")orfrom mon.by import Bycheese = driver.find_element(By.LINK_TEXT, "cheese")
· By Link Text实例
这个方法是通过超文本链接上的文字信息来定位元素，这种方式一般专门用于定位页面上的超文本链接。
超文本链接源代码：
<a href="/wi_user_register.php" style="float: right; line-height: 22px; color: rgb(96, 98, 102); font-size: 15px;"><span style="float: left; margin-right: 3px;">立即注册</span><span class="sanjiao"></span></a>
需要定位注册元素
代码如下：
driver.findElement(By.linkText("立即注册"))
By Partial Link Text
· 官方实例
<a href="/search?q=cheese">cheese</a>>
定位方法
cheese = driver.find_element_by_link_text("cheese")orfrom mon.by import Bycheese = driver.find_element(By.LINK_TEXT, "cheese")
By Partial Link Text实例
这个方法是By Link Text的扩展。当不能确定超链接的文本信息或者只通过一些关键字进行匹配时，可以使用这个方法进行匹配
<a href="/wi_user_register.php" style="float: right; line-height: 22px; color: rgb(96, 98, 102); font-size: 15px;"><span style="float: left; margin-right: 3px;">立即注册</span><span class="sanjiao"></span></a>
需要定位注册元素
代码如下：
driver.findElement(By.partialLinkText("立"))driver.findElement(By.partialLinkText("即"))driver.findElement(By.partialLinkText("注"))driver.findElement(By.partialLinkText("册"))
By CSS
· 官方实例
<div id="food"><span class="dairy">milk</span><span class="dairy aged">cheese</span></div>
定位方法
cheese = driver.find_element_by_css_selector("#food span.dairy.aged")orfrom mon.by import Bycheese = driver.find_element(By.CSS_SELECTOR, "#food span.dairy.aged")
By CSS实例
cssSelector元素定位方式跟xpath比较类似，但执行速度较快，而且各种浏览器对它的支持很到位
百度首页为例
单一属性定位：
# type selector 定位driver.find_element_by_css_selector('input')# id定位driver.find_element_by_css_selector('#kw')# class定位driver.find_element_by_css_selector('.s_ipt')# 其他属性定位driver.find_element_by_css_selector('[name='wd']')driver.find_element_by_css_selector("[type='text']")
组合属性定位：
# id组合属性定位driver.find_element_by_css_selector("input#kw")# class组合属性定位driver.find_element_by_css_selector("input.s_ipt")# 其他属性组合定位driver.find_element_by_css_selector("input[name='wd']")# 仅有属性名，没有值也可以driver.find_element_by_css_selector("input[name]")# 两个其他属性组合定位driver.find_element_by_css_selector("[name='wd'][autocomplete='off']")
层级定位：
# E>F E下面的F这个元素#id是form的form下面的span下面的inputdriver.find_element_by_css_selector('from#form>span>input')# E:nth-child(n) # E:nth-last-child(n)，如字面意思：倒数第几个标签# E:first-child,第一个标签# E:last-child,最后一个标签# E:only-child,唯一的标签
By XPath
需要注意的是XPath需要安装XPath寻找器，我FireFox上装的是XPath Finder这个插件
· 官方实例
<input type="text" name="example" /><INPUT type="text" name="other" />
使用方法
inputs = driver.find_elements_by_xpath("//input")orfrom mon.by import Byinputs = driver.find_elements(By.XPATH, "//input")
· By XPath实例
XPath是XML Path的简称，由于HTML文档本身就是一个标准的XML页面。这个方法是非常强大的元素查找方式，使用这种方法几乎可以定位到页面上的任意元素。
XPath，这里只简单介绍，需要深入了解的，可以自己找资料学下，附上w3school的学习地址
/xpath/xpath_syntax.asp
Xpath的路径分为：
绝对路径 /
相对路径 //
Xpath路径应用举例：
# 使用绝对路径By.xpath("html/body/div/form/input")# 使用相对路径By.xpath("//input//div")# 使用元素定位By.xpath("//input[4]")# 使用xpath相对路径和节点属性定位By.xpath("//input[@id='kw']")By.xpath("//input[@type='name' and @name='kw']")# 使用部分属性值匹配（最强大方法）By.xpath("//input[start-with(@id,'nice')]")By.xpath("//input[start-with(@id,'很漂亮')]")By.xpath("//input[start-with(@id,'很美丽')]")# 所有方法混合使用By.xpath("//input[@id='kw1']//input[start-with(@id,'nice']/div[1]/form[3])
注意：XPath的定位方式，webdriver会将整个页面的所有元素进行扫描以定位我们所需要的元素，所以这是一个非常费时的操作，如果你的脚本中大量使用xpath做元素定位的话，将导致你的脚本执行速度大大降低，所以请慎用。
