CSS元素定位
使用 CSS 选择器定位元素
CSS可以通过元素的id、class、标签(input)这三个常规属性直接定位到,而这三种编写方式,在HTML中编写style的时候,可以进行标识如:
#su .class input
一、使用绝对路径来定位元素
在使用绝对路径的时候,每个元素之间要有一个空格。WebElement userName=driver.findElement(By.cssSelector("html body div div form input"));
以父子关系的方式”>”来描述 WebElement userName = driver.findElement(By.cssSelector("html >
body > div > div > form > input"));
这个寻找方法会有局限,他决定于页面的整体结构。如果有些许改变,选择器将找不到这个元素。
二、使用相对路径来定位元素
使用相对路径的时候我们可以直接定位元素。不用考虑他在 DOM 中的位置。
假设定位 DOM 中第一个<input>元素:
WebElement userName = driver.findElement(By.cssSelector("input"));
三、使用class属性选择器来定位元素
我们可以先指定一个 HTML 的标签,然后加一个“.”符号,跟上 class 属性的值,方法如下:
WebElement loginButton =
driver.findElement(By.cssSelector("input.login"));这样可以找到按钮的<input>标签 class 为 login 的元素。
还可以简写查询表达示,叧用 .和 class 属性值,省略掉 HTML 的标签。但是,这将会返回所有 class 为 login 的元素,导致结果并不一定是你所期望的那样。
WebElement loginButton =
driver.findElement(By.cssSelector(".login"));
四、使用相对 ID 选择器来定位元素
先指定一个 HTML 标签,然后加上一个“#”符号,跟上 id 的属性值,如下所示:
WebElement userName =
driver.findElement(By.cssSelector("input#username"));
这将会返回 input 标签中 id 为 username 的元素。可以通过这样来简化一下表达式,输入“#”符号,跟上 id 的名称即可,省略HTML的标签。但是,这也将会返回所有 id
为 username 的元素。
WebElement userName =
driver.findElement(By.cssSelector("#username"));
同级定位“+”: 通过先定位父类(self),再定位self 同级的类.
后代定位 “ ”:通过先定位父类(self),再定位self 后代的类
五、使用属性来定位元素
除了 class 和 id 属性,CSS 选择器也可以使用其他的元素属性来定位。例如使用<input>中的 Name 属性。
WebElement userName
=driver.findElement(By.cssSelector("input[name=username]"));
alt 属性来定位<img>元素。
WebElement
previousButton
=driver.findElement(By.cssSelector("img[alt='Previous']"));
你可能会遇到一个属性不足以来定位到一个元素的情况,你需要联合使用其他的属性来达到精确匹配。下面的例子中,使用多个属性来定位<input>元素。
WebElement
previousButton
=driver.findElement(By.cssSelector("input[type='submit'][value='Login']"));
六、使用属性名称选择器来定位元素
通过指定元素中属性的名称而不是属性的值来定位元素。如我们想要查找所有<img>标签中,含有 alt 属性的元素
List<WebElement> imagesWithAlt
=driver.findElements(By.cssSelector("img[alt]"));
想要定位那些<img>标签中不含有alt 属性,方法如下:List<WebElement>
imagesWithoutAlt =driver.findElements(By.cssSelector("img:not([alt])"));
七、部分属性值的匹配
语法 |
例子 |
描述 |
^= |
input[id ^= ' ctrl'] |
以 XXX 开始,例如,如果一个元素的ID是ctrl_12,就可以定位到此元素,匹配到 id |
$= |
input[$='_username'] |
以 XXX 结尾,例如,如果一个元素的 ID |
*= |
input[*='username'] |
包含。例如,如果一个元素的 ID 是 panel_login_userName_textfield,返将会匹配到此 id 值的_userName,从而定位到元素 |
定位注意:html/body/div[2] 找到的是第二个div,从1开始。
//form[1]/div/input[1] //的意思是无论中间有多少元素,只要是满足后面的条件的都是被选择的。
//input[@class='input'] @的意思是选择元素中的属性。该方法的意思是,选择所有input元素中class属性为input的元素,若写出//input[@class]表示选择有属性名class的input标签,若写成//input[@]表示选择所有有属性的input标签。注意:以//开头,默认是xpath定位方式。
CSS元素定位的更多相关文章
- Selenium自动化-CSS元素定位
接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式 大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...
- 复习-css元素定位
css元素定位 <style type="text/css"> body{ margin: 15px; font-family: "Adobe 宋体 Std ...
- 【WEB自动化】【第一节】【Xpath和CSS元素定位】
目前自动化测试开始投入WEB测试,使用RF及其selenium库,模拟对WEB页面进行操作,此过程中首先面对的问题就是对WEB页面元素的定位,几乎所有的关键字都需要传入特定的WEB页面元素,因此掌握常 ...
- CSS元素定位6-10课
<精通CSS.DIV网页样式与布局>视频6-10课总结图: 元素定位 (1)float:left/right; 左浮动:脱离普通文档流向左浮动(即向左对齐):float属性必须应用在块级元 ...
- css元素定位样式
曾经写网页,学css整体上不难,但就是元素定位,始终一知半解,直到今天,本着实践出真知的理念,经过认真测试,总结出了如下结论. css 定位: positionstatic : 默认静止定位,元素在正 ...
- css选择器用法,使用css定位元素,css和xpath元素定位的区别
css定位元素 1.什么是css? CSS(Cascading Style Sheets)层叠样式表,是一种语言,用来描述html或者xml的显示样式.在css语言中有css选择器,在selenium ...
- html 元素定位position-relative, absolute, fixed, static
看到这个,你有什么想法? Difference between static and relative positioning 如果你能完全看明白,那几本上css 元素定位的东西基本都会了.本文也不用 ...
- python3+selenium3自动化1——元素定位
1.selenium的webdriver提供了八种基本的元素定位方法 打开浏览器 driver = webdriver.Chrome() driver.get('https://www.baidu.c ...
- css元素position定位和z-index
网页元素定位 1.注意点: 1)给元素设定高度要小心,除非给已知大小的图片设置高度,否则无法得知指定元素在页面上会有多高.此时最好通过padding等来控制高度. 2)对于同一个元素,不要讲float ...
随机推荐
- Encountered IOException running import job: org.apache.hadoop.mapred.FileAlreadyExistsException: Output directory hdfs://slaver1:9000/user/hadoop/tb_user already exists
1.当时初学Sqoop的时候,mysql导入到hdfs导入命令执行以后,在hdfs上面没有找到对应的数据,今天根据这个bug,顺便解决这个问题吧,之前写的http://www.cnblogs.com/ ...
- [转] Mongoose初使用总结
连接mongoose mongoose连接数据库有两种方式 第一种: 'use strict'; const mongoose = require('mongoose'); mongoose.conn ...
- Linux图形化监控网络流量:speedometer查看流量
Speedometer是一个带宽控制台和对数带宽显示的文件下载进度监控,以及一个简单的命令行界面.其目的是测量和显示网络连接或数据存储在文件中的数据率. Speedometer 2.8该版本增加了一个 ...
- Codeforces 425E Sereja and Sets dp
Sereja and Sets 我们先考虑对于一堆线段我们怎么求最大的不相交的线段数量. 我们先按 r 排序, 然后能选就选. 所以我们能想到我们用$dp[ i ][ j ]$表示已经选了 i 个线段 ...
- Codeforces 965E Short Code 启发式合并 (看题解)
Short Code 我的想法是建出字典树, 然后让后面节点最多的点优先向上移到不能移为止, 然后gg. 正确做法是对于当前的节点如果没有被占, 那么从它的子树中选出一个深度最大的点换到当前位置. 用 ...
- 向Spark集群提交任务
1.启动spark集群. 启动Hadoop集群 cd /usr/local/hadoop/ sbin/start-all.sh 启动Spark的Master节点和所有slaves节点 cd /usr/ ...
- 51Nod1367 完美森林 贪心
原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1367.html 题目传送门 - 51Nod1367 题意 有一棵N个点的树,树中节点标号依次为0,1 ...
- Practice| 面向对象
实参与形参的传递机制 * 实参给形参赋值: * 1.基本数据类型: * 实参给形参的数据值,形参的修改和实参无关 * 2.引用数据类型 * 实参给形参的地址值,如果这个地址值修改“属性”会影响实参,但 ...
- oracle中date数据的转换问题
(TO_NUMBER(TO_CHAR(FP.KPRQ, 'HH24')) >= 18 kprq >= to_DATE ('2017-01-12 18:00:00','yyyy-MM-dd ...
- POJ 2029 Get Many Persimmon Trees (模板题)【二维树状数组】
<题目链接> 题目大意: 给你一个H*W的矩阵,再告诉你有n个坐标有点,问你一个w*h的小矩阵最多能够包括多少个点. 解题分析:二维树状数组模板题. #include <cstdio ...