文章/答案/技术大牛

发布

社区首页 >专栏 >【项目测试】博客系统—Selenium自动化测试、编写测试用例

【项目测试】博客系统—Selenium自动化测试、编写测试用例

三三是该溜子

发布于 2025-02-26 01:23:54

18100

代码可运行

文章被收录于专栏：该溜子的专栏该溜子的专栏

运行总次数：0

代码可运行

零：导入

本系列文章将对博客系统项目进行自动化UI测试

1：UI测试

什么是UI测试呢——全称是用户界面测试（User Interface Testing）

这里包含用户界面的布局测试，元素的显示，功能是否完好等等，本文将主要对我们的功能方法进行自动化接口测试

2：XMind

这是一款脑图软件，我们可以利用这款软件，编写我们的测试用例，非常的方便，小伙伴们可以自行下载，以下测试用例使用XMind软件进行编写

一：项目介绍

1：访问链接

博客登陆页

用户名和密码后台私信阿华哈

2：主要测试页面

（1）登录页面

（2）博客列表页面

（3）博客详情页面

（4）发布博客页面

3：主要功能

用户登录，查看博客，发布博客，博客编辑

二：测试用例设计

三：创建blog_test测试文件

1：引入依赖

（1）selenium依赖

        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-java</artifactId>
            <version>4.0.0</version>
        </dependency>

（2）自动扫描更新浏览器驱动

简单理解即可：自动下载和配置浏览器所需的驱动——该库可以自动检测系统中安装的浏览器版本，并根据版本信息下载相应的 WebDriver 二进制文件，避免了手动下载和配置 WebDriver 的繁琐过程

        <dependency>
            <groupId>io.github.bonigarcia</groupId>
            <artifactId>webdrivermanager</artifactId>
            <version>5.5.3</version>
        </dependency>

（3）主要用于屏幕截图

commons-io 是 Apache Commons 项目下的一个工具库，它提供了一系列用于处理输入输出（I/O）操作的实用类和方法，简化了 Java 中文件、流、字符串等的操作。

        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>

2：实现工具类

这里是我们测试常用的重复代码，主要是创建驱动和屏幕截图

（1）创建驱动对象

    /**
     * 创建驱动对象
     * @return
     */
    public static WebDriver createDriver(){
        if(driver == null){
            WebDriverManager.chromedriver().setup();
            ChromeOptions options = new ChromeOptions();
            options.addArguments("--remote-allow-origins");

            driver = new ChromeDriver(options);

            driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(2));
        }
        return driver;
    }

（2）屏幕截图

细节：

①截图按天为单位进行管理

②这一行代码是截图的核心

第一步：driver变量是WebDriver类型，代表一个浏览器驱动，TakeScreenshot是Selenium提供的接口，提供了屏幕截图方法

这里将 driver 对象强制转换为 TakesScreenshot 类型，在调用截图方法

注：不是所有的 WebDriver 实现类都能直接转换为 TakesScreenshot 类型，不过常见的浏览器驱动（如 ChromeDriver、FirefoxDriver 等）都实现了这个接口，所以这种转换通常是ok的

第二步：OutputType是 Selenium 提供的一个枚举类，定义了截图的输出类型是FILE文件！

File srcFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);

    /**
     * 获取当前屏幕截图的时间
     */
    public List<String> getTime(){
        SimpleDateFormat sim1 = new SimpleDateFormat("yyyyMMdd-HHmmssSS");
        SimpleDateFormat sim2 = new SimpleDateFormat("yyyyMMdd");
        String fileName = sim1.format(System.currentTimeMillis());//文件格式名称，在集合中下标为1
        String dicName = sim2.format(System.currentTimeMillis());//文件夹格式名称，在集合中下标为0
        List<String> list = new ArrayList<>();
        list.add(dicName);
        list.add(fileName);
        return list;
    }

    /**
     * 获取屏幕截图
     */
    public void getScreenShot(String str) throws IOException {
        List<String> list = getTime();
        //dir+filename
// ./指的是当前的项⽬路径下，也就是blog_test下
// ./src/test/java/com/blogWebAutoTest/dirname/filename
// ./src/test/java/image/20230212/test01_20230212-123030毫秒.png
        String fileName = "./src/test/java/image/" + list.get(0) + "/" + str + "_" + list.get(1) + ".png";
        File srcFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);

        FileUtils.copyFile(srcFile,new File(fileName));
    }

四：登录页面测试

1：页面加载测试

这里我们可以检查页面上的元素是否能被找到，比如说，提交按钮，用户名，密码等等

    /**
     * 检查页面是否加载成功
     */
    public void loginPageRight(){
        driver.findElement(By.cssSelector("body > div.container-login > div > h3"));
        driver.findElement(By.cssSelector("#submit"));
    }

2：正常登录情况

第一步：我们需要先清空一下我们用户名和密码的输入框，很重要这一步，（不清空可能会和之前测试中的字符串拼接）

第二步：给两个输入框赋值

第三步：提交

第四步：检查是否登陆成功了呢？那看我们登陆成功后跳转的页面里的元素有没有加载出来嘿嘿~~

注：这里我们的屏幕截图方法传入的字符串参数，是当前类的名字。

    /**
     * 检查正常登录情况
     */
    public void loginSuc() throws IOException {
        //每次登录前先清空一下我们的输入框
        driver.findElement(By.cssSelector("#username")).clear();
        driver.findElement(By.cssSelector("#password")).clear();

        driver.findElement(By.cssSelector("#username")).sendKeys("zhangsan");
        driver.findElement(By.cssSelector("#password")).sendKeys("123456");
        driver.findElement(By.cssSelector("#submit")).click();

        //TODO：点击后通过检查页面元素判断是否登陆成功
        //这里挑选元素也是有讲究的：公共的都具备的特点,这里我找的是"文章"这个元素和"头像所处的那一个框框"

        driver.findElement(By.cssSelector("body > div.container > div.left > div > div:nth-child(4) > span:nth-child(1)"));
        driver.findElement(By.cssSelector("body > div.container > div.left > div > div:nth-child(4) > span:nth-child(1)"));

        //断言
        String expected = driver.getTitle();
        assert expected.equals("博客列表页");

        getScreenShot(getClass().getName());
        driver.navigate().back();

    }

3：登录失败测试

这里的步骤其实跟上面类似

但是，有一个问题要注意：这里的弹窗不属于我们当前页面句柄管理，我们需要去切换句柄到弹窗，才能对弹窗做处理，处理完弹窗，句柄会自动切换回我们当前页面。

还有一个很ex的点：你去切换句柄到弹窗的时候，可能代码执行速度太快，当前弹窗元素还没加载出来呢，这就会报错

（1）错误展示

我们把这个显示等待注掉，就g了——NoAlertPresentException！！！！

（2）完整代码

    /**
     * 测试登录失败
     */
    public void loginFail() throws IOException, InterruptedException {
        //TODO:确保登录输入框中是没有东西的
        //方法一：刷新页面
//        driver.navigate().refresh();
        //方法二：清除输入框中的内容，这里在登录输入框中已经实现

        driver.navigate().refresh();

        driver.findElement(By.cssSelector("#username")).sendKeys("zhangsan");
        driver.findElement(By.cssSelector("#password")).sendKeys("123");
        driver.findElement(By.cssSelector("#submit")).click();

//        String res = driver.findElement(By.cssSelector("body")).getText();//处理方式不同，操作不一样

        //处理弹窗
        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(3));//就是加载的太慢了，纯逆天！！！！
        wait.until(ExpectedConditions.alertIsPresent());
        Alert alert = driver.switchTo().alert();
        String res = alert.getText();
        alert.accept();


        getScreenShot(getClass().getName());
//        System.out.println(res);
        assert res.equals("密码错误");

    }

五：博客详情页测试

1：页面加载测试

public class ListPage extends AutotestUtils {
    public static String url = "http://39.105.158.244:8080/blog_list.html";
    public ListPage(){
        super(url);
    }

    /**
     * 检查博客页面是否能正常显示
     */
    public void listPageLoadRight() throws IOException {
        driver.findElement(By.cssSelector("body > div.nav > a:nth-child(5)"));
        getScreenShot(getClass().getName());
    }
}

六：博客发布页测试

1：检查发布博客功能

package tests;

import common.AutotestUtils;
import org.openqa.selenium.By;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: Hua YY
 * Date: 2025-02-23
 * Time: 15:25
 */
public class EditPage extends AutotestUtils {
    public static String url = "http://39.105.158.244:8080/blog_edit.html";
    public EditPage(){
        super(url);
    }

    /**
     * 检查写博客是否能正常发布
     */
    public void editSuc(){

        driver.findElement(By.cssSelector("#title")).sendKeys("我是大大怪");

        driver.findElement(By.cssSelector("#submit")).click();
    }
}