selenium应用之“定位单元素”

一、介绍

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

二、元素基本的定位方法

1. 通过id查找元素

• find_element_by_id(id_)
  id_：页面上第一个与该id所匹配的元素将被执行操作，若在当前页面上未找到此元素，则抛出NoSuchElementException异常。

# 定位到百度输入框获得的属性内容：
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
# 通过id属性查找元素
element = driver.find_element_by_id(id_="kw")

2. 通过name属性查找元素

• find_element_by_name(name)
  name：页面上第一个与该name所匹配的元素将被执行操作，若在当前页面上未找到此元素，则抛出NoSuchElementException异常。

# 定位到百度输入框获得的属性内容：
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
# 通过name查找元素：
element = driver.find_elements_by_name(name="wd")

3. 通过class属性查找元素

• find_element_by_class_name(name)
  name：页面上第一个与该class所匹配的元素将被执行操作，若在当前页面上未找到此元素，则抛出NoSuchElementException异常。

# 定位到百度输入框获得的属性内容：
<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（标签名）属性查找元素

• find_element_by_tag_name(name)
  name：页面上第一个与该tag所匹配的元素将被执行操作，若在当前页面上未找到此元素，则抛出NoSuchElementException异常。
  标签名即以尖括号（<XX>）包围的关键词。通过标签名定位元素的方法不经常使用，由于一个页面上会存在很多相同的标签。

# 定位到百度输入框获得的属性内容：
<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（链接文本）属性查找元素

• find_element_by_link_text(link_text)
  link_text：页面上第一个与该链接文本所匹配的元素将被执行操作，若在当前页面上未找到此元素，则抛出NoSuchElementException异常。
  HTML使用<a>标签来创建超链接（比如，<a href="url">Link text</a>），<a>与</a>中间的值即为链接文本。

• find_element_by_partial_link_text(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

• find_element_by_xpath(xpath="//标签名[@属性='属性值']")

例如：定位到百度输入框获得的属性内容：
<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()函数定位文本

• find_element_by_xpath(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通过“模糊匹配”查找元素

• find_element_by_xpath(xpath="//标签名[contains(@属性, '属性值')]")
  通过contains()模糊定位包含某个属性值的元素
• find_element_by_xpath(xpath="//标签名[contains(text(), '文本内容')]")
  通过contains()模糊定位text文本内容
• find_element_by_xpath(xpath="//标签名[starts-with(@属性, '属性值')]")
  通过starts-with()模糊定位以XX开头的属性值的元素
  ......

# 以下信息中若通过标签的方式定位
<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定位

• find_element_by_css_selector(css_selector="#id属性")
  css_selector参数：id属性前加#号

2. css通过class定位

• find_element_by_css_selector(css_selector=".class属性")
  css_selector参数：class属性前加 .号

3. css通过标签tag定位

• find_element_by_css_selector(css_selector="tag属性")
  css_selector参数：tag属性

4. css定位除id/class/tag外的其他属性

• find_element_by_css_selector(css_selector="[属性='属性值']")
  css_selector参数：[属性='属性值']

5. css通过tag属性与其他属性组合来定位

• tag与其他属性结合，通用的定位方式
  find_element_by_css_selector(css_selector="tag属性[属性='属性值']")
• tag与id属性结合，还可使用下面这种写法
  find_element_by_css_selector(css_selector="tag属性#id属性值")
• tag与class属性结合，还可使用下面这种写法
  find_element_by_css_selector(css_selector="tag属性.class属性值")

# 定位到百度输入框获得的属性内容：
<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()方法定位

• find_element(by=By.ID, value=None)
  by为元素定位的方式，value为元素定位方式的值。
  所有的find_element_by_id/class/name/...均是通过返回find_element()方法值的方式来查找元素的，故此方式目前使用较少。