array(2) { ["docs"]=> array(10) { [0]=> array(10) { ["id"]=> string(3) "428" ["text"]=> string(77) "Visual Studio 2017 单独启动MSDN帮助(Microsoft Help Viewer)的方法" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(8) "DonetRen" ["tagsname"]=> string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer" ["tagsid"]=> string(23) "[401,402,403,"300",404]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400964" ["_id"]=> string(3) "428" } [1]=> array(10) { ["id"]=> string(3) "427" ["text"]=> string(42) "npm -v;报错 cannot find module "wrapp"" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "zzty" ["tagsname"]=> string(50) "node.js|npm|cannot find module "wrapp“|node" ["tagsid"]=> string(19) "[398,"239",399,400]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400760" ["_id"]=> string(3) "427" } [2]=> array(10) { ["id"]=> string(3) "426" ["text"]=> string(54) "说说css中pt、px、em、rem都扮演了什么角色" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(12) "zhengqiaoyin" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400640" ["_id"]=> string(3) "426" } [3]=> array(10) { ["id"]=> string(3) "425" ["text"]=> string(83) "深入学习JS执行--创建执行上下文(变量对象,作用域链,this)" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "Ry-yuan" ["tagsname"]=> string(33) "Javascript|Javascript执行过程" ["tagsid"]=> string(13) "["169","191"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511399901" ["_id"]=> string(3) "425" } [4]=> array(10) { ["id"]=> string(3) "424" ["text"]=> string(30) "C# 排序技术研究与对比" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "vveiliang" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(8) ".Net Dev" ["catesid"]=> string(5) "[199]" ["createtime"]=> string(10) "1511399150" ["_id"]=> string(3) "424" } [5]=> array(10) { ["id"]=> string(3) "423" ["text"]=> string(72) "【算法】小白的算法笔记:快速排序算法的编码和优化" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "penghuwan" ["tagsname"]=> string(6) "算法" ["tagsid"]=> string(7) "["344"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511398109" ["_id"]=> string(3) "423" } [6]=> array(10) { ["id"]=> string(3) "422" ["text"]=> string(64) "JavaScript数据可视化编程学习(二)Flotr2,雷达图" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "chengxs" ["tagsname"]=> string(28) "数据可视化|前端学习" ["tagsid"]=> string(9) "[396,397]" ["catesname"]=> string(18) "前端基本知识" ["catesid"]=> string(5) "[198]" ["createtime"]=> string(10) "1511397800" ["_id"]=> string(3) "422" } [7]=> array(10) { ["id"]=> string(3) "421" ["text"]=> string(36) "C#表达式目录树(Expression)" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "wwym" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(4) ".NET" ["catesid"]=> string(7) "["119"]" ["createtime"]=> string(10) "1511397474" ["_id"]=> string(3) "421" } [8]=> array(10) { ["id"]=> string(3) "420" ["text"]=> string(47) "数据结构 队列_队列实例:事件处理" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "idreamo" ["tagsname"]=> string(40) "C语言|数据结构|队列|事件处理" ["tagsid"]=> string(23) "["246","247","248",395]" ["catesname"]=> string(12) "数据结构" ["catesid"]=> string(7) "["133"]" ["createtime"]=> string(10) "1511397279" ["_id"]=> string(3) "420" } [9]=> array(10) { ["id"]=> string(3) "419" ["text"]=> string(47) "久等了,博客园官方Android客户端发布" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(3) "cmt" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511396549" ["_id"]=> string(3) "419" } } ["count"]=> int(200) } 222 selenium 自动化之元素定位 - 爱码网

随之测试行业的细化,针对不同场景不同行业细分了很多职位的测试岗位 如:功能测试 自动化测试 安全测试 性能测试 本地化测试 等等,目前针对测试岗位的技能也不断地提升,在保证测试质量的前提引入不同的测试手段,来进行测试效率的提升,本章主要讲解一下web 自动化测试的selenium的测试工具,基于环境部署配置,请大家去百度查询,本文不做讲解 ,本章先以元素定位为切入点进行讲解 [主要以python 集成环境进行讲解]

  • selenium 元素定位方式

    • 通过ID 方式查找元素
    • 通过Name查找元素
    • 通过ClassName 查找元素
    • 通过TagName 查找元素
    • 通过LinkText查找元素
    • 通过PartialLinkText 查找元素
    • 通过CSS查找元素
    • 通过xpath 查找元素
    • 通过JQuery查找元素
      备注:今天主要讲解一下ID,Name,ClassName ,TagName ClassText Css xpth的元素查找方式
  • 通过ID ,name,class 方式查找元素
    我们定位一下图片的元素
    selenium 自动化之元素定位

	<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

以上边一行html 代码为例,我们可以看到一个输入框中的各节属性,分别告诉我们 name 和id的属性,在元素定位时,我们可以直接用这两个方式来定位到百度的这个输入框进行输入,元素定位代码如下

        driver.find_element_by_id("kw").clear() # 第一步,先清除文本框的内容
        driver.find_element_by_id("kw").send_keys("python")# 输入要检索的内容发送
        driver.find_element_by_id("su").click() # 点击【百度一下】的按钮连接进入搜索页面

备注:下边是以name的方式 将输入框的元素定位出来的 可以看到上边的input的代码属性,name元素的值为【wd],所以代码如下,我们可以采用查找内部的方式进行编写代码

 		driver.find_element_by_name("wd").clear() # 第一步,先清除文本框的内容
        driver.find_element_by_name("wd").send_keys("python")# 输入要检索的内容发送
        driver.find_element_by_id("su").click() # 点击【百度一下】的按钮连接进入搜索页面

备注:在input输入中,我们还可以看到输入属性还存在class这个属性,其值为s_ipt的值,我们在找class属性时最好保证属性的唯一性,以便更好地支持

        driver.find_element_by_class_name("s_ipt").clear()
        driver.find_element_by_class_name("s_ipt").send_keys("python")
        driver.find_element_by_class_name("s_btn").click()

其他还有一些方式支持,比如class元素中存在空格的情况,那我们可以单独检索其中一部分保证唯一性就好,还可以引用索引下标的方式,但不建议使用该方式find_element_by_class_name(“s_ipt”)[0].clear() ,还有一种可以使用css的方式定位,后边举例说明,以上三种定位方式基本都是以元素属性进行直接定位的,所以划分在一起。

  • 通过xpath及css方式查找元素

    • 当我们在实际项目中,发现元素没有id name 等元素属性的情况下,并且这些值为动态刷新获取的情况下,我们则使用xpath及css的方式来定位元素,这两种方式基本以元素路径的方式定位,下边通过xpath讲解一下如何进行元素定位,如下图,在ctrl+f后,我们手动输入代码后,直接定位到蓝色框中
      selenium 自动化之元素定位
      selenium 自动化之元素定位
      selenium 自动化之元素定位

1.【//】 双杠标示相对路径标示
2.input 可以理解为所在目录下的,此处有可能是多级的目录结构,在元素定位中,输入元素属性及下属定位即可,由于chrome浏览器的开发者工具支持xpath的路径自动生成可以直接拷贝,但我们需要学会查看html的代码,可以简化路径及快速定位,因为自动生成的路径往往很长很繁琐,出现问题,不好定位看着不方便,所以我们最好自己定位元素之后,查看属性编写
3.图2例子中是解决相同属性重名的问题,加入name=‘wd’存在多个,那么我们可以通过增加一个属性进行查找
4.图3中,简单粗暴地定位元素,就是定位元素后,右键操作检查元素,会定位到元素位置,然后可以通过层级来进行元素定位,可以原则id name 及class 元素的路径

 driver.get("http://www.baidu.com")
        driver.find_element_by_xpath('//input[@id="kw"]').clear()
        driver.find_element_by_xpath('//input[@id="kw"]').send_keys("python")
        driver.find_element_by_xpath('//input[@id="su"]').click()
        time.sleep(5)
        driver.find_element_by_xpath('//*[@id="3"]/h3/a').click()
        time.sleep(10)
  • 使用css 定位元素,好处 没有定位不到的元素,与xpath一样,但相较速度比xpath快,所以强烈推荐该方式,并且提供多种定位方式 id选择器 class 选择器 元素 属性及层级选择器进行定位
    id属性格式以#为前头标识,必须点,接入id的属性值定位语法如下
        driver.find_element_by_css_selector("#kw").clear()
        driver.find_element_by_css_selector("#kw").send_keys("python")
        driver.find_element_by_css_selector("#su").click()
  • name 属性定位,以【.】开头标识
    driver.find_element_by_css_selector(".s_ipt").clear() driver.find_element_by_css_selector(".s_ipt").send_keys("python") driver.find_element_by_css_selector(".s_btn").click()
    -属性选择器是以属性和值得关系以[] 为标识符进行定位 [param=values]
        driver.find_element_by_css_selector("[id='kw']").clear()
        driver.find_element_by_css_selector("[id='kw']").send_keys("python")
        driver.find_element_by_css_selector("[id='su']").click()
  • 层级关系
    selenium 自动化之元素定位
        driver.find_element_by_css_selector("span[id=s_kw_wrap]>input").clear()
        driver.find_element_by_css_selector("span[id=s_kw_wrap]>input").send_keys("python")
        driver.find_element_by_css_selector("[id='su']").click()

一般常用的元素定位方式基本上都满足,对于延伸状态还有一些补充
selenium 自动化之元素定位

  • 另外的一种写法,需要导入webdriver的类包,与我们上边所编写的语句作用是一样的
from selenium.webdriver.common.by import By
        #driver.find_element(By.CSS_SELECTOR,'#kw').send_keys("python")
        driver.find_element(By.ID,'kw').send_keys("python")
        #driver.find_element(By.NAME, 'wd').send_keys("python")
        #driver.find_element(By.CLASS_NAME, 's_ipt').send_keys("python")
        #driver.find_element_by_css_selector("[id='su']").click()

相关文章: