CSS&JS定位器
一、CssSelector定位器
1、概述
CssSelector是效率很高的元素定位方法,Selenium官网的Document里极力推荐使用CSS locator,而不是XPath来定位元素,原因是CSS locator比XPath locator速度快,特别是在IE下面(IE没有自己的XPath 解析器(Parser))他比xpath更高效更准确更易编写,美中不足是根据页面文字时略有缺陷没有xpath直接。因为前端开发人员就是用CSS Selector设置页面上每一个元素的样式,无论那个元素的位置有多复杂,他们能定位到,那我们使用CSS Selector肯定也能非常精准的定位到页面Elements。css是采用定点定位的方式,当你看完css的语法就会发现这个特点,CSS 语法选择器详情请参考手册:http://www.w3school.com.cn/cssref/css_selectors.asp
2、语法
在学习CssSelector前,我们要对于CSS语法有个初步认识,下图是w3school的语法截图:



3、基本用法
1.根据tagName

driver.findElement(By.cssSelector("input")
2.根据ID
driver.findElement(By.cssSelector("#kw"));//id=‘kw’的元素
WebElement css = driver.findElement(By.cssSelector("input#su")); input下id=‘su’的元素,也就是百度一下button
3.根据className

单一class:driver.findElement(By.cssSelector(".qrcode-img"));
复合class:WebElement css = driver.findElement(By.cssSelector(".qrcode-item.qrcode-item-1"));
4.根据元素属性
a、精准匹配:
a1 driver.findElement(By.cssSelector("input[name=username]"));属性名=属性值,id,class,等都可写成这种形式
a2 driver.findElement(By.cssSelector("img[alt]"));存在属性。例如img元素存在alt属性
a3 driver.findElement(By.cssSelector("input[type='submit'][value='Login']"));多属性
b、模糊匹配:(正则表达式匹配属性)
b1 driver.findElement(By.cssSelector(Input[id ^='ctrl'])); ^= 匹配到id头部 如ctrl_12
b2 driver.findElement(By.cssSelector(Input[id $='ctrl'])); $= 匹配到id尾部 如a_ctrl
b3 driver.findElement(By.cssSelector(Input[id *= 'ctrl'])); *= 匹配到id中间如1_ctrl_12
更多正则匹配原则请查看 http://www.w3cplus.com/css3/attribute-selectors
c、查询子元
<form id="form" class="fm" name="f">
<span id="s_kw_wrap" class="bg s_ipt_wr quickdelete-wrap">
<input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd">
</span>
<span id="s_btn_wr" class="btn_wr s_btn_wr bg">
<input id="su" class="btn self-btn bg s_btn" type="submit" value="百度一下">
</span>
</form>
案例html
以上代码是百度首页搜索输入框和按钮的html,下面讲解以此为例
c1 子元素 A>B
WebElement input= driver.findElement(By.cssSelector("form>span>input"));//搜索输入框
c2 后代元素 A空格B
WebElement input= driver.findElement(By.cssSelector("form input"));//搜索输入框
c3 第一个后代元素 :first-child
WebElement span= driver.findElemet(By.cssSelector("form :first-child"));//冒号前有空格,定位到form下所有级别的第一个子元素可定位到三个元素:
<span id="s_kw_wrap".../> <input id="kw"..../> <input id="su"........./>
WebElement span= driver.findElemet(By.cssSelector("form input:first-child"));//冒号前无空格,定位到form下所有级别的第一个input元素
可定位到两个元素:<input id="kw"..../> <input id="su"........./>
WebElement span= driver.findElemet(By.cssSelector("form>span:first-child"));//冒号前无空格,定位到form直接子元素中的第一个span元素
可定位到一个元素:<span id="s_kw_wrap".../>
c4 最后一个子元素 :last-child [类同:first-child]
WebElement userName = driver.findEleme(By.cssSelector("form :last-child"));//冒号前有空格,定位到form下所有级别的第一个子元素
c5 第2个子元素 :nth-child(N) [类同:first-child]
WebElement userName = driver.findElemet(By.cssSelector("form#form :nth-child(2)"));//冒号前有空格,定位到form下所有级别的第二个子元素
6.查询兄弟元素
driver.findElement(By.cssSelector("form#form span+span")); 定位到a 再定位到和它相邻的b
以上内容转自:博客:https://www.cnblogs.com/sylvia-liu/p/4469597.html
二、JavaScript定位
1、概述
JavaScript是属于网络的脚本语言,在selenium定位中并不常用,主要针对一些富文本框、日期控件进行定位或者赋值操作,比如12306出发日期字段,我们就需要用到JS来进行赋值。
2、基本语法
a、id 定位
document.getElementById(“id”)
b.通过name获取
document.getElementsByName(“Name”) 返回的是list
c.通过标签名选取元素
document.getElementsByTagName(“tag”) 返回的是list
d.通过CLASS类选取元素
document.getElementsByClassName(“class”) 兼容性:IE8及其以下版本的浏览器未实现getElementsByClassName方法 返回的是list
e.通过CSS选择器选取元素
document.querySelectorAll(“css selector") 兼容性:IE8及其以下版本的浏览器只支持CSS2标准的选择器语法 返回的是list
3、Selenium脚本中执行JS脚本
/*设置日期控件的读写属性*/
((JavascriptExecutor) driver).executeScript("document.getElementById(\"fromDate\").readOnly=false ");
/* 直接为日期控件强行赋值*/
JavascriptExecutor js = (JavascriptExecutor) driver;
driverJs.executeScript("document.getElementByName('leftTicketDTO.train_date').value='2013-06-21';");
// js.executeScript("document.getElementById('fromDate').value='2013-06-21';");
// 富文本编辑框的处理
driver.switchTo().frame("ueditor_0");
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("document.body.innerHTML='ABCDEFG'");
//js模拟点击
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].click();",driver.findElement(By.id("su")));
//滚动条操作
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("document.documentElement.scrollTop=1500"); //火狐浏览器
document.body.scrollTop=1000 //chrome浏览器
//元素赋值
document.getElementById('HD_CheckIn').value='zhangsan';
//日期类型元素赋值 <input type="date" id="datePicker" value=""/>
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0] .value=‘2016-04-20’;",driver.findElement(By*****)));
小技巧:css是效率极高的定位方式,而js主要是用于自动化中比较难操作、或者需要改写读写权限的场景,比如:readonly=false (只读属性不生效) disable=false (不可读写属性不生效),我们在执行脚本的时候可以对要定位的元素进行只读、不可读写权限的修改,以便针对这些特殊的元素进行操作,这样是JS强大的地方,另外js可以模拟一些鼠标操作、富文本框处理等。
总结:以上内容就是关于css js定位器的全部内容,后续会更新一下关于selenium使用中长遇见的问题,敬请期待。。。。。
CSS&JS定位器的更多相关文章
- CSS & JS 制作滚动幻灯片
==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...
- 【转】Maven Jetty 插件的问题(css/js等目录死锁)的解决
Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决: 1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty ...
- Css Js Loader For Zencart
Css Js Loader 描述:这个插件很早就出来了,可能知道人非常少 这个插件的功能是整合所有的网站的CSS和JS内容到一个文件里边. 因为CSS和JS文件到了一个文件,加快了程序的运行 在配合其 ...
- 购物车数字加减按钮HTML+CSS+JS(有需要嫌麻烦的小伙伴拿走不谢)
之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...
- vs合并压缩css,js插件——Bundler & Minifier
之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...
- nginx资源定向 css js路径问题
今天玩玩项目,学学nginx发现还不错,速度还可以,但是CSS JS确无法使用,原来Iginx配置时需要对不同类型的文件配置规则,真是很郁闷,不过想想也还是很有道理.闲暇之际,把配置贴上来.#user ...
- IIS7的集成模式下如何让自定义的HttpModule不处理静态文件(.html .css .js .jpeg等)请求
今天将开发好的ASP.NET站点部署到客户的服务器上后,发现了一个非常头疼的问题,那么就是IIS7的应用程序池是集成模式的话,ASP.NET项目中自定义的HttpModule会处理静态文件(.html ...
- 网站加载css/js/img等静态文件失败
网站加载css/js/img等静态文件失败,报网站http服务器内部500错误.而服务器中静态文件存在且权限正常. 从浏览器中直接访问文件,出来乱码.这种问题原因在于iis中该网站mime配置报错,不 ...
- 【前端】Sublime text3 插件HTML/CSS/JS prettify 格式化代码
1.首先安装插件 菜单的preference->packages control,然后输入install .. 回车,再输入HTML/CSS/JS prettify 再回车,重启后就可以了. 2 ...
随机推荐
- Zoj 3870——Team Formation——————【技巧,规律】
Team Formation Time Limit: 3 Seconds Memory Limit: 131072 KB For an upcoming programming contes ...
- 白话SpringCloud | 第十一章:路由网关(Zuul):利用swagger2聚合API文档
前言 通过之前的两篇文章,可以简单的搭建一个路由网关了.而我们知道,现在都奉行前后端分离开发,前后端开发的沟通成本就增加了,所以一般上我们都是通过swagger进行api文档生成的.现在由于使用了统一 ...
- 《Python编程从入门到实践》_第七章_用户输入和whlie循环
函数input()的工作原理 函数input()让程序暂停运行,等待用户输入一些文本.获取用户输入后,python将其存储在一个变量中,以方便你使用. #输入用户名 username = input( ...
- UWP 应用获取各类系统、用户信息 (1) - 设备和系统的基本信息、应用包信息、用户数据账户信息和用户账户信息
应用开发中,开发者时常需要获取一些系统.用户信息用于数据统计遥测.问题反馈.用户识别等功能.本文旨在介绍在 Windows UWP 应用中获取一些常用系统.用户信息的方法.示例项目代码可参见 Gith ...
- OGNL,表达式上下文ContextMap
1.OGNL表达式 object graph navigation language:对象图导航语言 存取对象属性:调用对象方法:字段类型转换等. <input type="text& ...
- Mysql自动更新字段时间
Mysql中更新某天数据可设置该条数据中的某个字段自动更新 ALTER TABLE `表名` MODIFY `字段名` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON U ...
- node会话管理——cookie-parser
cookie是由服务器发送给客户端(浏览器)的小量信息. 我们知道,平时上网时都是使用无状态的HTTP协议传输出数据,这意味着客户端与服务端在数据传送完成后就会中断连接.这时我们就需要一个一直保持会话 ...
- CSP学习之ASN.1编码(一)
一.定义: 是定义抽象数据类型的标准. 是用于描述数据的表示.编码.传输.解码的灵活记法. 它提供一套正式.无歧义和精确的规则,以描述独立于特定计算机硬件的对象结构. 标准的ASN.1编码规则有其基本 ...
- Hadoop-HA(高可用)集群搭建
Hadoop-HA集群搭建 一.基础准备工作 1.准备好5台Linux系统虚拟服务器或物理服务器 我这里演示采用虚拟服务器搭建Hadoop-HA集群,各自功能分配如下: NameNode节点:vt-s ...
- struts2====之=======初识struts
---恢复内容开始--- 1.什么是web框架? 目前应用得较多的三种服务器瑞页面描写技术就是ASP,JSP和PHP.J S P通过在HTMLJî面 文件中嵌入J a v a脚本代码,从而实现动态网页 ...