webdriver属于Selenium体系中设计出来操作浏览器的一套API,支持多种语言,本文中主要讲解为对元素的定位,不涉及具体语言,在某些不同语言中有差异性的地方,本文使用python语言作为示例(比如xpath中的部分语句)。
废话少说,下面就开始介绍几种元素定位方式:
在介绍之前,还是要废话一下,因为我们需要了解一下基本的HTML知识才能进行元素定位。可以以百度的首页为例,可以通过浏览器右键->查看网页源代码的方式查看HTML代码,或者通过开发者工具的方式查看(推荐此种方式,看的比较全面和“真实”),具体不同浏览器打开开发者工具的方式不同,在此不做过多介绍。
通过对网页的观察,我们可以发现一般的HTML文本具有以下几个特征:
(1)由标签对组成
例如<html></html>,<body></body>,<div></div>,当然也包含一些像<input >,<br />这类的单独的一个封闭标签
(2)标签有各种属性
例如<div class="c-tips-container" id="c-tips-container"></div>
<form id="form" name="f" action="/s" class="fm">...</form>
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
(3)标签之间可能会有文本数据
例如<a href="http://news.baidu.com" name="tj_trnews" class="mnav">新闻</a>
(4)标签有层级关系
例如,
<html>
<head>
</head>
<body>
</body>
</html>
说完了以上这些内容,就可以真正的看看如何定位元素啦
1. 通过id定位
从上面的HTML特征我们可以看到,标签内可以有属性,HTML文档规定id属性在HTML文档中必须唯一,类似于我们每个人的身份证一样。因此我们可以通过id属性来定位某个元素,比如定位百度的搜索框:
首先在通过开发者工具找到搜索框对应的HTML语句<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">,可以看到其中有一个id属性,所以,我们可以使用find_element_by_id("kw")这个语句来定位。
2.通过name定位
HTML中可以使用name属性指定元素名称,类似于我们的名字,但是我们是有名字重复的情况存在的,在HTML文档中也是如此,name的属性值在当前HTML文档中不一定唯一。使用name定位百度搜索框:
还是先找到对应的HTML语句,1中已经做过描述,不再赘述。可以看到有一个name="wd"的属性。因此,我们可以使用find_lement_by_name("wd")语句来定位。
3.通过class定位
HTML中使用class定义元素的类名,用法和id、name基本上差不多。使用class定位百度搜索框
找到对应的HTML描述标签后,发现其中有class="s_ipt"属性,则可以使用find_element_by_class_name("s_ipt")语句定位。
4.通过tag定位
HTML本身就是一个“标签语言”,每一个元素就是一个tag,tag往往会定义某一类的功能,因此,一个HTML文本中可能会有多个相同tag存在,因此定位的准确率也就很低。比如我们要找input标签的内容可以使用find_element_by_tag_name("input"),但是我们如果想通过tag定位到搜索框位置就很难,因为很多个tag都是input。
5.通过link_text定位
该类定位方法专门针对链接进行定位,例如百度首页上的一些链接:
<a href="http://news.baidu.com" name="tj_trnews" class="mnav">新闻</a>
<a href="http://www.hao123.com" name="tj_trhao123" class="mnav">hao123</a>
其中的“新闻”,“hao123”就是link_text,如果想定位新闻那个元素,可以使用如下语句:find_element_by_link_text("新闻")
6.通过partial_link_text定位
partial_link_text定位于link_text定位原理相同,只不过有些文本链接太长,此时就可以通过部分的链接文字进行匹配,比如定位
上述提到的“hao123”那个超链接所在的元素,可以使用find_element_by_partial_link_text("hao1")进行定位。
7.通过XPath定位
XPath是一种XML中使用的定位元素语言,HTML可以看成是XML语言的一种,所以也可以通过XPath定位HTML中的元素。XPath
有多种定位策略,但是他要求你能正确写出XPath的表达式,可以自己去百度一下用法,或者在开发者工具中很方便的在Elements窗口中
右键你要定位的元素,Copy->Copy XPath的方式直接得到他的XPath表达式。接下来详细讲解各个定位策略:
(1)绝对路径定位
绝对路径定位就是根据HTML文档的文本结构,一层一层向下找到需要定位的文本内容,比如同样是找到百度搜索框的位置,可以
使用如下语句:find_elemenet_by_xpath("/html/body/div/div/div/div/div/form/span/input"),如果需要定位的元素的某个层级中有
多个相同的标签,则通过从上到下的顺序通过序号的形式定位,比如<html><div><div></div><div>要找的标签</div></div></html>,可
以通过find_element_by_xpath("/html/div/div[2]")的形式找到我们需要找的标签。
(2)通过元素属性定位
同样以定位百度搜索框为例,使用如下语句:find_element_by_xpath("//input[@id='kw']"),其中input代表标签名,[@id="kw"]表
示这个元素的id属性值是kw。同样也可以使用name和class属性定位:find_element_by_xpath("//input[@name='wd']"),和
find_element_by_xpath("//input[@class='s_ipt']");如果不想指定标签名,可以使用"*"号代替:find_element_by_xpath("//*[@id='kw']")
(3)层级与属性结合
如果要找的元素本身没有一个能够准确定位的唯一属性,我们可以考虑通过上层元素来进一步定位。例如:
<form id="form" name="f" action="/s" class="fm">
<input type="hidden" name="ie" value="utf-8">
......
<input type="hidden" name="bar" value="">
<span class="bg s_ipt_wr quickdelete-wrap">(注意这个span标签未结束,input标签包含在这个标签中)
<span class="ipt_rec" style="display: block;"></span>
<span class="soutu-btn"></span>
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
......
</form>
通过上级元素的方式找到百度搜索框的语句可以这样写:find_element_by_xpath("//form[@id='form']/span/input")通过先找到form然后再找到
他的第一个span节点,再找到input节点。
(4)使用逻辑运算符
有时候使用单一的属性难以区分一个元素,因此可以通过逻辑运算符来进行多个属性的判断进行元素定位操作。例如如下HTML文本:
<input id="kw" class="su" name="nihao">
<input id="kw" class="mn" name="nihao">
注意,一般来说一个HTML文本中id是不会重复的,此处只是为了做一个例子。现在想定位第一个input标签,就可以使用以下语句:
find_element_by_xpath("//input[@id='kw' and @class='su']")
8.通过CSS定位
CSS定位基本和以上几种方法本质类似,就大体说一下使用方法不再做细致的描述,以百度输入框的如下代码为例:
<spanclass="bg s_ipt_wr">
<inputid="kw"name="wd"class="s_ipt"value="" maxlength="255" autocomplete="off">
</span>
<spanclass="bg s_btn_wr">
<inputtype="submit"id="su"value="百度一下"class="bg s_btn">
</span>
(1)通过class属性定位搜索框:find_element_by_css_selector(".s_ipt")
(2)通过id属性定位:find_element_by_css_selector("#kw")
(3)通过标签名定位:find_element_by_css_selector("input")
(4)通过父子关系定位:find_element_by_css_selector("span>input")
上面的写法的意思是我们要找的是一个input标签,这个input标签的父元素为span标签
(5)通过属性定位:find_element_by_css_selector("[autocomplete=off]")
这些写法的含义是我们要找的这个标签有一个autocomplete属性,而且这属性的值是"off"
(6)组合定位法:
find_element_by_css_selector("form.fm>span>input.s_ipt")
对于这种表达可以从后往前看,我们要找的是一个input标签,这个input标签的class是s_ipt,而且这个input标签的父元素是span标签,
这个span标签的父元素是form标签,而且这个form标签的class是fm,满足以上所有条件的标签即为我们所找。
同样的,对于CSS选择器,可以在开发者工具中通过右键目标元素,Copy->Copy selector选项复制CSS选择器的表达式,操作类似XPath表达式
获取方法。
以上。