python3 + selenium 之元素定位

8种定位方式

定位一个元素

webdriver提供了一系列的对象定位方法，常用的有以下几种

driver.find_element_by_name()——最常用，简单
driver.find_element_by_id()——最常用，简单
driver.find_element_by_class_name()
driver.find_element_by_tag_name()——最不靠谱
driver.find_element_by_link_text()——定位文字连接好用
driver.find_element_by_partial_link_text()——定位文字连接好用
driver.find_element_by_xpath()——最灵活，万能
driver.find_element_by_css_selector()

定位一组元素

driver.find_elements_by_name()
driver.find_elements_by_id()
driver.find_elements_by_class_name()
driver.find_elements_by_tag_name()
driver.find_elements_by_link_text()
driver.find_elements_by_partial_link_text()
driver.find_elements_by_xpath()
driver.find_elements_by_css_selector()

id 和 name

id 和 name 是我们最最常用的定位方式，因为大多数控件都有这两个属性，而且在对控件的id 和name命名时一般使其有意义也会取不同的名字。通过这两个属性使我们找一个页面上的属性变得相当容易

我们通过前端工具，找到了百度输入框的属性信息，如下：

<input id="kw" class="s_ipt" type="text" maxlength="100" name="wd" autocomplete="off">

id=”kw”

通过find_element_by_id("kw") 函数就是捕获到百度输入框

name=”wd”

通过find_element_by_name("wd")函数同样也可以捕获百度输入框

tag name 和class name

从上面的百度输入框的属性信息中，我们看到，不单单只有id 和 name两个属性，比如class 和 tag name(标签名）

<input>

input 就是一个标签的名字，可以通过find_element_by_tag_name("input") 函数来定位。

class="s_ipt"

通过find_element_by_class_name("s_ipt")函数捕获百度输入框。

但是，碰下面的一组控件属性，我们就哭了。

<th width="95"></th><th width="">文件名</th>

<th class="c1">创建时间</th><th class="c1">状态</th>

<th class="c1">文件大小</th><th class="c1">时长</th>

下面的css 和 XPath就没有上面的那么直观，如果不懂前端的话可能不太好理解

CSS定位

CSS(Cascading Style Sheets)是一种语言，它被用来描述HTML和XML文档的表现。CSS使用选择器来为页面元素绑定属性。这些选择器可以被selenium用作另外的定位策略。

CSS的比较灵活可以选择控件的任意属性，上面的例子中：

find_element_by_css_selector("#kw")

通过find_element_by_css_selector( )函数，选择取百度输入框的id属性来定义

也可以取name属性

<a href="http://news.baidu.com" name="tj_news">新 闻</a>

driver.find_element_by_css_selector("a[name=\"tj_news\"]").click()

可以取title属性

<a "queryTab(this);" mon="col=502&pn=0" title="web" href="http://www.baidu.com/">网页</a>

driver.find_element_by_css_selector("a[title=\"web\"]").click()

也可以是取…:

<a class="RecycleBin xz" href="javascript:void(0);">

driver.find_element_by_css_selector("a.RecycleBin xz").click()

CSS的定位是看上去应该是一种非常灵活和牛X 的定位方式

扩展阅读

扩展阅读1

扩展阅读2

cssSelector也是一种常用的选择器，CSS locator比XPath locator速度快,用CSS Selector能非常精准的定位到想测试的Elements

cssSelector常用符号说明

# 表示id

. 表示class

> 表示子元素，层级

一个空格也表示一个子元素，但是所有的子元素相当于xpath中的相对路径

cssSelector的常用用法

#input 选择id为input的节点

.Volvo 选择class为Volvo的节点

div#radio>input 选择id为radio的div下的所有的input节点

div#radio input 选择id为radio的div下的所有的子孙后代input节点

div#radio>input:nth-of-type(4) 选择id为radio的div下的第4个input节点

div#radio>nth-child(1) 选择id为radio的div下的第1个子节点

div#radio>input:nth-of-type(4)+label 选择id为radio的div下的第4个input节点之后挨着的label节点

div#radio>input:nth-of-type(4)~labe 选择id为radio的div下的第4个input节点之后的所有label节点

input.Vovlo[name='identity'] 选择class为.Volvo并且name为identity的input节点

input[name='identity'][type='radio']:nth-of-type(1) 选择name为identity且type为radio的第1个input节点

input[name^='ident'] 选择以ident开头的name属性的所有input节点

input[name$='entity'] 选择以'entity'结尾的name属性的所有input节点

input[name*='enti'] 选择包含'enti'的name属性的所有input节点

div#radio>*.not(input) 选择id为radio的div的子节点中不为input的所有子节点

input:not([type='radio']) 选择input节点中type不为radio的所有节点

cssSelector这种元素定位方式跟xpath比较类似，但执行速度较快，而且各种浏览器对它的支持都相当到位，所以功能也是蛮强大的。

下面是一些常见的cssSelector的定位方式：

定位id为flrs的div元素，可以写成：#flrs     注：相当于xpath语法的//div[@id=’flrs’]

定位id为flrs下的a元素，可以写成 #flrs > a  注：相当于xpath语法的//div[@id=’flrs’]/a

定位id为flrs下的href属性值为/forexample/about.html的元素，可以写成： #flrs > a[href=”/forexample/about.html”]

如果需要指定多个属性值时，可以逐一加在后面，如#flrs > input[name=”username”][type=”text”]。

XPath

什么是XPath?

XPath基础教程

 selenium中被误解的XPath

XPath是一种在XML文档中定位元素的语言。因为HTML可以看做XML的一种实现，所以selenium用户可是使用这种强大语言在web应用中定位元素。

XPath扩展了上面id和name定位方式，提供了很多种可能性，比如定位页面上的第三个多选框。

xpath:attributer （属性）

driver.find_element_by_xpath("//input[@id='kw']").send_keys("selenium")

#input标签下id =kw的元素

xpath:idRelative （id相关性）

driver.find_element_by_xpath("//div[@id='fm']/form/span/input").send_keys("selenium")

#在/form/span/input 层级标签下有个div标签的id=fm的元素

driver.find_element_by_xpath("//tr[@id='check']/td[2]").click()

# id为'check' 的tr ，定闪他里面的第2个td

xpath:position （位置）

driver.find_element_by_xpath("//input").send_keys("selenium")

driver.find_element_by_xpath("//tr[7]/td[2]").click()

#第7个tr 里面的第2个td

xpath: href （水平参考）

driver.find_element_by_xpath("//a[contains(text(),'网页')]").click()

#在a标签下有个文本（text）包含（contains）'网页' 的元素

xpath:link

driver.find_element_by_xpath("//a[@href='http://www.baidu.com/']").click()

#有个叫a的标签，他有个链接href='http://www.baidu.com/ 的元素

实践记录：

driver.find_element_by_xpath("//[@id='TANGRAM__PSP_10__submitWrapper']/a[text() = '立即注册']").click() #中括号中的文本为全部文本，不是部分

link 定位

有时候不是一个输入框也不是一个按钮，而是一个文字链接，我们可以通过link

示例代码：

#coding=utf-8

from selenium import webdriverimport time

browser = webdriver.Firefox()

browser.get("http://www.baidu.com")

time.sleep(2)

browser.find_element_by_link_text("贴 吧").click()

time.sleep(2)

browser.quit()

一般一个那页面上不会出现相同的文件链接，通过文字链接来定位也是一种简单有效的定位方式。

Partial Link Text 定位

driver.find_element_by_xpath("//*[text()=‘新闻’]").click()也可这样写

通过部分链接定位，这个有时候也会用到，我还没有想到很好的用处。拿上面的例子，我可以只用链接的一部分文字进行匹配：

browser.find_element_by_partial_link_text("贴").click()

#通过find_element_by_partial_link_text() 函数，我只用了“贴”字，脚本一样找到了"贴 吧" 的链接

注：

当页面元素有id属性时，最好尽量用id来定位。但由于现实项目中很多程序员其实写的代码并不规范，会缺少很多标准属性，这时就只有选择其他定位方法。
xpath很强悍，但定位性能不是很好，所以还是尽量少用。如果确实少数元素不好定位，可以选择xpath或cssSelector。
当要定位一组元素相同元素时，可以考虑用tagName或name。
当有链接需要定位时，可以考虑linkText或partialLinkText方式。

不能定位元素常见解决办法

各定位方式demo

接下来我们将使用8种定位方式向百度的搜索输入框中输入selenium

#coding=utf-8 #编码格式

from selenium import webdriver #导入webdriver

import time #导入时间模块

browser = webdriver.Firefox() #指定使用Firefox执行

browser.get("http://www.baidu.com") #获取百度page

time.sleep(2) #等待2秒

#########百度输入框的定位方式##########

#通过id方式定位

browser.find_element_by_id("kw").send_keys("selenium")

#通过name方式定位

browser.find_element_by_name("wd").send_keys("selenium")

#通过tag name方式定位

browser.find_element_by_tag_name("input").send_keys("selenium")

#通过class name 方式定位

browser.find_element_by_class_name("s_ipt").send_keys("selenium")

#通过CSS方式定位

browser.find_element_by_css_selector("#kw").send_keys("selenium")

#通过xphan方式定位

browser.find_element_by_xpath("//input[@id='kw']").send_keys("selenium")

############################################

browser.find_element_by_id("su").click() #点击搜索

time.sleep(3)

browser.quit() #退出浏览器并关闭驱动

browser.close() #退出浏览器

定位后不能向文本输入信息

有时候我们可以通过id 的方式将其进行定位，但却不能通过sendKeys()向文本框中输入文本信息

参考链接1

参考链接2

实践参考代码：

text = “input text”

js = “var” sum=document.getElementById(‘id’);sum.value=’” + text + “’;”

driver.execute_script(js)

首先定义了要输入的内容text，然后将text与JavaScript代码通过“+”进行拼接。这样做的目的是为了使输入内容变得可自定义。最后通过execute_script()执行JavaScript代码。

其他参考文档

参考链接1

参考链接2

参考链接3