web自动化——元素定位

我们在做WEB自动化时,最根本的就是操作页面上的元素,首先我们要能找到这些元素,然后才能操作这些元素。

元素定位的8种方法:

  id、name、class、tag、link、partail_link、xpath、css_selector

1、id定位: find_element_by_id()

从上面定位到的搜索框属性中,有个id="kw"的属性,我们可以通过这个id定位到这个搜索框

代码:

# coding = utf-8
from time import sleep
from selenium import webdriver

# 驱动文件路径
driverfile_path = r‘D:\coship\Test_Framework\drivers\chromedriver.exe‘
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r‘https://www.baidu.com/‘)
# 通过id定位搜索框,并输入selenium
driver.find_element_by_id(‘kw‘).send_keys(‘selenium‘)
# 等待5秒
sleep(5)
# 退出
driver.quit()

2、name定位: find_element_by_name()

3、class定位:find_element_by_class_name()

4、tag定位:find_element_by_tag_name()

  我们就知道HTML是通过tag来定义功能的,比如input是输入,table是表格,等等...。每个元素其实就是一个tag,一个tag往往用来定义一类功能,我们查看百度首页的html代码,可以看到有很多div,input,a等tag,所以很难通过tag去区分不同的元素。基本上在我们工作中用不到这种定义方法,仅了解就行。

5、link定位:find_element_by_link_text()

6、partial_link定位:find_element_by_partial_link_text()

有时候一个超链接的文本很长很长,我们如果全部输入,既麻烦,又显得代码很不美观,这时候我们就可以只截取一部分字符串,用这种方法模糊匹配了。

我们用这种方法来定位百度首页的“新闻”超链接。

  代码:

# coding = utf-8
from time import sleep
from selenium import webdriver

# 驱动文件路径
driverfile_path = r‘D:\coship\Test_Framework\drivers\chromedriver.exe‘
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r‘https://www.baidu.com/‘)
# 通过partial_link定位"新闻"这个链接并点击
driver.find_element_by_partial_link_text(‘闻‘).click()
# 等待5秒
sleep(5)
# 退出
driver.quit()

  前面介绍的几种定位方法都是在理想状态下,有一定使用范围的,那就是:在当前页面中,每个元素都有一个唯一的id或name或class或超链接文本的属性,那么我们就可以通过这个唯一的属性值来定位他们。但是在实际工作中并非有这么美好,有时候我们要定位的元素并没有id,name,class属性,或者多个元素的这些属性值都相同,又或者刷新页面,这些属性值都会变化。那么这个时候我们就只能通过xpath或者CSS来定位了。

7、xpath定位:find_element_by_xpath()

  代码:

# coding = utf-8
from time import sleep
from selenium import webdriver

# 驱动文件路径
driverfile_path = r‘D:\coship\Test_Framework\drivers\chromedriver.exe‘
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r‘https://www.baidu.com/‘)
# 通过xpath定位搜索框,并输入selenium
driver.find_element_by_xpath("//*[@id=‘kw‘]").send_keys(‘selenium‘)
# 等待5秒
sleep(5)
# 退出
driver.quit()

8、CSS定位:find_element_by_css_selector()

这种方法相对xpath要简洁些,定位速度也要快些,但是学习起来会比较难理解,这里只做下简单的介绍。

  CSS定位百度搜索框代码:

# coding = utf-8
from time import sleep
from selenium import webdriver

# 驱动文件路径
driverfile_path = r‘D:\coship\Test_Framework\drivers\chromedriver.exe‘
# 启动浏览器
driver = webdriver.Chrome(executable_path=driverfile_path)
# 打开百度首页
driver.get(r‘https://www.baidu.com/‘)
# 通过CSS定位搜索框,并输入selenium
driver.find_element_by_css_selector(‘#kw‘).send_keys(‘selenium‘)
# 等待5秒
sleep(5)
# 退出
driver.quit()

xpath和css定位元素的讲解示例代码:

 1   <html>
 2
 3       <head>
 4           ...........
 5       </head>
 6
 7       <body>
 8           <div  name="demo">
 9                     <span1>
10                         <p>这是一段实例文本</p>
11                     </span1>
12                <span2>
13                   <P>文本2</P>
14                </span2>
15           </div>
16       </body>
17
18  </html>    

  一般在浏览器自带的开发者工具中,使用$x("xpath表达式")验证xpath的正确性,$$("css Selector")验证css选择器的正确性。

一、xpath的定位方法:$x("xpath路径")

    A、$x( "//元素名[@属性名=‘属性值‘] [序号]" )               ——使用元素的开始标签中的 “属性” 来定位

      例如:定位<div>元素:$x("//div[@name=‘demo‘]")

    B、$x( "//元素名[text()=‘文本内容‘] [序号]" )       ——使用开始标签和结束标签之间的文本内容来定位

       例如:定位<p>元素:$x("//p[text()=‘这是一段实例文本‘]")

    1、使用“//”表示在整个页面的所有元素中进行全路径的查找(常用“//”来减少中间层级的元素,用于相对路径查找,以//开头,表示在文档任意层级位置开始查找,表达式中的//,则表示在当前层级内任意位置开始查找,类比于在某个文件夹下搜索文件。),

    2、如果换成“/”表示在当前指定的元素中进行查找(用于绝对路径查找,以/html开头的XPath表达式从HTML文档的最上级元素开始逐层查找。类比于在windows文件系统中通过层层打开文件夹找文件。),例如:

      定位<div>元素:$x("/html/body/div")

      定位<p>元素:$x("/html/body/div/span1/p")

    3、也可以“//”和“/”混合使用:

      定位<p>元素:$x("//body/div//p[text()=‘文本2‘]")

    

    a、定位元素时的路径,除了使用“=”方式,也可以使用“contains”方式(对应的属性值或者文本内容可以只包含其中一部分,相当于模糊查询)。

      语法是:contains(@属性名,‘属性值的一部分‘)   或者   contains(text(),‘文本内容的一部分‘)

      查找<div>元素:  $x("//div[contains(@name,‘de‘)]")    或者  $x("//p[contains(text(),‘这是‘)]")

    b、类似于contains的用法还有:stars-with等等,

      strats-with(@属性,"属性值的一部分"):表示属性以某些内容开头

  1、某一个元素定位成功后还可以使用  “/” 、"//"   接上后续的子孙元素。

      2、在xpath当中,下标的序号从1开始。

3、$x()获取出来的内容会是一个数组存放的形式,可以通过下标来进行选择,下标从0开始。

  假设上述的<span1>和<span2>的名称都是<span>时,那么 $x("//body/div/<span>][1]")  和 $x("//body/div/<span>]")[0] 都是定位到的第一个<span>元素。

二、css选择器的定位方法: $("css选择器")和 $$("css选择器")

  css:cascading style sheet 层叠样式表,用于给HTML当中的元素指定样式。

  

  

css选择器的定位方法: $("css选择器")和 $$("css选择器") 的区别:

       $(“selector”)找到的元素只会匹配selector的第一个元素,

    而 $$("selector")匹配到的是所有符合selector的元素的数组。

html的元素层级:父元素、子元素、祖宗元素、子孙元素、兄弟元素

  

  “=”也可以搭配 “ ^ ” 、" $ " 或者 " * "使用,

  如:E[attr^=‘value‘] 表示以value属性中开头的元素E;

    E[attr$=‘value‘] 表示以value属性中结尾的元素E;

    E[attr*=‘value‘] 表示属性中包含value的元素E;

    css选择器中,  " selector1  selector2 "  的空格相当于xpath中的“//”,

    css选择器中“selector1 > selector2”的“>”相当于xpath中的“/”。

三、元素定位成功后的DOM操作语法

定位元素后,可以通过 “.” 运算符获取元素中的属性:

  innerHTML:获取元素中包含其他子元素在内的所有内容
  innerText:获取元素中所有的文本
  text:获取元素中的文本,适用范围比innertext少,有些元素不支持。
  value:通过设置input或者其他输入框中的值,来调试网页

在HTML中某些事件发生时,可以调用JavaScript脚本来处理事件响应。

  例如: <button type="button" onclick="myFunction()">Try it</button>

常用的一些事件属性比如: onclick、onblur、onfocus、oninput 等等。

通过DOM语法,也可以对HTML页面中的元素进行调试和操作。常用的dom语句和操作可以在浏览器的console中进行调试,这也是进行UI自动化测试的手段之一。

可以操作的DOM语法:
  innerHTML:获取元素中包含其他子元素在内的所有内容
  innerText:获取元素中所有的文本
  text:获取元素中的文本,适用范围比innertext少,有些元素不支持。
  value:通过设置input或者其他输入框中的值,来调试网页
  click():通过点击方法,操作对应的元素。

原文地址:https://www.cnblogs.com/zzp-biog/p/10171750.html

时间: 2024-08-01 00:10:57

web自动化——元素定位的相关文章

Web端自动化元素定位方法

版本迭代周期越来越短?需求越来越多?测试工作量越来越大?怎么保证质量?怎么保证上线周期? 随着互联网的快速发展,越来越多的测试人员遇到上述所说的问题.如何实现既提高测试效率和覆盖率,又节约测试成本,是每一个企业追求的目标.为了解决上述的问题,越来越多的公司开始加入自动化测试.以下是一些常用的定位方法介绍 一.常用方法 1)通过class属性定位 driver.findElement(By.className("spread")).sendKeys("你好"); 2)

自动化——元素定位

元素定位的8种方法 讲解示例: 1 <html> 2 3 <head> 4 ........... 5 </head> 6 7 <body> 8 <div name="demo"> 9 <span1> 10 <p>这是一段实例文本</p> 11 </span1> 12 <span2> 13 <P>文本2</P> 14 </span2>

Appium+python自动化-元素定位uiautomatorviewer的使用

前言 环境搭建好了,下一步元素定位,元素定位本篇主要介绍如何使用uiautomatorviewer,通过定位到页面上的元素,然后进行相应的点击等操作. uiautomatorviewer是android-sdk自带的一个元素定位工具,非常简单好用,使用uiautomatorviewer,你可以检查一个应用的UI来查看应用的布局和组件以及相关的属性. 一.启动uiautomatorviewer.bat 1.打开目录D:\androidsdk\android-sdk-windows\tools 14

web自动化常用定位和方法总结

一. driver常用方法 二. 常用定位 三. 元素在页面不可见区域 四. iframe的操作 五. 页面弹出框:加等待时间 六. windows弹出框 七. 鼠标操作 八. 下拉列表 九. 窗口切换 十. 上传操作 十一. 富文本框的处理 参见文章:<selenium对富文本框的处理> 十二. 绕过登录 参见文章:<利用ChromeOptions()加载用户配置> <selenium webdriver如何添加cookie> 原文地址:https://www.cnb

web自动化基础

自动化 作用:多用于回归测试,用代码执行重复的工作 工具: Python + selenium(框架) + unittest + HtmlTestRunner selenium:web测试框架,封装了各大浏览器驱动的api unittest:单元测试框架,加载所有用例,执行 HtmlTestRunner:生成Html格式测试报告 类别: 接口自动化 web自动化 app自动化 web自动化: 元素定位: id定位 id=kw name定位 name=wd class定位 class=s_ipt

python+Appium自动化:id元素定位

元素定位 与web自动化一样,app自动化元素定位也是非常重要的一环,,appium也是提供了很多元素定位的方法,比如:id.name.class.层级定位等等. 元素定位方式 id name class List定位 相对定位 Xpath定位 H5页面元素定位 Uiautomator定位 首先可以进入SDK中的tools文件夹中打开uiautimatorviewer.bat,用于元素定位 测试场景,启动淘宝app,同意温馨提示,进入首页 id定位 Appium中可以使用find_element

Selenium2学习-002-Selenium2 Web 元素定位及 XPath 编写演示示例

此文主要对 Selenium2 的 Web 元素定位及 XPath 编写示例,敬请各位亲们参阅,共同探讨.若有不足之处,敬请各位大神指正,不胜感激! 通过 Firefox(火狐)浏览器的插件 Firebug + xpath checker ,结合三个示例来演示实现页面元素的定位及 xpath 路径编写.下面就一起开始我们的 Web 页面元素定位之旅吧... 首先,启动 Firefox(火狐)浏览器,并启动 Firebug 插件(按 F12 按键即可) 一.百度搜索框定位(元素的 ID) 网址输入

web页面元素的8种定位方法

一.web页面元素定位工具介绍 1.打开google浏览器,按F12进入开发者模式,如下图: 2.用鼠标点击下图红色框中的箭头——然后鼠标移动到web页面的元素上(此处为百度框),会自动定位到对应的html代码,如下图: 二.web页面元素的8种定位方法: 1.通过元素的id属性来定位元素——id是唯一标识(每个id都是不一样的) driver.find_element_by_id("kw")     1 from selenium import webdriver 2 driver=

Selenium Web 自动化 - 如何找到元素

Selenium Web 自动化 - 如何找到元素 2016-07-29 1. 什么是元素? 元素:http://www.w3school.com.cn/html/html_elements.asp 2. 定位方式解析 Selenium WebDriver 提供一个先进的技术来定位 web 页面元素.Selenium 功能丰富的API 提供了多个定位策略如:Name.ID.CSS 选择器.XPath 等等,如下图所示: 一般会用ID来定位,因为它是唯一的,xpath也比较通用,火狐浏览器插件:f