Web页面元素定位方式

1 通过元素id定位

例：以百度为例，定位搜索输入框。

F12打开开发者工具，点击第1个箭头图标，然后点击输入框区域，会定位到相应代码行：

可见id为kw，定位代码如下：

driver.find_element_by_id("kw")

2 通过元素name定位

还是以百度搜索输入框为例，可见name为wd，定位代码如下：

driver.find_element_by_name("wd")

3 通过元素class属性定位

还是以百度搜索输入框为例，可见class为s_ipt，定位代码如下：

driver.find_element_by_class_name("s_ipt")

4 通过元素标签名tag定位

还是以百度搜索输入框为例，可见tag为input，定位代码如下：

driver.find_element_by_tag_name("input")

5 通过链接的文本内容定位

例子：以百度新闻链接为例。

可见链接文本内容为“新闻”，定位代码如下：

（1）精准匹配

driver.find_element_by_link_text("新闻")

（2）模糊匹配

driver.find_element_by_partial_link_text("新")

6 Xpath定位

代码格式：

driver.find_element_by_xpath("xpath表达式")

调试方式：

　　F12开发者工具，展开右侧箭头，选择“Ranorex Selocity”，在输入框中输入xpath表达式，回车，即可定位到相应元素及代码行。

xpath表达式有以下几种常用方式。

6.1 绝对路径定位方式

以百度新闻链接为例，绝对路径表达式需从第一级元素标签开始，一级级输入到要定位元素的标签。

表达式如下：

/html/body/div/div/div[3]/a[1]

绝对路径定位方式如果后期页面元素位置或顺序发生改变，维护起来较为麻烦，所以一般不使用此方式，而是用相对路径定位方式。

6.2 相对路径定位方式

相对路径定位方式不在乎元素的位置和顺序，会在整个页面中寻找符合定位表达式的元素。

表达式：

//input

6.2.1 通过索引定位

表达式：

//input[2]

6.2.2 通过属性定位

（1）单个属性查找：

//input[@id='kw']

//input[@name='wd']

（2）多个属性联合查找：

//input[@type='hidden' and name='fenlei']

（3）通过部分属性值查找—模糊定位

表达式1：id以k开头的input元素

//input[starts-with(@id,'k')]

表达式2：class包含ipt的input元素

//input[contains(@class,'ipt')]

6.2.3 通过文本定位

表达式：文本为新闻的a元素

//a[text()='新闻']

6.2.4 通过最后一个元素定位——last()函数

表达式：

　　/A/B/C[last()] 表示A元素→B元素→C元素的最后一个子元素。

　　/A/B/C[last()-1] 表示A元素→B元素→C元素的倒数第二个子元素。

比如定位网盘元素表达式如下：

/html/body/div/div/div[3]/a[last()]

比如定位图片元素表达式如下：

/html/body/div/div/div[3]/a[last()-1]

6.2.5 通过非条件定位——not()函数

表达式1：不含id的input节点

//input[not(@id)]

表达式2：名称为wd，而且id不包含ie的input节点

//input[@name='wd' and not(contains(@id,'ie'))]

7 CSS定位

以百度搜索输入框为例：

<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off" style="">

7.1 通过属性定位

7.1.1 通过id属性定位

id属性符号表示：#

表达式：

#kw

7.1.2 通过class属性定位

class属性符号表示：.

表达式：

.s_ipt

7.1.3 通过其他属性定位

除id、class以外的其他属性用 [属性名=属性值] 格式表示

表达式：

[name='wd']
[autocomplete='off']
[maxlength='255']

7.1.4 通过多个属性组合定位

无需用and拼接，直接[][]组合即可

比如选择type为hidden且name为ch的节点，表达式：

[type='hidden'][name='ch']

7.2 直接用标签定位

表达式：

input

7.3 通过标签及属性组合定位

表达式：

input.s_ipt
input#kw
input[name='wd']

7.4 通过层级关系定位

7.4.1 通过父级节点定位

（1）表达式：符号>表示下级

form.fm>span.s_ipt_wr>input

 7.4.2 通过同级节点定位

（1）表达式：符号~表示同级

.soutu-btn~span

 

7.5 通过索引定位

（1）找其父元素下的第2个子元素，表达式：

[type='hidden']:nth-child(2)

（2）找其兄弟元素的第2个元素，表达式：

[type='hidden']:nth-of-type(2)