Xpath定位和CSS定位（***重）

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

1.1 绝对路径定位

参考baidu.html前端工具所展示的代码，我们可以通过下面的方式找到百度输入框和搜索按钮。

find_element_by_xpath("/html/body/div/div[2]/div/div/div/from/span/input")

find_element_by_xpath("/html/body/div/div[2]/div/div/div/from/span[2]/input")

1.2 利用元素属性定位

XPath可以使用元素的属性值来定位。同样以百度输入框和搜索按钮为例：

find_element_by_xpath(“//input[@ id = ‘ kw’]”)

find_element_by_xpath(“//input[@ id = ‘ su’]”)

//表示当前页面某个目录下，input表示定位元素的标签名，[@ id=’ kw’]表示这个元素的id属性值等于kw。

下面通过name和class属性值来定位。

find_element_by_xpath(“//input[@ name = ‘ wd’]”)

find_{-____}element__by_xpath(“//input[@ class= ‘ s_ipt’]”)

如果不想指定标签名，则也可以用星号(*)代替。当然，使用XPath不局限于id、name 和class这三个属性值，元素的任意属性值都可以使用，只要它能唯一的标识一个元素。

find_element_by_xpath(“//input[@ maxlength= ‘ 100’]”)

find_elernent_by_xpath(“//input[@ autocomplete = ‘off ’]”)

1.3 层级与属性结合

查看如下前端代码：

</span>

</span>

通过XPath可以这样定位如下：

find_element_by_xpath(" //span[@ class = ‘ bg s_ipt_wr quickdelete-wrap’]/input")

span[@ class = ‘ bg s_ipt_wr quickdelete-wrap’]通过class属性定位到父元素，后面/input就表示父元素下面的子元素。如果父元素没有可利用的属性值，那么可以继续向上查找“爷爷”元素。

fmd_element_by_xpath("//form [@id='form']/span/input")

find_element_by_xpath("//form[@id='form']/span[2]/input")

1.4 使用逻辑运算符

如果一个属性不能唯一地区分一个元素，我们还可以使用逻辑运算符连接多个属性来査找元素。

如上面的三行元素，假设我们现在要定位第一行元素，如果使用id将会与第二行元素重名，如果便用class将会与第三行元素重名。如果同时使用id和class就会唯一地标识这' 个元素，这个时候就可以通过逻辑运算符“and”来连接两个条件。

find_element_by_xpath(" //input[@id = ‘kw’ and @class = ‘su’]/span/input”)

当然，我们也可以用“and”连接更多的属性来唯一地标识一个元素。

2、CSS (Cascading Style Sheets)是一种语言，它用来描述HTML和XML文档的表现。CSS使用选择器来为页面元素绑定属性。

CSS可以较为灵活地选择控件的任意属性，一般情况下定位速度要比Xpath快。

下面同样以百度输入框和搜索按钮为例介绍CSS定位的用法。

</span>

</span>

2.1 通过class属性定位

find_element_by_css_selector(“.s_ipt”)

find_element_by_css_selector(“.bg s_btn”)

find_element_by_css_selector()方法用于CSS语言定位元素，点号( .)表示通过class属性来定位元素。

2.2 通过id属性定位

find_element_by_css_selector( “ # kw ”)

find_element_by_css_selector( “ # su ”)

井号(#)表示通过id属性来定位元素。

2.3 通过标签名定位

find_element_by_css_selector( “ input” )

2.4 通过父子关系定位

find_element_by_css_selector("span>input")

2.5 通过属性定位

find_element_by_css_selector (‘[type="submit"]')

2.6 组合定位

我们当然可以把上面的定位策略组合起来使用，这就大大加强了定位元素的唯一性。

find_element_by_css_selector(“span . bg s_ipt_wr quickdelete-wrap>input .s_ipt “)

find_element_by_css_selector(“span . bg s_btn_wr >input # su “)

有一个父元素，它的标签名叫span：它有一个class属性值叫bg s_ipt_wr quickdelete-wrap：它有一个子元素，标签名叫input，并且这个子元素的class属性值叫s_ipt。