selenium应用之“定位单元素”

2019-03-14  本文已影响0人  rr1990

一、介绍

通过获取web页面上的元素控件信息，可对元素进行点击和输入数据等操作

二、元素基本的定位方法

1. 通过id查找元素
# 定位到百度输入框获得的属性内容：
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
# 通过id属性查找元素
element = driver.find_element_by_id(id_="kw")
2. 通过name属性查找元素
# 定位到百度输入框获得的属性内容：
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
# 通过name查找元素：
element = driver.find_elements_by_name(name="wd")
3. 通过class属性查找元素
# 定位到百度输入框获得的属性内容：
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
# 通过class名字查找元素
element = driver.find_element_by_class_name(name="s_ipt")
4. 通过tag（标签名）属性查找元素
# 定位到百度输入框获得的属性内容：
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
# 通过tag标签名查找元素
element = driver.find_elements_by_tag_name(name="input")
5. 通过link_text（链接文本）属性查找元素
# 定位到百度页面上获取“hao123”链接按钮，属性内容：
<a href="https://www.hao123.com" name="tj_trhao123" class="mnav">hao123</a>
# 通过链接文本查找元素
element = driver.find_element_by_link_text(link_text="hao123")
# 通过模糊匹配link_text方式查找元素
driver.find_element_by_partial_link_text(link_text="hao1")

三、通过XPath定位元素

XPath是XML文档中查找结点的语法。绝对的XPath是所有元素都从根元素的位置（html）开始定位，但这种方法会导致页面有轻微调整就会导致定位失败，故一般不采用绝对XPath的方式定位。
.：代表当前节点一般可有可无（添加在//前面）；
..：代表当前节点的父节点；
/：代表从根节点选取；
//： 代表从匹配选择的当前节点选择文档中的节点，一般为相对路径；
*：代表匹配任何元素节点（查找出所有符合条件的元素）；
@：代表选取的属性；

1. XPath直接定位id、name、class
例如：定位到百度输入框获得的属性内容：
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
# 通过xpath定位所有标签下满足id、name和class的元素
element1 = driver.find_element_by_xpath(xpath="//*[@id='kw']")
element2 = driver.find_element_by_xpath(xpath="//*[@name='wd']")
element3 = driver.find_element_by_xpath(xpath="//*[@class='s_ipt']")
# 通过xpath定位指定标签下满足id、name和class的元素
element1 = driver.find_element_by_xpath(xpath="//input[@id='kw']")
element2 = driver.find_element_by_xpath(xpath="//input[@name='wd']")
element3 = driver.find_element_by_xpath(xpath="//input[@class='s_ipt']")
2.XPath定位通过text()函数定位文本
# 定位到百度页面上获取“hao123”链接按钮，属性内容：
<a href="http://news.baidu.com" name="tj_trnews" class="mnav">新闻</a>
# 通过xpath定位text为新闻
element = driver.find_element_by_xpath(xpath="//*[text()='新闻']")
3.XPath定位特殊属性

当元素常用属性id、name和class均无时，可通过它自带的特殊属性定位。

# 定位到百度输入框获得的属性内容：
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
# 通过xpath定位autocomplete
element = driver.find_element_by_xpath(xpath="//*[@autocomplete='off']")
4.XPath通过层级定位

（1）从上往下层级定位：
父定位子，祖定位父再定位子（先获取元素的上一层，再定位它的子孙)
（2）从下往上层级定位：
子定位父，子定位祖辈

# 定位到百度输入框获得的属性内容：
<span id="s_kw_wrap" class="bg s_ipt_wr quickdelete-wrap">
  <span class="soutu-btn"></span>
  <input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">
  <a href="javascript:;" id="quickdelete" title="清空" class="quickdelete" style="top: 0px; right: 0px; display: none;">
  </a>
</span>
# 通过父子层级的方式定位a标签
element = driver.find_element_by_xpath(xpath="//span[@id='s_kw_wrap']/a")
# 通过“子定位父，再通过父定位它的兄弟”的方式定位a标签
element = driver.find_element_by_xpath(xpath="//input[@id='kw']/../a")
5.XPath通过索引定位

针对元素有多个兄弟且标签均一致时，则只能通过索引的方式定位。但注意，索引 是从1开始计算，而非是从0计算。

# 以下信息中若通过标签的方式定位
<div id="u1">
  <a href="http://news.baidu.com" name="tj_trnews" class="mnav">新闻</a>
  <a href="https://www.hao123.com" name="tj_trhao123" class="mnav">hao123</a>        
  <a href="http://map.baidu.com" name="tj_trmap" class="mnav">地图</a>
  <a href="http://v.baidu.com" name="tj_trvideo" class="mnav">视频</a>
</div>
# 通过索引定位第一个标签a（即新闻标签）
element = driver.find_element_by_xpath(xpath="//div[@id='u1']/a[1]")
6. XPath结合“逻辑运算”查找元素

与（and）：表示属性同时满足的元素；
或（or）：表示仅需满足任意一个属性的元素；

# 定位到百度输入框获得的属性内容：
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
# 通过xpath逻辑运算and查找
element = driver.find_element_by_xpath(xpath="//*[@name='wd' and autocomplete='off']")
# 通过xpath逻辑运算or查找
element = driver.find_element_by_xpath(xpath="//*[@name='wd' or autocomplete='off']")
7. XPath通过“模糊匹配”查找元素
# 以下信息中若通过标签的方式定位
<div id="u1">
  <a href="http://news.baidu.com" name="tj_trnews" class="mnav">新闻</a>
  <a href="https://www.hao123.com" name="tj_trhao123" class="mnav">hao123</a>        
  <a href="http://map.baidu.com" name="tj_trmap" class="mnav">地图</a>
  <a href="http://v.baidu.com" name="tj_trvideo" class="mnav">视频</a>
</div>
# 模糊定位
element = driver.find_element_by_xpath(xpath="//*[contains(@name, 'tj_trnew')]")
element = driver.find_element_by_xpath(xpath="//*[contains(text(), '新闻')]")
element = driver.find_element_by_xpath(xpath="//*[starts-with(@name, 'tj_trnew')]")

四、通过CSS定位元素

CSS定位类似XPath定位，但速度会比XPath快，故一般建议使用CSS定位。

1. css通过id定位
2. css通过class定位
3. css通过标签tag定位
4. css定位除id/class/tag外的其他属性
5. css通过tag属性与其他属性组合来定位
# 定位到百度输入框获得的属性内容：
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
# css定位id
element_css_id = driver.find_element_by_css_selector(css_selector="#kw")
# css定位class
element_css_class = driver.find_element_by_css_selector(".s_ipt")
# css定位tag
element_css_tag = driver.find_element_by_css_selector("input")
# css定位其他属性（name、autocomplete)
element_css_name = driver.find_element_by_css_selector("[name='wd']")
element_css_autocomplete = driver.find_element_by_css_selector("[autocomplete='off']")

# css定位tag与id属性的结合
element_css_tag_id = driver.find_element_by_css_selector("input#kw")
element_css_tag_id1 = driver.find_element_by_css_selector("input[id='kw']")
# css定位tag与class属性的结合
element_css_tag_class = driver.find_element_by_css_selector("input.s_ipt")
element_css_tag_class1 = driver.find_element_by_css_selector("input[class='s_ipt']")
# css定位tag与其他属性（name、autocomplete）的结合
element_css_tag_name = driver.find_element_by_css_selector("input[name='wd']")
element_css_tag_autocomplete = driver.find_element_by_css_selector("input[autocomplete='off']")
6. css通过层级定位

向下层级之间用 > 号连接，如，父属性>子属性

# 定位百度页面的“百度一下”按钮
<span class="bg s_btn_wr">
  <input type="submit" id="su" value="百度一下" class="bg s_btn">
</span>
element_css_down = driver.find_element_by_css_selector("span[class='bg s_btn_wr']>input")
7. css通过索引定位

索引的写法：tag属性:nth-child(index)，index从1开始，表示第1个小孩。

# 定位百度网址右上角的“新闻”链接
<div id="u1">
  <a href="http://news.baidu.com" name="tj_trnews" class="mnav">新闻</a>
  <a href="https://www.hao123.com" name="tj_trhao123" class="mnav">hao123</a>
  <a href="http://map.baidu.com" name="tj_trmap" class="mnav">地图</a>
  <a href="http://v.baidu.com" name="tj_trvideo" class="mnav">视频</a>
</div>
# css通过索引定位“新闻”
element_css_index1 = driver.find_element_by_css_selector("div[id='u1']>a:nth-child(1)")
# 这种#号连接是id属性所特有的写法，class属性可用.连接，但其他属性仅可通过[]来输写（tag属性组合时有写）
element_css_index2 = driver.find_element_by_css_selector("div#u1>a:nth-child(1)")
8. css多属性同时满足的方式定位

写法：tag属性[属性1='属性1的值'][属性2='属性2的值']

# 定位百度输入框
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
# css通过多属性同时满足的方式定位
element_css_logic = driver.find_element_by_css_selector("input[id='kw'][name='wd']")

五、通过find_element()方法定位

上一篇下一篇

猜你喜欢

热点阅读