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 层级与属性结合

查看如下前端代码:

<form id="form" class="fm" name="f" action="/s">

                                                        <input name="ie" value="utf-8" type="hidden">

                                                        <input name="f" value="8" type="hidden">

                                                        <input name="rsv_bp" value="0" type="hidden">

                                                        <input name="rsv_idx" value="1" type="hidden">

                                                        <input name="ch" value="" type="hidden">

                                                        <input name="tn" value="baidu" type="hidden">

                                                        <input name="bar" value="" type="hidden">

                                                        <span class="bg s_ipt_wr quickdelete-wrap">

                                                               <span class="soutu-btn"></span>

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

                                                               <a id="quickdelete" class="quickdelete" href="javascript:;" title="清空" style="top: 0px; right: 0px; display: none;"></a>

                                                        </span>

                                                        <span class="bg s_btn_wr">

                                                               <input id="su" class="bg s_btn" value="百度一下" type="submit">

                                                        </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 使用逻辑运算符

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

 <input id=”kw” class=”su” name="ie">

<input id=”kw” class=”aa” name="ie">

<input id=”bb” class=”su” name="ie">

如上面的三行元素,假设我们现在要定位第一行元素,如果使用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 class="bg s_ipt_wr quickdelete-wrap">

<span class="soutu-btn"></span>

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

      <a id="quickdelete" class="quickdelete" href="javascript:;" title="清空" style="top: 0px; right: 0px; display: none;"></a>

</span>

<span class="bg s_btn_wr">

      <input id="su" class="bg s_btn" value="百度一下" type="submit">

</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。

原文地址:https://www.cnblogs.com/linxiu-0925/p/9895086.html