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

2022-10-02 07:13:34

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.find_element_by_xpath("绝对路径")

具体例子：

xxx.find_element_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.find_element_by_xpath("//标签")

具体例子：

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

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

xxx.find_element_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的其他定位方法。

码农公寓