WEB自动化测试之元素定位基础

lsekfe

我先谈谈我的经历吧。

　　简单来说是这样的：我是一名文科生——大学学的外语——因为各种原因大二去了部队从军——两年后退伍开了一个小咖啡店——觉得没有一技之长——报名自考学历——报名软件测试培训——从事软件测试至今——自学自动化测试——自学性能测试——报考在职研究生——薪资么具体多少不好说，我自己觉得很满意。

　　不知道大家有没有看明白，我的意思是软件测试所有技能都是一门技术，是可以通过学习掌握的。

　　回顾第一个例子：

1. //创建Firefox实例
   
2. 
   
3. 　　WebDriver driver = new FirefoxDriver();　　
   
4. 
   
5. 　　//打开有道首页
   
6. 
   
7. 　　driver.get("http//www.youdao.com/") ;
   
8. 　　
   
9. 
   
10. 　　//通过输入框id属性找到有道搜索输入框
    
11. 
    
12. 　　WebElement  element = driver.findElement(By.id("border"));　　
    
13. 
    
14. 　　//在搜索输入框输入关键字“Selenium”
    
15. 
    
16. 　　element.sendKeys("Selenium");　　
    
17. 
    
18. 　　//进行搜索
    
19. 
    
20. 　　element.submit();　　
    
21. 
    
22. 　　//关闭浏览器
    
23. 
    
24. 　　driver.quit();

复制代码

其实想简单一点，编程语言也算是语言的一种，就像英文、法文、俄文等等一样，是可以翻译的，那么我们把上面的代码翻译成汉语是什么样的呢？

1. WebDriver driver = new FirefoxDriver(); → → → →初始化一个FirefoxDriver类型的对象，名
   
2. 
   
3. 　　字叫driver（通俗讲就是打开一个新的firefox浏览器）
   
4. 
   
5. 　　driver.get("http//www.youdao.com/") ; → → → →使用driver对象打开有道首页（在浏览器地址
   
6. 
   
7. 　　栏输入有道首页地址）
   
8. 
   
9. 　　WebElement  element = driver.findElement(By.id("border")); → → → →使用driver对象，找
   
10. 
    
11. 　　到html属性id=border的对象（找到搜索输入框，命名为element）
    
12. 
    
13. 　　element.sendKeys("Selenium"); → → → →像这个element输入框对象中输入selenium关键字（在搜
    
14. 
    
15. 　　索输入框中输入selenium）
    
16. 
    
17. 　　element.submit();→ → → →点击回车（开始搜索）
    
18. 
    
19. 　　driver.quit();→ → → →关闭浏览器

复制代码

从上面的翻译我们可以得出一个结论：自动化的语法需要先找到需要操作的元素对象（如：driver、element），然后这个对象调用相应的api的方法（如：get、sendKeys），然后再传入数据（如：http//http://www.youdao.com/、Selenium），进行我们所预设的自动化操作。
　　UI自动化语法

第一行：浏览器driver对象调用get方法打开有道首页。
　　第二行：（尝试自己翻一下）
　　第三行：（尝试自己翻一下）
　　也就是说UI自动化的语法=对象+操作+数据


[url=]WEB[/url]元素定位语法
　　相信大家都知道，在每一个web页面中都存在着大量的web元素，比如按钮、连接、图片、文字等等，都是Web元素，更准确的说，他们是Html元素。
　　而在Selenium Webdriver中，没一个页面元素都可以对应到一个WebElement对象，WebElement对象则可以通过WebDriver的实例来获得。
　　那么怎么来获得呢？
　　Selenium提供了一个寻找元素的方法：findElement
　　在Java方法中，通过一个定位器来定位Web元素，这个定位器叫做：By


接下来咱们就看看元素定位的几种方法。
　　A，元素可以通过元素（Element）ID来定位。
　　说实话，通过元素定位是我们测试过程中最有效和最为推荐的一种方法，当然这要依赖于前端工程师有极其规范的开发流程。
　　页面元素的ID的格式如下：

1. <element id="value">　

复制代码

我们可以来看一个例子，打开[url=]百度[/url]首页，鼠标移动到搜索框，点击右键，查看元素（检查），我们就可以找到输入框元素的id。

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

复制代码

通过以上操作，我们可以看到百度输入框元素的包括name、id、class等多个属性，其中id属性的值是“kw”，那么我们就可以通过“kw”对应的id，来找到百度首页输入框这个元素。就像是我们自己的名字，我们可以通过名字来找到对应的人。
　　那么在selenium中的写法是怎样的呢？

1. WebElement element = driver.findElement(By.id("kw"));
   
2. 
   
3. 　　//翻译：driver对象调用findElement方法传入数据By.id("kw")，找到对应的搜索框元素

复制代码

　B，元素可以通过元素（element）name来定位。
　　与元素ID属性类似，元素name属性的格式如下：

1. <element name= "value">

复制代码

同样，我们打开百度首页，鼠标移动到搜索框，点击右键，查看元素（检查），我们就可以找到输入框元素的name。

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

复制代码

我们通过以上操作可以看到，百度首页输入框name属性的值为“wd”，我们就可以通过name属性的值“wd”来寻找到百度首页输入框。
　　在selenium中对应的写法如下：

1. WebElement element = driver.findElement(By.name("wd"));

复制代码

我们看到跟使用id属性相比，定位器后面的.id变成了.name，简单说就是使用了name属性而不是id属性。
　　C，元素可以通过元素（element）Class Name来定位。
　　页面元素通常还有class属性，因此我们可以使用class name来定位元素。
　　元素class属性的格式如下：

1. <element class="value">

复制代码

跟上面一样，我们找到报读首页搜索输入框的class属性的值：

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

复制代码

从上面的操作我们可以看到，百度搜索输入框class属性的值是“s_ipt”，我们当然可以通过该属性来定位到搜索输入框，在selenium中的写法如下：

1. 　WebElement element = driver.findElement(By.className("s_ipt"));

复制代码

D，元素可以通过超链接文本（LinkText）来定位。
　　在页面中，通常会有大量的包含连接的元素，在Html中通常是如下的格式：

1. 　<element herf="value">LinkText</element>

复制代码

我们依旧以百度搜索首页为例子，鼠标移动到右上角新闻，右键，检查（查看元素）

1. <a href="http://news.baidu.com" target="_blank" class="mnav">新闻</a>

复制代码

上述操作我们可以看到，我们要找的元素是一个a标签有着连接（http://news.baidu.com）的元素，我们要找的是连接的文本，也就是“新闻”这两个汉字，通过这两个汉字我们就可以找到这个元素，在selenium中的写法如下：

1. WebElement element = driver.findElement(By.linkText("新闻"));

复制代码

E，元素可以通过缺省超链接文本（PartialLinkText）来定位。

1. <element herf="value">PartialLinkText</element>

复制代码

上面是使用超链接文本来定位元素，有的时候超链接的文本非常的长，使用一长串的文本来定位元素就使得我们的自动化测试代码显得臃肿且不够优雅~，这时候我们就可以使用缺省超链接文本来定位元素。
　　还是百度首页“新闻”连接的例子，这次我们只是用“闻”这一个汉字来定位元素：


在selenium中的写法如下：

1. WebElement element = driver.findElement(By.partialLinkText("新闻"));

复制代码

F：注意一下。
　　以上介绍了几种常用的元素定位的基础操作，那么可能大家都会发现一个问题，在页面中那么多元素，很多元素都有着相同的属性（多个元素拥有同样的属性），那么通过这个属性定位到的元素是不是就会有很多了呢？
　　在selenium中我们可以获取具有相同属性的所有元素，我们以36kr首页为例，获取所有包含“服务”这两个汉字的超链接文本的元素。


在selenium中的写法如下：

1. List<WebElement> elements = driver.findElements(By.partiallinkText("服务"));

复制代码

注意：我们上面使用的方法变成了driver.findElements，该方法返回的是一个list。
　　有兴趣的朋友可以打印出来看一下：

1. List<WebElement> elements = driver.findElements(By.partiallinkText("服务"));
   
2. 
   
3. 　　//打印出获取到的所有element的文本信息
   
4. 
   
5. 　　for(WebElement element:elements){
   
6. 
   
7. 　　    System.out.printIn(element.getText());
   
8. 
   
9. 　　}

复制代码

G，元素可以通过元素Tag Name来定位。
　　在页面中，每个元素都有一个tag，简单来讲我们可以理解为html类型，我们也可以通过tag本身来找到对应的元素。
　　在Html中的格式如下：

1. <tag class='value'></tag>

复制代码

依然使用百度首页搜索框。

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

复制代码

　有上面操作我们可以看到，我们要找的百度搜索输入框是一个input类型的元素，那么我们就可以用这个tag类型本身来定位元素；可能大家又有疑问，一个页面中会有多个相同tag的元素（存在多个input类型的元素怎么办），怎么能定位到呢？
　　在元素定位的过程中，如果页面中存在多个相同属性的元素，那么findElement方法只会返回页面树状结构中，自上而下的第一个满足条件的元素。
　　在selenium中的写法如下：

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

复制代码

以上便是selenium元素定位最基础的方法。

Miss_love

支持分享