selenium元素定位陷阱规避

为什么selenium可以在各个浏览器上运行？因为selenium在与各个浏览器驱动执行前，会先把脚本转化成webdriver, webdriver wire协议（一种json格式的协议），这样就与脚本无关，其实都变成了同一个协议与浏览器driver执行。由此，selenium在UI自动化中占有举足轻重的地位。那么我们就有必要就其中最基础的UI定位做一些探讨和学习了。

一、selenium的简介

---

Selenium是基于Web的自动化测试技术，我们操作的对象是web页面。能够用来测试应用程序在不同的浏览器和系统上面是否能够正常的浏览和运行。

二、元素定位的方法

---

WebDriver属于Selenium体系中设计出来操作浏览器的一套API，它支持多种编程语言，Selenium WebDriver只是Java的一个第三方框架和Spring web开发框架属于同一性质，只是Spring只是在Java语言中存在，其他语言也有用于web开发框架，但不叫Spring。而Selenium WebDriver框架针对不同语言分别开发了该框架，所以，在不同的编程语言里他都叫Selenium WebDriver。

WebDriver提供了八种元素定位方法：

1.id定位

HTML规定id属性在HTML文档中必须是唯一的，示例：FindElement(By.id("kw")));

2.name定位

HTML 规定 name 来指定元素的名称，示例：findElement(By.name("wd"));

3.class定位

HTML规定class来指定元素的类名，示例：findElement(By.className("name head2 j-tag"));

4.tag定位

HTML 的本质就是通过 tag 来定义实现不同的功能，每一个元素本质上也是一个 tag。因为一个 tag 往往用来定义一类功能，所以通过 tag 识别某个元素的概率很低。

5.link 定位

link 定位与前面介绍的几种定位方法有所不同，它专门用来定位文本链接。百度输入框上面的几个文本链接的代码如下：<a class="mnav" name="tj_trnews" href="http://news.baidu.com">新闻</a>

link定位：findElement(By.linkText("新闻"))

6.partial link 定位

parial link 定位是对 link 定位的一种补充，有些文本链接会比较长，这个时候我们可以取文本链接的一部分定位，只要这一部分信息可以唯一地标识这个链接。如：

<a class="mnav" name="tj_lang" href="#">一个很长很长的文本链接</a>，使用

partial link 定位如下：

findElement(By.partialLinkText("一个很长的"))

findElement(By.partialLinkText("文本链接"))

findElement(By.partialLinkText())方法通过元素标签对之间的部分文本信息来定位元素

7.Xpath定位

XPath 是一种在 XML 文档中定位元素的语言。因为 HTML 可以看作 XML 的一种实现，所以 Selenium 用户可以使用这种强大的语言在 Web 应用中定位元素。Xpath定位元素方法有很多种，常用的如下：

1）绝对路径定位

最简单直接的办法就是通过HTML，写出元素的绝对路径，如：findElement(By.xpath("/html/body/nav/div[1]/div[1]/span/a[1]"))

2）利用元素属性定位

除了使用绝对路径外，XPath 也可以使用元素的属性值来定位。如：findElement(By.xpath("//*[@id=\"srch\"]"))

3）层级与属性结合

如果一个元素本身并没有可以唯一标识这个元素的属性值，那么我们可以找其上一级元素，如果它的上一级元素有可以唯一标识属性的值，也可以拿来使用如：findElement(By.xpath("//div[@class='lyct lyct-1']/div/div[2]/ul/li[2]/a"))

4）使用逻辑运算符

如果一个属性不能唯一地区分一个元素，我们还可以使用逻辑运算符连接多个属性来查找元素如：findElement(By.xpath("//input[@id='kw' and @class='su']/span/input"))

8.css 定位

CSS（Cascading Style Sheets）是一种语言，它被用来描述 HTML 和 XML 文档的表现。CSS 使用选择器来为页面元素绑定属性。这些选择器可以被 Selenium 用作另外的定位策略。CSS 可以较为灵活地选择控件的任意属性，一般情况下定位速度要比 XPath 快。

表1   CSS选择器常见语法

选择器	例子	描述
.class	.intro	class 选择器，选择class="intro"的所有元素
#id	#firstname	id 选择器，选择id="firstname"的所有元素
*	*	选择所有元素
element	p	元素所有<p>元素
element > element	div > input	选择父元素为<div>的所有<input> 元素
element + element	div + input	选择同一级中紧接在<div> 元素之后的所有<input> 元素
[attribute=value]	[target=_blank]	选择target="_blank" 的所有元素。

                                                  

                    表2  Xpath与CSS类似功能的对比      

定位方式	Xpath	CSS
标签	//div	div
By id	//div[@id='eleid']	div#eleid
By class	//div[@class='eleclass']	div.eleid
By 属性	//div[@title='Move mouse here']	div[title=Move mouse here] div[title^=Move] div[title$=here] div[title*=mouse]
定位子元素	//div[@id='eleid']/* //div/h1	div#eleid>* div >h1

三、selenium元素定位陷阱规避

---

1.动态id定位不到元素

直接填写在浏览器开发者模式中通过copy xpath方式是定位不到，如下：

解决方案一： 通过绝对路径，通过前端元素结构一级一级的数下来如下：

解决方案二：相对路径来解决。可以通过找到唯一的值class，以其为参照来找到对应的元素

2. IFrame原因定位不到元素

IFrame是html中的内联框架，文档中的内嵌html文档

解决方案：切换到IFrame，方法：driver.switchTo.frame()，参数用IFrame元素的id或者name,不支持xpath,或者用IFrame这个元素的WebElement类型。

3.元素定位表达式错误

解决放案：先验证表达式，再写进脚本

/	从根节点选取。
//	代表从文档的任意位置开始查找
*	代表任意的元素
[]	代表限制条件
@	选取属性。

手写xpath的方法：
     1）在chrome的开发者工具中，ctrl+f，逐步的验证xpath正确性，直到找到想要的元素。

2）在console控制台中，输入$x(“xpath表达式”)，验证xpath的正确性，注意：找到唯一的一个元素，才是web自动化定位的最终目标，不管写任何元素的        定位之前，先用$x验证一下表达式的正确性。

4.页面加载未完成

解决方案:增加等待时间，方法：thread.sleep(毫秒时间);

5.浏览器窗口切换

解决方案：通过句柄切换,句柄：windows管理一个任务的特殊标志。

四、云音乐定位的实例

---

学习中主要用网易云音乐网页版进行了定位测试，实现百度中搜索网易云音乐-登录-QQ登录-点击QQ头像授权登录-成功以后搜索框搜索happy的歌曲。

核心代码如下：

 public class MusicTest {

    public static void main(String[] args){

       //设置浏览器存放的路径
        System.setProperty("webdriver.chrome.driver",
                "D:\\seleniumtests\\chromedriver_win32\\chromedriver.exe");

        ChromeOptions options = new ChromeOptions();

        //设置chrome浏览器的参数，使其不弹框提示（chrome正在受自动测试软件的控制）
        options.addArguments("disable-infobars");

        //定义驱动对象为ChromeDriver对象，运行指定的浏览器
        WebDriver driver = new ChromeDriver(options);

        //浏览器窗口最大化，设置一个点
        Point p = new Point(1300,20);
        //设置浏览器大小
        Dimension d = new Dimension(1600,1000);

        //操作浏览器设置
        driver.manage().window().setPosition(p);
        driver.manage().window().setSize(d);

        //访问百度
        driver.get("https://www.baidu.com/");

        //百度网易云音乐
        driver.findElement(By.xpath("//*[@id=\"kw\"]")).sendKeys("网易云音乐");
        //提交搜索
        driver.findElement(By.xpath("//*[@id=\"kw\"]")).submit();

        //等待5s
        try {
         Thread.sleep(5000);
      } catch (InterruptedException e) {
         // TODO Auto-generated catch block
         e.printStackTrace();
      }

        //点击网易云音乐的链接
        driver.findElement(By.xpath("//*[@id=\"1\"]/h3/a[1]/em")).click();      

        //切换窗口，集合set：里面都是字符串
        Set<String> handles = driver.getWindowHandles();

        //新建一个目标句柄，用于找到想要的句柄之后存放
        String targetHandleCM = null;

        //循环查找所有句柄
        for(String handle : handles){

           //获取切换后句柄的浏览器标题是网易云音乐
           if(driver.switchTo().window(handle).getTitle().equals("网易云音乐")){

              //将这个找到的句柄作为目标句柄
              targetHandleCM = handle;
           }
        }

        //点击网易云音乐的登录,动态id不好定位
       // driver.findElement(By.xpath("//*[@id=\"auto-id-N4GvXnq8c42v6OmS\"]/a")).click();

         //方案一：点击登录，绝对路径
        //driver.findElement(By.xpath("/html/body/div[1]/div[1]/div[1]/div[1]/a")).click();

         //方案二:点击登录，相对路径，找到一个唯一值class，以其为参照找到登录元素
         driver.findElement(By.xpath("//div[@class=\"m-tophead f-pr j-tflag\"]/a")).click();

         //点击qq登录 ,动态id，此处以class为参照找qq登录元素
         //driver.findElement(By.xpath("//*[@id="auto-id-he1mw81UnDRge7Ui"]/div/div[2]/ul/li[2]/a")).click();  //找不到该元素
          driver.findElement(By.xpath("//div[@class='lyct lyct-1']/div/div[2]/ul/li[2]/a")).click();

          //切换窗口，集合set：里面都是字符串
              Set<String> handles2 = driver.getWindowHandles();

          //新建一个目标句柄，用于找到想要的句柄之后存放
          String targetHandleQQ = null;

          //循环查找所有句柄
          for(String handle2 : handles2){

           //获取切换后句柄的浏览器标题是网易云音乐
           if(driver.switchTo().window(handle2).getTitle().equals("QQ帐号安全登录")){

              //将这个找到的句柄作为目标句柄
              targetHandleQQ = handle2;
           }
          }
          //切换到目标窗口QQ帐号安全登录
          driver.switchTo().window(targetHandleQQ);

          //等待
          try {
         Thread.sleep(3000);
      } catch (InterruptedException e) {
         // TODO Auto-generated catch block
         e.printStackTrace();
      }

          //切换iframe
          driver.switchTo().frame("ptlogin_iframe");

          //第二种方法：用iframe这个元素的 Webelement类型
         //  WebElement iframe = driver.findElement(By.xpath("//iframe[@id='ptlogin_iframe']"));
        //    driver.switchTo().frame(iframe);

          //点击头像完成登录
          driver.findElement(By.xpath("//*[@id=\"img_out_1062807640\"]")).click();

          //切换回来网易云音乐
          driver.switchTo().window(targetHandleCM); 

          //等待
          try {
         Thread.sleep(3000);
      } catch (InterruptedException e) {
         // TODO Auto-generated catch block
         e.printStackTrace();
      }

          //搜索框输入happy
          driver.findElement(By.xpath("//*[@id=\"srch\"]")).sendKeys("happy"); 

        }

    }

　　

五、小结

---

本文主要讲述了一下UI定位的常用方法，以及经常会遇到的坑。面对如今前端框架经常调整，常常没有固定的id或者唯一的name，我们很难维护脚本的稳定性。只有不断的拓展自己的知识面，掌握更多的定位方法，灵活选择和巧妙的结合使用，才能避免少犯错误。进而提高UI自动化的可使用性。

后期可以将Java selenium+Maven+TestNG+Jenkins框架结合起来，运用套件的形式将不同的单个UI case串联起来执行。通过git持续集成在Jenkins上面，运用TestNG会在执行后默认生成报告或者Jenkins上面的图形插件，进而可以更直观的看到自动化用例的执行结果。