webdriver定位元素的几种方式讲解

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ManyPeng/article/details/77837713

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表达式

获取方法。

以上。

猜你喜欢

转载自blog.csdn.net/ManyPeng/article/details/77837713
今日推荐