《手把手教你》系列技巧篇（十四）-java+ selenium自动化测试-元素定位大法之By xpath上卷（详细教程）

1.简介

 按宏哥计划，本文继续介绍WebDriver关于元素定位大法，这篇介绍定位倒数二个方法：By xpath。xpath 的定位方法， 非常强大。  使用这种方法几乎可以定位到页面上的任意元素。

2.什么是xpath？

xpath 是XML Path的简称， 由于HTML文档本身就是一个标准的XML页面，所以我们可以使用Xpath 的用法来定位页面元素。XPath 是XML 和Path的缩写，主要用于xml文档中选择文档中节点。基于XML树状文档结构，XPath语言可以用在整棵树中寻找指定的节点。XPath 定位和CSS定位相比有更大的灵活性。XPath 在文档树中某个节点既可以向前搜索，也可以向后搜索，CSS定位只能在文档树中向前搜索，但XPath的定位速度比CSS 慢一些。

3.xpath定位的缺点

xpath 这种定位方式， webdriver会将整个页面的所有元素进行扫描以定位我们所需要的元素， 这是个非常费时的操作， 如果脚本中大量使用xpath做元素定位的话， 脚本的执行速度可能会稍慢。

4.常用定位方法（8种）

（1）id
（2）name
（3）class name
（4）tag name
（5）link text
（6）partial link text
（7）xpath（今天讲解）
（8）css selector

5.自动测试实战

以百度首页为例，将xpath的各种定位方法一一讲解和分享一下。

5.1大致步骤

1.访问度娘首页。

2.通过xpath定位到元素，点击一下。

5.2绝对路径定位方式

顾名思义，将 Xpath 表达式从 html 的最外层节点，逐层填写，最后定位到操作元素，此方法最为简单，具体格式为：

xxx.By.xpath("绝对路径")

具体例子：

xxx.By.xpath("/html/body/div[x]/form/input") x 代表第x个 div标签，注意，索引从1开始而不是0

具体步骤：

在被测试百度网页中，

（1）打开Chrome浏览器，输入百度网址访问百度首页，F12打开开发者工具，然后Ctrl+F调出输入框，在输入框中输入绝对路径的xpath表达式（/html/body/div/div/div/div/div/form/span/input），回车。查找输入框并输入“北京宏哥”，如下图所示：

（2）按照同样的方法，查找“百度一下”按钮，如下图所示：

（3）点击“百度一下”按钮。

XPath表达式：

（1）/html/body/div/div/div/div/div/form/span/input

（2）/html/body/div/div/div/div/div/form/span[2]/input[@value='百度一下']

java定位语句：

（1）WebElement searchBox = driver.findElement(By.xpath( "/html/body/div/div/div/div/div/form/span/input" ));

（2）WebElement SearchButton = driver.findElement(By.xpath("/html/body/div/div/div/div/div/form/span[2]/input[@value='百度一下']"));

5.2.1绝对路径的缺点

此方法缺点显而易见，当页面元素位置发生改变时，都需要修改，因此，并不推荐使用绝对路径的写法。

5.2.2代码设计

5.2.3参考代码

package lessons;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

/**
 * @author 北京-宏哥
 *
 * 2021年8月3日
 */
public class ByXpath {
    
    public  static  void  main(String [] args) throws InterruptedException {
        
        System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe"); //指定驱动路径
 
        WebDriver driver = new ChromeDriver ();
        //最大化窗口  
        driver.manage().window().maximize();  
        driver.get("http://wwww.baidu.com");
        
        //By xpath 定位
        WebElement wid = driver.findElement(By.xpath( "/html/body/div/div/div/div/div/form/span/input" ));
        
        wid.sendKeys("北京宏哥");
        
        WebElement button = driver.findElement(By.xpath("/html/body/div/div/div/div/div/form/span[2]/input[@value='百度一下']"));
        
        button.click();
        
        //定位到文本，将文本高亮显示
        //创建一个JavascriptExecutor对象
        JavascriptExecutor js =(JavascriptExecutor)driver;
 
        //新闻文本高亮显示颜色
        js.executeScript ( "arguments[0].setAttribute('style', arguments[1]);",wid,"background: orange; border: 2px solid red;");
 
        Thread.sleep (5000);
 
        driver.quit();
    }

}

5.2.4运行代码

1.运行代码，右键Run AS->java Application，控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作，如下小视频所示：

5.3相对路径定位方式

相对路径，以‘//’开头，具体格式为：

xxx.By.xpath("//标签")

具体例子：

xxx.By.xpath("//input[x]") 定位第x个input标签,[x]可以省略，默认为第一个

相对路径的长度和开始位置并不受限制，也可以采取以下方法

xxx.By.xpath("//div[x]/form[x]/input[x]"), [x]依然是可以省略的

具体步骤：

在被测试百度网页中，按照宏哥在5.2中的方法 （1）查找输入框并输入“北京宏哥”，（2）查找“百度一下”按钮，（3）点击“百度一下”按钮。

XPath表达式：

（1）//*[@id="kw"]

（2）//*[@id="su"]

java定位语句：

（1）WebElement searchBox = driver.findElement(By.xpath( "//*[@id='kw']" ));

（2）WebElement SearchButton = driver.findElement(By.xpath("//*[@id='su']"));

5.3.1代码设计

5.3.2参考代码

package lessons;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

/**
 * @author 北京-宏哥
 * 
 * 《手把手教你》系列技巧篇（十四）-java+ selenium自动化测试-元素定位大法之By xpath上篇（详细教程）
 * 
 * 2021年8月3日
 */
public class ByXpath {
    
    public  static  void  main(String [] args) throws InterruptedException {
        
        System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe"); //指定驱动路径
 
        WebDriver driver = new ChromeDriver ();
        //最大化窗口  
        driver.manage().window().maximize();  
        driver.get("http://wwww.baidu.com");
        
        //By xpath 定位
        WebElement SearchBox  = driver.findElement(By.xpath( "//*[@id='kw']" ));
        
        SearchBox.sendKeys("北京宏哥");
        
        WebElement SearchButton  = driver.findElement(By.xpath("//*[@id='su']"));
        
        SearchButton.click();
        
        //定位到文本，将文本高亮显示
        //创建一个JavascriptExecutor对象
        JavascriptExecutor js =(JavascriptExecutor)driver;
 
        //新闻文本高亮显示颜色
        js.executeScript ( "arguments[0].setAttribute('style', arguments[1]);",SearchBox,"background: orange; border: 2px solid red;");
 
        Thread.sleep (5000);
 
        driver.quit();
    }

}

5.3.3运行代码

1.运行代码，右键Run AS->java Application，控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作，如下小视频所示：

6.小结

6.1绝对路径和相对路径的区别

绝对路径  以 "/"  开头， 让xpath 从文档的根节点开始解析

相对路径  以"//" 开头， 让xpath 从文档的任何元素节点开始解析

 7.拓展

7.1使用浏览器调试工具，可以直接获取xpath语句

这个主要是针对不会或者不熟悉xpath语法的小伙伴或者童鞋们宏哥提供的一种方法，其实xpath的语法很简单的，几个小时就可以搞定的。

 　　好了，今天就分享和讲解到这里，下一篇和宏哥继续看xpath的其他定位方法。