Selenium元素定位API介绍

发表于:2020-9-29 09:55

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:强风吹拂    来源:博客园

  元素的定位和操作是自动化测试的核心部分,其中操作又是建立在定位的基础上的,举例:一个对象就是一个人,我们可以通过身份证号、姓名或者他的住址找到这个人。那么一个web对象也是一样的,我们可以通过唯一区别于其它元素的属性来定位这个元素。
  元素识别
  利用Chrome浏览器开发者工具
  打开Chrome浏览器,按F12或依次点击菜单—更多工具—开发者工具;
  切换到Elements页签,在Elements下点击左上方小箭头可以指定页面元素,查看对应代码
  利用火狐浏览器开发者工具
  打开火狐浏览器,按F12或点击菜单—web开发者—查看器;
  进入到查看器页签,在查看器下点击左上方小箭头可以指定页面元素,查看对应代码
  基本元素定位API使用
  1.通过id定位元素
driver.find_element_by_id("id_vaule")
  2.通过name定位元素
driver.find_element_by_name("name_vaule")
  3.通过class_name定位元素
driver.find_element_by_class_name("class_name")
  4.通过tag_name定位元素
driver.find_element_by_tag_name("tag_name_vaule")
  5.通过link定位
  driver.find_element_by_link_text("text_vaule")
  driver.find_element_by_partial_link_text("text_vaule") #部分link
  6.通过xpath定位元素
driver.find_element_by_xpath("xpath_syntax")
  7.通过css定位元素
  driver.find_element_by_css_selector(“css_syntax”)
  示例
  示例1:
 <input id="account" class="form-control" name="account" value="demo" autofocus="" type="text">
  1.通过id定位元素
driver.find_element_by_id('account')
  2.通过name定位元素
  driver.find_element_by_name('account')
  3.通过class_name(样式名)定位元素
  driver.find_element_by_class_name('form-control')
  4.通过tag_name(标签名)定位元素
  driver.find_element_by_tag_name('input')
  备注:tag_name应该是所有定位方式中最不靠谱的一种,因为在一个页面上相同tag_name的元素极其容易出现
  示例2:
  1.通过name定位元素
 driver.find_element_by_name('tj_news')
  2.通过class_name定位元素
 driver.find_element_by_class_name('mnav')
  3.通过link_text定位元素
  driver.find_element_by_link_text('新闻')
  4.当一个文字很长的链接时,我们可以只取其中的部分,只要取的部分可以唯一标识元素
  driver.find_element_by_partial_link_text('新')
  元素定位API之XPATH
  XPATH是什么?
  XPATH是一门在XML文档中查找信息的语言,XPATH可用来在XML文档中对元素和属性进行遍历,主流的浏览器都支持XPATH,因为HTML页面在DOM中表示为XHTML文档。
  Selenium WebDriver支持使用XPATH表达式来定位元素。
  Xpath常用6种定位元素的方法
  绝对路径
  相对路径
  元素索引
  元素属性
  元素属性值
  元素文本
  1、通过绝对路径定位
  绝对路径的开头是一个斜线(/),从网页的根节点html开始,逐层去查找需要定位的元素。
  此方法缺点显而易见,当页面元素位置发生改变时,都需要修改,因此,并不推荐使用。
  举例:百度搜索框绝对路径定位
  driver.find_element_by_xpath('/html/body/div[1]/div[1]/div/div[1]/div/for m/span[1]/input')
  备注:当同一层次有多个相同的元素时,使用下标区分,下标从1开始
  2、通过相对路径定位
  相对路径的开头是两个斜线(//),表示文件中所有符合模式的元素都会被选出来,即使是处于树中不同的层级也会被选出来。
  举例:百度搜索框相对路径定位
  备注:以上都可以定位到百度搜索框,相对路径的长度和开始位置并不受限制,可以采用从后往前逐层定位直到定位到即可的方式去定位。
  driver.find_element_by_xpath('//span[1]/input')
        driver.find_element_by_xpath(’//form/span[1]/input') 
  3、通过元素索引定位
  遇到同层级相同标签元素时,可以使用索引(下标)表示,索引的初始值为1
  举例:定位百度hao123链接
  driver.find_element_by_xpath('//div[3]/a[2]')
  4、使用元素属性定位
  元素属性定位要求属性能够定位到唯一一个元素,如果存在多个相同条件的标签,默认定位第一个,具体格式://标签名[@属性="属性值"]
  支持使用and和or关键字,多个属性一起定位元素。
  举例:
  driver.find_element_by_xpath("//a[@name='tj_trnews']")       
  driver.find_element_by_xpath("//a[@name='tj_trnews' and @class='mnav']")
  driver.find_element_by_xpath("//a[@name='tj_trnews’ or @class='mnav']")
  备注:
  Xpath支持通配符号 * 号,通过属性定位还可以如下写法:
  driver.find_element_by_xpath("//*[@*='tj_trnews']")
  5、使用部分属性值匹配(也称为模糊方法定位)
  属性值如果太长或网页中的元素属性动态变化,可以使用此方法元素属性值开头包含内容:starts-with()
  driver.find_element_by_xpath("//a[starts-with(@name,'tj_trhao')]")
  元素属性值结尾包含内容:substring()
  driver.find_element_by_xpath("//a[substring(@name,9)='123']")
  元素属性值结尾包含内容:contains()
  driver.find_element_by_xpath("//a[contains(@name,'hao')]")
  备注:XPath1.0中没有ends-with函数,2.0有,现在浏览器实现的都是1.0
  6、使用元素文本定位
  元素文本在xpath中可以通过text()函数获取,也可以用其来进行元素定位。
  driver.find_element_by_xpath("//a[text()='新闻']")
  driver.find_element_by_xpath("//a[contains(text(),'新')]")
  元素定位API之Css_selector
  Css_selector是什么?
  CSS是一个被用来描述如何在屏幕等处渲染HTML和XML文档的语言。CSS使用选择器来为文档中的元素绑定样式属性。
  选择器(selector)是用来在树中匹配元素的模式,选择器对HTML和XML进行了优化,被设计用来在注重性能的代码中执行。Selenium官网的Document里极力推荐使用Css_selector,而不是XPath来定位元素。
  Css_selector常用6种定位元素的方法
  绝对路径
  相对路径
  元素属性
  元素属性值
  查询子元素
  查询兄弟元素
  1、通过绝对路径定位
  绝对路径是从网页的根节点html开始,逐层去查找需要定位的元素。
  此方法缺点显而易见,当页面元素位置发生改变时,都需要修改,因此,并不推荐使用。
  举例:百度搜索框绝对路径定位
  driver.find_element_by_css_selector('html body div#wrapper div#head div.head_wrapper div.s_form div.s_form_wrapper.soutu-env-mac.soutuenv-index form#form span.bg.s_ipt_wr.quickdelete-wrap input#kw')
  备注:当同一层次有多个相同的元素时,使用id或class区分,遇到i d用#号,遇到class用.号
  2、通过相对路定位
  相对路径表示文件中所有符合模式的元素都会被选出来,即使是处于树中不同的层级也会被选出来。
  举例:百度搜索框相对路径定位
  driver.find_element_by_css_selector(‘#kw')       
  driver.find_element_by_css_selector(’input#kw') 
  备注:以上都可以定位到百度搜索框,相对路径的长度和开始位置并不受限制,可以采用从后往前逐层定位直到定位到即可的方式去定位。
  3、使用元素属性定位
  元素属性定位要求属性能够定位到唯一一个元素,如果存在多个相同条件的标签,默认定位第一个,具体格式://标签名[属性="属性值"]
  支持使用多个属性一起定位元素。
  举例:
  driver.find_element_by_css_selector("a[name='tj_trnews']")
  driver.find_element_by_css_selector("a[name='tj_trnews'][class='mnav']")
  4、使用部分属性值匹配(也称为模糊方法定位)
  属性值如果太长或网页中的元素属性动态变化,可以使用此方法元素属性值开头包含内容:^=
  driver.find_element_by_xpath("a[name^='tj_trhao']")    
  元素属性值结尾包含内容:$=
  driver.find_element_by_xpath("a[name$='123']")
  元素属性值结尾包含内容:*=
  driver.find_element_by_xpath("a[name*='hao']")
  5、查询子元素
  1.子元素 A>B
  driver.find_element_by_css_selector('form>span>input')
  2.后代元素 A空格B(类似 > )
  driver.find_element_by_css_selector('form span input')
  3.第一个后代元素 first-child
  driver.find_element(By.CSS_SELECTOR,'div#u1 a:first-child')
  4.最后一个后代元素 last-child
  driver.find_element(By.CSS_SELECTOR,'div#u1 a:last-child')
  5.第n个子元素 nth-child(N) [类同:nth-of-type(N)]
  driver.find_element(By.CSS_SELECTOR,'div#u1 a:nth-child(3)')
  6、查询兄弟元素
  1.同层级下一个元素 +
  driver.find_element(By.CSS_SELECTOR,'div#u1 a +a')
  2.选择同层级多个相同标签的元素
  driver.find_elements(By.CSS_SELECTOR,'div#u1 a ~a')
  备注:
  +号可以多次使用
  ~号一般返回的是多个元素,要用find_elements接收
  定位元素代码形式:
  from selenium.webdriver.common.by import By

  driver.find_element(By.ID,‘kw’)  #框架中适合该种形式
  driver.find_element(By.CSS_SELECTOR,'div#u1 a +a')

  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号