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

北京-宏哥

发布于 2021-08-10 10:22:05

1.2K0

发布于 2021-08-10 10:22:05

文章被收录于专栏：Java+ Selenium自动化测试北京宏哥Java+ Selenium自动化测试

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();
    }

}