admin 管理员组

文章数量: 1086019

CSSJS定位器

一、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 语法选择器详情请参考手册：.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

　　　　更多正则匹配原则请查看

　　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下所有级别的第一个子元素可定位到三个元素：

　　　　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

以上内容转自：博客：.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 ");

　　/* 直接为日期控件强行赋值*/