元素定位方式

1、为什么要查找元素

功能测试其实就是前端测试，测试的流程就是和浏览器进行交互，这种交互其实就是所说的手工操作，通过前端的手工操作完成功能的测试

例如注册功能的测试

我们首先要打开注册页面--》找到注册信息的输入框，输入内容，找到注册按钮--〉点击注册

其实这就是黑盒测试，不关注产品的内在具体实现逻辑，只关注表现出来的功能

2、web自动化测试

web自动化测试本质上就是功能测试--》其实就是用程序来模拟手工操作

通过程序找到相应的元素，完成对应的操作。

3、selenium定位方法：

selenium提供了8种定位方式

• id
• name
• className
• tagName
• linkText
• partialLinkText
• cssSelector
• xpath

这8种定位方式对应的API

• By.id   

根据id来获取元素。返回单个元素，因为id一般是唯一的（但不规范的前端页面也可能出现id不唯一的情况）

• By.name

根据元素的name属性来获取元素，所以可能会返回元素的集合

• By.className

根据元素的样式class值来获取元素，可能会返回元素的集合

• By.tagName

根据元素的标签名来获取元素，可能会返回元素的集合

• By.linkText

根据超链接的文本值来获取元素

• By.partialLinkText

根据超链接的部分文本值来获取元素

• By.cssSelector

      cssSelector是selenium官网极力推荐使用的定位方式，而不是xpath，因为cssSelector比xpath的速度快，特别是在IE浏览器下（因为IE浏览器没有自己的xpath解析器）他比xpath更高效更准确更容易编写，美中不足是根据页面文字时略有缺陷，没有xpath直接

因为前端开发人员就是通过CSS Selector设置页面上每一个元素的样式，无论元素多么复杂，他们都能定位到，那我们使用cssSelector也能精准定位到页面的Elements

     CssSelector常用定位

1、通过标签

WebElement element = driver.findElement(By.cssSelector("input"));

2、通过id

#在css中代表id

//通过标签和id：也就是定位为：id为kw的input元素
WebElement element = driver.findElement(By.cssSelector("input#kw"));
//只有id，定位id为kw的元素
WebElement element = driver.findElement(By.cssSelector("#kw"));

3、通过元素的其他属性

//以百度首页为例：https://www.baidu.com/
/**
* 通过其他属性定位 
* 
*/
 driver.findElement(By.cssSelector("a[name='tj_briicon']")).click();//属性==值
driver.findElement(By.cssSelector("[autocomplete]")).sendKeys("hello");//有某个属性的元素
driver.findElement(By.cssSelector("input[type='submit'][value='百度一下']")).click();;

4、通过className

在cssSelector中用.代表className属性，后跟calssName属性值

//单一class：class中只有一种样式
driver.findElement(By.cssSelector(".username"))//.class
//复合class：class中有多个样式-->多个class样式要全写，并且用.连接
driver.findElement(By.cssSelector(".username.**.***"))//.classA.classB 

5、通过路径

1）子元素 A>B

WebElement input=  driver.findElement(By.cssSelector("form>span>input"));//搜索输入框

2)  后代元素 A空格B

WebElement input=  driver.findElement(By.cssSelector("form input"));//搜索输入框

3）第一个后代元素   :first-child

WebElement span= driver.findElemet(By.cssSelector("form :first-child"));//冒号前有空格，定位到form下所有级别的第一个子元素

4) 最后一个子元素    :last-child 

　WebElement userName = driver.findEleme(By.cssSelector("form :last-child"));//冒号前有空格，定位到form下所有级别的最后一个子元素

• By.xpath

xpath：xpathExpression：xml的路径表达式

xpath其实就是一个path（路径），一个描述网页元素位置信息的路径，相当于元素的坐标

xpath基于xml文档的树状结构，是xml路径语言，用来查询xml文档中的节点

（1）绝对路径的方式，一级一级往下面找

driver.findElement(By.xpath("html/body/div[1]/div[1]/div/div[1]/div/form/span[1]/input")).sendKeys("lallal");

绝对路径的缺点：容易错、太长了、不好维护（前端人员经常调整页面）

一旦页面结构发生变化，比如页面重写设计，增加、减少了元素的话，xpath绝对路径可能会发生变化--》你需要重新写--〉可维护员性低

（2）相对路径的方式

.//*[@id='kw']//相对路径表达式，.//和//都表示任意路径下，*表示任意元素，[]表示要加属性，属性要加@

注意在xpath中如果要用class属性（有多个样式叠加时）要写成@class='属性值1 属性值2 '（要写上所有的class属性值）

（3）常用的xpath方式

       <1>通过元素名定位：//input 获取页面所有input元素

       <2>通过元素名+索引定位：//form/div[1]/input   form元素下的第一个div元素下的第一个input元素

       <3>使用元素名+属性定位：//*[@name='phone']  获取手机号输入框

       <4>使用元素名+包含部分属性值：//*[contains(@name,'one')]   获取手机输入框

       <5>使用元素名+文本的内容：//*[text()='免费注册']  

         要注意空格：比如前端代码如：<a href="/Index/reg.html">&nbsp;免费注册</a>

                     这个时候用//*[text()='免费注册']是定位不到的，要用contains的方法定位

       <6>使用元素名+部分文本的内容： //*[contains(text(),'免费')]

       <7>多条件表达式的选择： //*[text()='免费注册' and|or 条件2]  

               例如定位百度首页的输入框：

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

                定位可以写成：

driver.findElement(By.xpath("//input[@maxlength='255' and @autocomplete='off']"));

4、FireBug与FirePath

• 打开火狐浏览器
• 打开菜单
• 点击附加组件
• 在扩展中搜索Firebug与Firepath
• 安装后重新启动浏览器