Selenium3 + Python3自动化测试系列二——selenium元素定位

一、selenium元素定位

Selenium对网页的控制是基于各种前端元素的,在使用过程中,对于元素的定位是基础,只有准去抓取到对应元素

才能进行后续的自动化控制,我在这里将对selenium8种元素基本定位方式进行总结归纳一下。

Selenium提供了8种定位方式。

    • id
    • name
    • class name
    • tag name
    • link text
    • partial link text
    • xpath
    • css selector

这8种定位方式在Python selenium中所对应的方法为:

    • find_element_by_id()
    • find_element_by_name()
    • find_element_by_class_name()
    • find_element_by_tag_name()
    • find_element_by_link_text()
    • find_element_by_partial_link_text()
    • find_element_by_xpath()
    • find_element_by_css_selector()

二、定位方法的用法

以百度首页https://www.baidu.com/,部分前端页面代码为例。源码如下:

<span class="bg s_ipt_wr quickdelete-wrap">
  <span class="soutu-btn"></span>
  <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
  <a href="javascript:;" id="quickdelete" title="清空" class="quickdelete" style="top: 0px; right: 0px; display: none;"></a>
</span> <span class="bg s_btn_wr">
  <input type="submit" id="su" value="百度一下" class="bg s_btn">
</span>

  通过id定位,find_element_by_id()

from selenium.webdriver import Chrome
import time
driver = Chrome("C:\Program Files (x86)\Google\Chrome\Application\chromedriver.exe")
driver.get('https://www.baidu.com')
#利用find_element_by_id定位元素位置并模拟按键输入“博客园”,点击百度一下按钮搜索
driver.find_element_by_id("kw").send_keys("博客园")
driver.find_element_by_id("su").click()
time.sleep(5)
driver.quit()

通过name定位,find_element_by_name()

driver.find_element_by_name("wd")

通过class name定位,find_element_by_class_name()

driver.find_element_by_class_name("s_btn")

上面的模拟按键输入“博客园”,点击百度一下按钮搜索,我们换个方式用name和class_name来实现同样的功能。

如下所示:

from selenium import webdriver
import time driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')
#利用find_element_by_id定位元素位置并模拟按键输入“博客园”,点击百度一下按钮搜索
driver.find_element_by_name("wd").send_keys("博客园")
driver.find_element_by_class_name("s_btn").click()
time.sleep(5)
driver.quit()

通过tag name定位,find_element_by_tag_name()

find_element_by_tag_name("input")

通过标签名去定位的方式一般是这样的:find_element_by_tag_name("input")

可见仅仅通过标签名去定位时,一般一种标签在一个页面里面会出现不止一次甚至大量出现,

这种定位方式的作用不是很大,所以用的也就比较少。

通过xpath定位,find_element_by_xpath()

xpath是XML路径语言,它可以用来确定xml文档中的元素位置,通过元素的路径来完成对元素的查找。

HTML就是XML的一种实现方式,所以xpath是一种非常强大的定位方式。

xpath定位有N种写法,这里列几个常用写法:

driver.find_element_by_xpath("//*[@id='kw']")

driver.find_element_by_xpath("//*[@name='wd']")

driver.find_element_by_xpath("//input[@class='s_ipt']")

driver.find_element_by_xpath("//span[@class='soutu-btn']/input")

driver.find_element_by_xpath("//input[@id='kw' and @name='wd']")

from selenium.webdriver import Chrome
import time
driver = Chrome("C:\Program Files (x86)\Google\Chrome\Application\chromedriver.exe")
driver.get('https://www.baidu.com')
#利用多种方法find_element_by_xpath()定位元素位置并模拟按键输入“博客园”,点击百度一下按钮搜索
driver.find_element_by_xpath("//*[@id='kw']").send_keys("博客园")
driver.find_element_by_xpath("//*[@name='wd']").send_keys("博客园")
driver.find_element_by_xpath("//input[@class='s_ipt']").send_keys("博客园")
driver.find_element_by_xpath("//span[@class='soutu-btn']/input").send_keys("博客园")
driver.find_element_by_xpath("//input[@id='kw' and @name='wd']").send_keys("博客园")
driver.find_element_by_id("su").click()
time.sleep(5)
driver.quit()

通过css定位,find_element_by_css_selector()

CSS属性定位可以比较灵活地选择控件的任意属性,定位方式也会比xpath快。

driver.find_element_by_css_selector("#kw")

driver.find_element_by_css_selector("[name=wd]")

driver.find_element_by_css_selector(".s_ipt")

driver.find_element_by_css_selector("span.soutu-btn> input#kw")

值得注意的是,在css里面下级标签元素用>连接,如果class里面有空格,空格用.进行连接。

from selenium.webdriver import Chrome
import time
driver = Chrome("C:\Program Files (x86)\Google\Chrome\Application\chromedriver.exe")
driver.get('https://www.baidu.com')
#利用find_element_by_css_selector()定位元素位置并模拟按键输入“博客园”,点击百度一下按钮搜索
driver.find_element_by_css_selector("#kw").send_keys("博客园")
driver.find_element_by_css_selector("[name=wd]").send_keys("博客园")
driver.find_element_by_css_selector(".s_ipt").send_keys("博客园")
driver.find_element_by_css_selector("span.soutu-btn> input#kw").send_keys("博客园")
driver.find_element_by_css_selector("#su").click()
time.sleep(5)
driver.quit()

通过link text定位,find_element_by_link_text()find_element_by_partial_link_text()

这两种定位方式是专门用于定位超链接的,也就是对应html页面中的<a>标签,

括号里传的值就是a标签中的超链接文字,

两者的区别在于一个是完整的超链接文字,一个是可以只写部分超链接文字。

前端实例源码如下:

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

比如点击百度首页中右上角的新闻和hao123超链接,可以这样去定位:

driver.find_element_by_link_text("新闻").click()
driver.find_element_by_link_text("hao123").click()
driver.find_element_by_partial_link_text("新").click()
driver.find_element_by_partial_link_text("hao").click()
driver.find_element_by_partial_link_text("").click()

  关于xpaht和css的定位比较复杂,请参考W3School具体学习:

xpath语法

css选择器

三、定位一组元素

  WebDriver还提供了8种用于定位一组元素的方法。

find_elements_by_id()

find_elements_by_name()

find_elements_by_class_name()

find_elements_by_tag_name()

find_elements_by_link_text()

find_elements_by_partial_link_text()

find_elements_by_xpath()

find_elements_by_css_selector()

定位一组元素的方法与定位单个元素的方法类似,唯一的区别是在单词element后面多了一个s表示复数。

我们来举个栗子演示一下如何使用:

from selenium.webdriver import Chrome
from time import sleep driver = Chrome("C:\Program Files (x86)\Google\Chrome\Application\chromedriver.exe")
driver.get("https://www.baidu.com") #定位所有的a标签并打印,循环遍历出每一条搜索结果的标题
texts = driver.find_elements_by_xpath('//div/a')
for t in texts:
print(t.text) sleep(5)
driver.quit()
上一篇:ajax和jquery使用技巧


下一篇:如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性