Web UI自动化(selenium+java)

【郑大钱呀】【_公】【_众】【_号】，我们一起交流，一起学习。

声明

自动化测试请在允许授权的测试环境下进行,不可有任何危害网络安全的操作，如有违规操作，与本文无关。本文有不少内容，参考了CSDN的博主[Penny 要努力呀]，大家也可以直接去访问，写的很详细，很赞。

自动化开发环境搭建

环境准备

1. JDK安装并配置完成
2. 已经安装好浏览器，这里我们使用谷歌浏览器
3. IDEA已经安装,直接官网下就可以，社区版免费

浏览器驱动下载

使用selenium需要下载一个WebDriver，要注意WebDriver的版本要与浏览器的版本类型一致，否则可能会出异常，我们使用的浏览器版本如下：

所以我们这里要去下载谷歌浏览器对应版本的WebDriver,地址如下：

https://www.selenium.dev/documentation/webdriver/getting_started/install_drivers/

选择和自己浏览器相符合的版本即可，这里我们选择mac这个版本，如果是其他系统就选择对应的版本：

如果你的操作系统是mac的话，需要在终端，将目录切换至driver所在的目录，执行如下命令：

xattr -d com.apple.quarantine chromedriver

否则会报如下的错误：MacOS无法打开“chromedriver”，因为无法验证开发者

IDEA 创建Maven项目

这里我们选择使用java语言来进行开发，selenium框架也有对应的python版本，在jar管理上，我们使用maven来管理,简单且方便。

我们使用IDEA创建一个maven项目吗，菜单路径：File->New->Project：

输入项目名和项目路径，点击Finish即可：

完成后截图如下：

我们打开pom.xml文件导入selenium和testNG的依赖包，完整的pom文件信息如下，主要关注依赖的坐标就可以了，添加完依赖包的坐标后，记得刷新一下，把包引进来，没有的，需要等待它下载完成，否则会报红：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>SeleniumStudy</artifactId>
    <version>1.0-SNAPSHOT</version>
    <dependencies>
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-java</artifactId>
            <version>4.1.2</version>
        </dependency>
        <dependency>
            <groupId>org.testng</groupId>
            <artifactId>testng</artifactId>
            <version>7.5</version>
        </dependency>
    </dependencies>
</project>

这里我们引入了两个依赖包，selenium包和testNG测试框架，引入testNG是方便我们测试。

selenium初探

我们先感受一下selenium的使用，这里我们使用的网站是我们自己开发在本地的项目，我们以最经典的登录为例，登录界面如下：

示例代码如下：

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class SeleniumTest {
    @Test
    public void login(){
        // 设置驱动
        System.setProperty("webdriver.chrome.driver", "/Users/yangchen/MyProject/SeleniumStudy/driver/chromedriver");
        // 创建一个WebDriver对象
        WebDriver driver = new ChromeDriver();
        // 打开Web页面
        driver.get("http://localhost:8080/#/");
        // 通过ID定位到账户输入框
        driver.findElement(By.id("account")).sendKeys("123456@qq.com");
        driver.findElement(By.id("password")).sendKeys("123456");
        driver.findElement(By.id("login_btn")).click();

        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        driver.close();
    }
}

执行结果如下：

我们在上面实现了一个简单的登录功能，在这个程序中我们可以了解到：

1. @Test是一个TestNG测试框架中的注解，当方法被该注解标识，就可以单独运行，这样就不用写主方法了，后面我们单独开一期，系统的学习一下TestNG的框架
2. Web UI自动化的创建思路，一般都是创建一个WebDriver对象，就相当于你拥有了一个浏览器，然后通过get()方法进入你要进行测试的网页，然后再通过元素定位去操作每个元素，这也就是我们通常说的找对象，当操作完成后，最后我们关闭浏览器，释放资源。
3. 基本上所有的UI自动化测试，很大的一部分工作内容就是在元素的定位。

Selenium元素定位

By.id定位

该方法即使通过Web元素的id属性来定义，一般情况下如果元素有id,我们就使用id定义，因为id一般都是不重复的，定位准确，我们上面的示例中的元素定义就采用的id定位。

前端页面代码

<input id="password" placeholder="请输入密码" class="el-input__inner">

java定位代码

driver.findElement(By.id("password"));

By.name定位

该方法与By.id方法类似，只不是通过name属性来定位的,有的时候，前端元素，它没有id,但是它有name，这个时候我们就可以使用name来定位。

前端页面代码

<input name="email" placeholder="请输入邮箱" class="el-input__inner">

java定位代码

driver.findElement(By.name("email"))

By.className定位

有的时候，他们既没有id也没有name,但是它有className，这个class不是编程中的类，它和id一样，也是前端元素的一种属性，与id不一样的是，id是唯一的，但是className是不唯一的。
前端页面代码

<input name="email" placeholder="请输入邮箱" class="el-input__inner">
<input name="password" placeholder="请输入密码" class="el-input__inner">

java定位代码

// 定位邮箱输入框
driver.findElement(By.className("el-input__inner")).sendKeys("123456@qq.com");
driver.findElement(By.id("password")).sendKeys("123456");
driver.findElement(By.id("login_btn")).click();

在我们的页面，有两个元素，邮箱输入框和密码输入框，他们的className都是一样的，但是为什么还是能准确定位到邮箱输入框，这是因为我们在找元素的时候，使用的是findElement方法，使用find_element()查找元素，但有多个元素满足条件时，他只取所有满足条件的元素列表的第1个元素,因为邮箱在第一个位置，所以就不会报错，但是如果用这个方法定位密码的输入框就会有问题。

此时就需要使用到find_element()方法了，该方法会返回一个List<E>,也就是一个数组集合，此时我们可以通过使用List<E>中get(int index)方法，来取到第二个元素完成元素定位，关键代码如下：

driver.findElement(By.className("el-input__inner")).sendKeys("123456@qq.com");
driver.findElements(By.className("el-input__inner")).get(1).sendKeys("123456");

By.tagName定位

该方法就是通过元素的标签定位，在html页面中有很多标签元素，如：input、div、span、button等等,因此我们也可以使用标签来定位，关键代码如下：
前端页面代码

<input name="email" placeholder="请输入邮箱" class="el-input__inner">
<input name="password" placeholder="请输入密码" class="el-input__inner">

java定位代码

driver.findElement(By.tagName("input")).sendKeys("123456@qq.com");
driver.findElements(By.tagName("input")).get(1).sendKeys("123456");

By.linkText定位

该方法就是专门用来定位超链接文本的，比如我们平台的数据解读说明超链接文本，页面如下：

，前端代码如下：

<a class="el-link el-link--primary is-underline