For：博客系统，“这只是一个测试”

╰+哭是因爲堅強的太久メ 2024-03-26 10:46 71阅读 0赞

#### For：博客系统，“这只是一个测试” ####

*  一 . 根据脑图编写 web 自动化测试用例
 *  二 . 创建自动化项目 , 根据测试用例来实现脚本
 *   *  2.1 创建自动化项目
     *  2.2 根据测试用例来实现脚本
     *   *  2.2.1 创建驱动对象
         *  2.2.2 登录功能
         *   *  页面可以正常打开
             *  登录测试
             *   *  正常登录
                 *  异常登陆
         *  2.2.3 博客列表页
         *   *  登录状态下页面可以正常打开
             *  未登录状态下弹窗提示登录
         *  2.2.4 编辑博客页
         *   *  登录状态下页面可以正常打开
             *   *  小 tips : 屏幕截图
         *  2.2.5 博客详情页

> Hello , 大家好 .
> 
> 这只是一个测试 , 不要慌~
> 
> 这篇文章是针对博客系统进行 Web 自动化测试 , 后续我会不断添加新的测试用例 , 但是目前已经把所有关键的测试用例已经编写完毕了 , 客官请往下仔细品读~
> 
> 测试链接 : [http://43.143.160.85:8080/login.html][http_43.143.160.85_8080_login.html]  
> 
> 
> 如果没有现成的可以测试的项目 , 就可以拿我这个练练手  
> 
> 
> 在进行自动化测试之前 , 我们应该先编写出一系列的测试用例 , 那么执行自动化测试的大体步骤是什么呢 ?
> 
> 1.  使用思维导图编写 web 自动化测试用例
> 2.  创建自动化项目 , 根据测试用例来实现脚本
> 
> 接下来开干吧 !
> 
> ![在这里插入图片描述][d9e423a844994c048e5e9671e41e9821.png]

## 一 . 根据脑图编写 web 自动化测试用例 ##

我们目前只测试界面 , 并不涉及功能测试、性能测试、兼容性测试、易用性测试、安全测试  
我们目前的脑图只是大概地罗列了一下常见的测试用例 , 大家还可以进行细化  
[博客系统 Web 自动化测试用例.xmind][Web _.xmind]

## 二 . 创建自动化项目 , 根据测试用例来实现脚本 ##

### 2.1 创建自动化项目 ###

![image.png][]  
![image.png][image.png 1]  
![image.png][image.png 2]  
然后将我们可能用到的依赖添加进去  
![image.png][image.png 3]

<dependency>
                <groupId>org.seleniumhq.selenium</groupId>
                <artifactId>selenium-java</artifactId>
                <version>4.0.0</version>
            </dependency>
    
            
            <dependency>
                <groupId>commons-io</groupId>
                <artifactId>commons-io</artifactId>
                <version>2.6</version>
            </dependency>
    
            
            <dependency>
                <groupId>org.junit.jupiter</groupId>
                <artifactId>junit-jupiter</artifactId>
                <version>5.8.2</version>
                <scope>test</scope>
            </dependency>
    
            <dependency>
                <groupId>org.junit.platform</groupId>
                <artifactId>junit-platform-suite</artifactId>
                <version>1.8.2</version>
                <scope>test</scope>
            </dependency>

![image.png][image.png 4]  
接下来 , 我们需要在 src 下面的 test 目录下编写代码 , 而不是 main 下面了  
在 test 目录下创建两个包 , 一个是 tests 用来写我们的用例的 , 一个是 common 提供基础方法的  
接下来 , 我们就可以写代码了

### 2.2 根据测试用例来实现脚本 ###

我们在 tests 包底下新建几个类 : BlogLoginTest、BlogListTest、BlogEditTest、BlogDetailTest

> 好习惯 : 文件命名以 Test/Tests 结尾 , 这样的话指定包来运行包下所有用例就不会出现问题

我们的测试模块已经创建好了 , 接下来就是在每个模块中编写对应的用例

#### 2.2.1 创建驱动对象 ####

在编写具体的测试逻辑之前 , 我们首先需要创建浏览器驱动对象 . 但是这样的话 , 我们每个方法之前都需要创建一次 , 冗余度太高了 , 这样的话就会降低自动化测试的效率 , 我们就可以在 common 中创建驱动对象 , 供给所有人使用

package com.webtest.common;
    
    import org.openqa.selenium.chrome.ChromeDriver;
    
    public class AutoTestUtils {
        
        // 创建浏览器驱动对象
        // 创建在 AutoTestUtils 中就可以所有人一起使用
        public ChromeDriver driver;
    
        // 创建驱动对象(浏览器对象)
        public ChromeDriver createChromeDriver() {
        
            // 驱动对象未创建
            if(driver == null) {
        
                driver = new ChromeDriver();
            }
            // 驱动对象已经创建,直接返回
            return driver;
        }
    }

接下来 , 我们就按照刚才写好的测试用例一条一条进行测试

#### 2.2.2 登录功能 ####

![image.png][image.png 5]

##### 页面可以正常打开 #####

我们为了要使用浏览器驱动 , 需要让我们的类去继承 AutoTestUtils 类 , 这样就可以使用里面的浏览器驱动了 (做儿子的用爸爸的东西肯定没问题)

package com.webtest.tests;
    
    import com.webtest.common.AutoTestUtils;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    /**
     * 登录页面的测试
     */
    public class BlogLoginTest extends AutoTestUtils {
        
    
        // 页面可以正常打开
        public void loginLoadSucc() {
        
            // 创建驱动对象
            ChromeDriver driver = createChromeDriver();
        }
    }

但是这样还不太好 , 我们把创建驱动对象写在了每个用例中 , 有没有一种方法 , 能够让每个方法运行之前都能执行到创建浏览器驱动对象呢 ? 而且我们访问的页面也都是登录页面 , 这都是共同的步骤 . 那怎么样能实现共同步骤写一次然后处处使用呢 ?  
这就有请我们的 @BeforeAll 注解隆重登场 ~  
@BeforeAll 修饰的用例在所有用例执行之前执行一次该注解修饰的用例 , 这样的话在最刚开始创建浏览器驱动和访问页面执行一次 , 后续就都不需要再去创建了  
要注意的是 : @BeforeAll 修饰的方法必须是静态的  
![image.png][image.png 6]  
但是将 baseControl 方法改成静态的之后 , 他的方法里面出现了非静态的成员 , 这在 Java 语法中是不支持的 . 所以我们也需要把 createChromeDriver 也设置成静态的  
![image.png][image.png 7]  
创建好之后 , 我们就可以使用 driver 对象了  
但是如果我们在 baseControl() 中创建驱动对象的话 , 在其他方法就访问不了了 .  
所以我们需要让创建驱动对象这一步作为成员变量供其他方法使用

package com.webtest.tests;
    
    import com.webtest.common.AutoTestUtils;
    import org.junit.jupiter.api.BeforeAll;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    /**
     * 登录页面的测试
     */
    public class BlogLoginTest extends AutoTestUtils {
        
    
        // 创建驱动对象
        public static ChromeDriver driver = createChromeDriver();
    
        @BeforeAll
        public static void baseControl() {
        
            // 访问登录页面
            driver.get("http://43.143.160.85:8080/login.html");
        }
    
        // 页面可以正常打开
        public void loginLoadSucc() {
        
    
        }
    }

接下来 , 我们就可以实现检查登录页面是否可以正常打开  
我们检测的办法就是检测页面相关元素存不存在

package com.webtest.tests;
    
    import com.webtest.common.AutoTestUtils;
    import org.junit.jupiter.api.BeforeAll;
    import org.junit.jupiter.api.Test;
    import org.openqa.selenium.By;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    /**
     * 登录页面的测试
     */
    public class BlogLoginTest extends AutoTestUtils {
        
    
        // 创建驱动对象
        public static ChromeDriver driver = createChromeDriver();
    
        @BeforeAll
        public static void baseControl() {
        
            // 访问登录页面
            driver.get("http://43.143.160.85:8080/login.html");
        }
    
        /*
            检查页面可以正常打开
            1. 检查主页按钮是否存在
            2. 检查注册按钮是否存在
            如果这两个按钮找不到,报错了,就证明我们的页面是没加载出来的
         */
        @Test
        public void loginLoadSucc() {
        
            // 检查主页按钮是否存在(使用selector定位)
            driver.findElement(By.cssSelector("body > div.nav > a:nth-child(4)"));
            // 检查注册按钮是否存在(使用XPath定位)
            driver.findElement(By.xpath("/html/body/div[1]/a[2]"));
        }
    
    }

接下来 , 我们再写一个驱动退出

但是这样是存在问题的 , 有没有可能我们这两个用例 , 退出是先执行的 . 那这样再去执行 loginLoadSucc 肯定会报错 , 但是这个报错还不能说明页面有问题 , 所以我们需要指定两个用例的顺序  
那我们退出方法是在所有方法执行完之后再去退出的 , 所以我们就可以给 driverQuit 方法加上注解 : @AfterAll , 同时被 @AfterAll 修饰的方法需要是静态的

package com.webtest.tests;
    
    import com.webtest.common.AutoTestUtils;
    import org.junit.jupiter.api.AfterAll;
    import org.junit.jupiter.api.BeforeAll;
    import org.junit.jupiter.api.Test;
    import org.openqa.selenium.By;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    /**
     * 登录页面的测试
     */
    public class BlogLoginTest extends AutoTestUtils {
        
    
        // 创建驱动对象
        public static ChromeDriver driver = createChromeDriver();
    
        @BeforeAll
        public static void baseControl() {
        
            // 访问登录页面
            driver.get("http://43.143.160.85:8080/login.html");
        }
    
        /*
            检查页面可以正常打开
            1. 检查主页按钮是否存在
            2. 检查注册按钮是否存在
            如果这两个按钮找不到,报错了,就证明我们的页面是没加载出来的
         */
        @Test
        public void loginLoadSucc() {
        
            // 检查主页按钮是否存在(使用selector定位)
            driver.findElement(By.cssSelector("body > div.nav > a:nth-child(4)"));
            // 检查注册按钮是否存在(使用XPath定位)
            driver.findElement(By.xpath("/html/body/div[1]/a[2]"));
        }
    
        @AfterAll
        public static void driverQuit() {
        
            driver.quit();
        }
    }

接下来 , 我们可以写一个套件让用例跑起来 , 我们也可以直接运行 . 但是我们后续的目的是让所有的套件都跑起来 , 所以需要写一个套件 (好习惯)

package com.webtest.tests;
    
    import org.junit.platform.suite.api.SelectClasses;
    import org.junit.platform.suite.api.Suite;
    
    @Suite
    @SelectClasses({
        BlogLoginTest.class})
    public class runSuite {
        
    }

接下来 , 运行这个套件 , 看一下效果  
运行速度非常快 , 而且也没报错 , 这就说明我们的代码是没问题的 .  
那正常登陆了之后 , 会跳转到博客详情页 , 那如果跳转的太快 , 会不会发生错误啊 .  
所以我们需要在创建完驱动对象之后创建隐式等待

> 隐式等待作用在自动化的生命周期中 , 每写一条自动化 , 就会检查这个元素对应的模块在不在

这样的话只有当页面渲染出来之后 , 脚本才会进行下一步操作

##### 登录测试 #####

###### 正常登录 ######

我们刚才检测了登录页面是否可以正常打开 . 可以打开之后 , 我们就可以检测一下输入账号密码这一条测试用例了

package com.webtest.tests;
    
    import com.webtest.common.AutoTestUtils;
    import org.junit.jupiter.api.AfterAll;
    import org.junit.jupiter.api.BeforeAll;
    import org.junit.jupiter.api.Test;
    import org.openqa.selenium.By;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    /**
     * 登录页面的测试
     */
    public class BlogLoginTest extends AutoTestUtils {
        
    
        // 创建驱动对象
        public static ChromeDriver driver = createChromeDriver();
    
        @BeforeAll
        public static void baseControl() {
        
            // 访问登录页面
            driver.get("http://43.143.160.85:8080/login.html");
        }
    
        /*
            检查页面可以正常打开(页面是否渲染成功)
            1. 检查主页按钮是否存在
            2. 检查注册按钮是否存在
            如果这两个按钮找不到,报错了,就证明我们的页面是没加载出来的
         */
        @Test
        public void loginLoadSucc() {
        
            // 检查主页按钮是否存在(使用selector定位)
            driver.findElement(By.cssSelector("body > div.nav > a:nth-child(4)"));
            // 检查注册按钮是否存在(使用XPath定位)
            driver.findElement(By.xpath("/html/body/div[1]/a[2]"));
        }
    
        /*
            检查页面是否可以正常登录
            输入正确的账号密码测试即可
         */
        public void loginSucc() {
        
            // 这三部只是保证登录的步骤执行了,但是不一定保证成功
            // 输入用户名
            driver.findElement(By.cssSelector("#username")).sendKeys();
            // 输入密码
            driver.findElement(By.cssSelector("#password")).sendKeys();
            // 点击提交按钮
            driver.findElement(By.cssSelector("#submit")).click();
    
            // 我们还需要对登录结果进行检测
            // 进入到了博客列表页才算成功
            // 我们定位博客列表页几个关键位置在不在即可:查看文章+修改文章+删除文章
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(1)"));
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(2)"));
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(3)"));
            
        }
        
        @AfterAll
        public static void driverQuit() {
        
            driver.quit();
        }
    }

但是我们想测试多账号的情况 , 就需要使用 @ParameterizedTest + @CsvSource(\{“admin,123456”,“Ray,123456”\}) 这两个注解了

package com.webtest.tests;
    
    import com.webtest.common.AutoTestUtils;
    import org.junit.jupiter.api.AfterAll;
    import org.junit.jupiter.api.BeforeAll;
    import org.junit.jupiter.api.Test;
    import org.junit.jupiter.params.ParameterizedTest;
    import org.junit.jupiter.params.provider.CsvSource;
    import org.openqa.selenium.By;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    /**
     * 登录页面的测试
     */
    public class BlogLoginTest extends AutoTestUtils {
        
    
        // 创建驱动对象
        public static ChromeDriver driver = createChromeDriver();
    
        @BeforeAll
        public static void baseControl() {
        
            // 访问登录页面
            driver.get("http://43.143.160.85:8080/login.html");
        }
    
        /*
            检查页面可以正常打开(页面是否渲染成功)
            1. 检查主页按钮是否存在
            2. 检查注册按钮是否存在
            如果这两个按钮找不到,报错了,就证明我们的页面是没加载出来的
         */
        @Test
        public void loginLoadSucc() {
        
            // 检查主页按钮是否存在(使用selector定位)
            driver.findElement(By.cssSelector("body > div.nav > a:nth-child(4)"));
            // 检查注册按钮是否存在(使用XPath定位)
            driver.findElement(By.xpath("/html/body/div[1]/a[2]"));
        }
    
        /*
            检查页面是否可以正常登录
            输入正确的账号密码测试即可
         */
        @ParameterizedTest
        @CsvSource({
        "admin,123456","Ray,123456"})
        public void loginSucc() {
        
            // 这三部只是保证登录的步骤执行了,但是不一定保证成功
            // 输入用户名
            driver.findElement(By.cssSelector("#username")).sendKeys();
            // 输入密码
            driver.findElement(By.cssSelector("#password")).sendKeys();
            // 点击提交按钮
            driver.findElement(By.cssSelector("#submit")).click();
    
            // 我们还需要对登录结果进行检测
            // 进入到了博客列表页才算成功
            // 我们定位博客列表页几个关键位置在不在即可:查看文章+修改文章+删除文章
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(1)"));
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(2)"));
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(3)"));
    
        }
    
        @AfterAll
        public static void driverQuit() {
        
            driver.quit();
        }
    }

但是不出意外就又要出意外了 . 我们在验证了 admin 之后 , 页面就已经跳转到博客详情页了 , 此时再去执行 Ray 的话 , 就定位不到用户名输入框和密码输入框了  
我们需要在最后调用这条语句 driver.navigate().back(); 返回上一页 , 也就是登录页

package com.webtest.tests;
    
    import com.webtest.common.AutoTestUtils;
    import org.junit.jupiter.api.AfterAll;
    import org.junit.jupiter.api.BeforeAll;
    import org.junit.jupiter.api.Test;
    import org.junit.jupiter.params.ParameterizedTest;
    import org.junit.jupiter.params.provider.CsvSource;
    import org.openqa.selenium.By;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    /**
     * 登录页面的测试
     */
    public class BlogLoginTest extends AutoTestUtils {
        
    
        // 创建驱动对象
        public static ChromeDriver driver = createChromeDriver();
    
        @BeforeAll
        public static void baseControl() {
        
            // 访问登录页面
            driver.get("http://43.143.160.85:8080/login.html");
        }
    
        /*
            检查页面可以正常打开(页面是否渲染成功)
            1. 检查主页按钮是否存在
            2. 检查注册按钮是否存在
            如果这两个按钮找不到,报错了,就证明我们的页面是没加载出来的
         */
        @Test
        public void loginLoadSucc() {
        
            // 检查主页按钮是否存在(使用selector定位)
            driver.findElement(By.cssSelector("body > div.nav > a:nth-child(4)"));
            // 检查注册按钮是否存在(使用XPath定位)
            driver.findElement(By.xpath("/html/body/div[1]/a[2]"));
        }
    
        /*
            检查页面是否可以正常登录
            输入正确的账号密码测试即可
         */
        @ParameterizedTest
        @CsvSource({
        "admin,123456","Ray,123456"})
        public void loginSucc(String username,String password) {
        
            // 这三部只是保证登录的步骤执行了,但是不一定保证成功
            // 输入用户名
            driver.findElement(By.cssSelector("#username")).sendKeys();
            // 输入密码
            driver.findElement(By.cssSelector("#password")).sendKeys();
            // 点击提交按钮
            driver.findElement(By.cssSelector("#submit")).click();
    
            // 我们还需要对登录结果进行检测
            // 进入到了博客列表页才算成功
            // 我们定位博客列表页几个关键位置在不在即可:查看文章+修改文章+删除文章
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(1)"));
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(2)"));
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(3)"));
            
            // 返回到上一界面:登录界面
            driver.navigate().back();
        }
    
        @AfterAll
        public static void driverQuit() {
        
            driver.quit();
        }
    }

最后 , 我们把参数替换到 sendKeys 中

package com.webtest.tests;
    
    import com.webtest.common.AutoTestUtils;
    import org.junit.jupiter.api.AfterAll;
    import org.junit.jupiter.api.BeforeAll;
    import org.junit.jupiter.api.Test;
    import org.junit.jupiter.params.ParameterizedTest;
    import org.junit.jupiter.params.provider.CsvSource;
    import org.openqa.selenium.By;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    /**
     * 登录页面的测试
     */
    public class BlogLoginTest extends AutoTestUtils {
        
    
        // 创建驱动对象
        public static ChromeDriver driver = createChromeDriver();
    
        @BeforeAll
        public static void baseControl() {
        
            // 访问登录页面
            driver.get("http://43.143.160.85:8080/login.html");
        }
    
        /*
            检查页面可以正常打开(页面是否渲染成功)
            1. 检查主页按钮是否存在
            2. 检查注册按钮是否存在
            如果这两个按钮找不到,报错了,就证明我们的页面是没加载出来的
         */
        @Test
        public void loginLoadSucc() {
        
            // 检查主页按钮是否存在(使用selector定位)
            driver.findElement(By.cssSelector("body > div.nav > a:nth-child(4)"));
            // 检查注册按钮是否存在(使用XPath定位)
            driver.findElement(By.xpath("/html/body/div[1]/a[2]"));
        }
    
        /*
            检查页面是否可以正常登录
            输入正确的账号密码测试即可
         */
        @ParameterizedTest
        @CsvSource({
        "admin,123456","Ray,123456"})
        public void loginSucc(String username,String password) {
        
            // 这三部只是保证登录的步骤执行了,但是不一定保证成功
            // 输入用户名
            driver.findElement(By.cssSelector("#username")).sendKeys(username);
            // 输入密码
            driver.findElement(By.cssSelector("#password")).sendKeys(password);
            // 点击提交按钮
            driver.findElement(By.cssSelector("#submit")).click();
    
            // 我们还需要对登录结果进行检测
            // 进入到了博客列表页才算成功
            // 我们定位博客列表页几个关键位置在不在即可:查看文章+修改文章+删除文章
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(1)"));
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(2)"));
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(3)"));
    
            // 返回到上一界面:登录界面
            driver.navigate().back();
        }
    
        @AfterAll
        public static void driverQuit() {
        
            driver.quit();
        }
    }

接下来 , 我们运行一下  
目前来看 , 检查页面是否可以正常打开和检查是否能登陆 谁先谁后是无关紧要的 , 因为我们的 检查是否能登陆 页面中使用了 driver.navigate().back(); , 即使没加载成功跳转到博客详情页了 , 最后也会跳转回登录页  
![image.png][image.png 8]  
那我们看一眼整个过程到底发生什么了  
我们在最后加上一个休眠 2s 的操作 , 避免可能是连续登录造成服务器处理不过来的原因  
![demo.mp4 (6.05MB)][demo.mp4 _6.05MB]我们可以看见 , 最后 Ray 是拼接在了 admin 的后面 , 就变成了 adminRay , 这肯定不是一个正确的账号  
所以我们需要在第二次用例执行之前将输入框清空  
![image.png][image.png 9]  
这次再来运行一下 (前提 : 该账号必须有数据 , 因为我们选择定位的这几个位置都是在有博客的情况下才有的三个位置)  
![image.png][image.png 10]

package com.webtest.tests;
    
    import com.webtest.common.AutoTestUtils;
    import org.apache.commons.io.FileUtils;
    import org.junit.jupiter.api.AfterAll;
    import org.junit.jupiter.api.BeforeAll;
    import org.junit.jupiter.api.Test;
    import org.junit.jupiter.params.ParameterizedTest;
    import org.junit.jupiter.params.provider.CsvSource;
    import org.openqa.selenium.By;
    import org.openqa.selenium.OutputType;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    import java.io.File;
    import java.io.IOException;
    
    /**
     * 登录页面的测试
     */
    public class BlogLoginTest extends AutoTestUtils {
        
    
        // 创建驱动对象
        public static ChromeDriver driver = createChromeDriver();
    
        @BeforeAll
        public static void baseControl() {
        
            // 访问登录页面
            driver.get("http://43.143.160.85:8080/login.html");
        }
    
        /*
            检查页面可以正常打开(页面是否渲染成功)
            1. 检查主页按钮是否存在
            2. 检查注册按钮是否存在
            如果这两个按钮找不到,报错了,就证明我们的页面是没加载出来的
         */
        @Test
        public void loginLoadSucc() {
        
            // 检查主页按钮是否存在(使用selector定位)
            driver.findElement(By.cssSelector("body > div.nav > a:nth-child(4)"));
            // 检查注册按钮是否存在(使用XPath定位)
            driver.findElement(By.xpath("/html/body/div[1]/a[2]"));
        }
    
        /*
            检查页面是否可以正常登录
            输入正确的账号密码测试即可
         */
        @ParameterizedTest
        @CsvSource({
        "admin,123456","Ray,123456"})
        public void loginSucc(String username,String password) throws InterruptedException, IOException {
        
            // 在第二次用例执行之前,先将输入框清空
            driver.findElement(By.cssSelector("#username")).clear();
            driver.findElement(By.cssSelector("#password")).clear();
            
            // 这三部只是保证登录的步骤执行了,但是不一定保证成功
            // 输入用户名
            driver.findElement(By.cssSelector("#username")).sendKeys(username);
            // 输入密码
            driver.findElement(By.cssSelector("#password")).sendKeys(password);
            // 点击提交按钮
            driver.findElement(By.cssSelector("#submit")).click();
    
            // 我们还需要对登录结果进行检测
            // 进入到了博客列表页才算成功
            // 我们定位博客列表页几个关键位置在不在即可:查看文章+修改文章+删除文章
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(1)"));
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(2)"));
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(3)"));
    
            // 返回到上一界面:登录界面
            driver.navigate().back();
        }
    
        @AfterAll
        public static void driverQuit() {
        
            driver.quit();
        }
    }

###### 异常登陆 ######

我们针对异常登陆再来写一个方法 , 还是老步骤 , 先将输入框清空 , 然后输入错误的账号密码 , 然后点击提交 . 我们的网页就会弹窗提示您账号或密码错误 , 所以我们需要切换到弹窗然后点击确定 , 使用这两条语句  
Alert alert = driver.switchTo().alert();  
alert.accept();

package com.webtest.tests;
    
    import com.webtest.common.AutoTestUtils;
    import org.apache.commons.io.FileUtils;
    import org.junit.jupiter.api.AfterAll;
    import org.junit.jupiter.api.BeforeAll;
    import org.junit.jupiter.api.Test;
    import org.junit.jupiter.params.ParameterizedTest;
    import org.junit.jupiter.params.provider.CsvSource;
    import org.openqa.selenium.Alert;
    import org.openqa.selenium.By;
    import org.openqa.selenium.OutputType;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    import java.io.File;
    import java.io.IOException;
    
    /**
     * 登录页面的测试
     */
    public class BlogLoginTest extends AutoTestUtils {
        
    
        // 创建驱动对象
        public static ChromeDriver driver = createChromeDriver();
    
        @BeforeAll
        public static void baseControl() {
        
            // 访问登录页面
            driver.get("http://43.143.160.85:8080/login.html");
        }
    
        /*
            检查页面可以正常打开(页面是否渲染成功)
            1. 检查主页按钮是否存在
            2. 检查注册按钮是否存在
            如果这两个按钮找不到,报错了,就证明我们的页面是没加载出来的
         */
        @Test
        public void loginLoadSucc() {
        
            // 检查主页按钮是否存在(使用selector定位)
            driver.findElement(By.cssSelector("body > div.nav > a:nth-child(4)"));
            // 检查注册按钮是否存在(使用XPath定位)
            driver.findElement(By.xpath("/html/body/div[1]/a[2]"));
        }
    
        /*
            检查页面是否可以正常登录
            输入正确的账号密码测试即可
         */
        @ParameterizedTest
        @CsvSource({
        "admin,123456","Ray,123456"})
        public void loginSucc(String username,String password) throws InterruptedException, IOException {
        
            // 在第二次用例执行之前,先将输入框清空
            driver.findElement(By.cssSelector("#username")).clear();
            driver.findElement(By.cssSelector("#password")).clear();
    
            // 这三部只是保证登录的步骤执行了,但是不一定保证成功
            // 输入用户名
            driver.findElement(By.cssSelector("#username")).sendKeys(username);
            // 输入密码
            driver.findElement(By.cssSelector("#password")).sendKeys(password);
            // 点击提交按钮
            driver.findElement(By.cssSelector("#submit")).click();
    
            // 我们还需要对登录结果进行检测
            // 进入到了博客列表页才算成功
            // 我们定位博客列表页几个关键位置在不在即可:查看文章+修改文章+删除文章
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(1)"));
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(2)"));
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(3)"));
    
            // 返回到上一界面:登录界面
            driver.navigate().back();
        }
    
        /*
            输入错误的账号密码
         */
        @ParameterizedTest
        @CsvSource({
        "admin,error","Ray,error"})
        public void loginFail(String username,String password) throws InterruptedException {
        
            // 在第二次用例执行之前,先将输入框清空
            driver.findElement(By.cssSelector("#username")).clear();
            driver.findElement(By.cssSelector("#password")).clear();
    
            // 这三部只是保证登录的步骤执行了,但是不一定保证成功
            // 输入用户名
            driver.findElement(By.cssSelector("#username")).sendKeys(username);
            // 输入密码
            driver.findElement(By.cssSelector("#password")).sendKeys(password);
            // 点击提交按钮
            driver.findElement(By.cssSelector("#submit")).click();
            
            // 正常情况下应该会弹出弹窗告诉用户账号/密码错误
            // 所以接下来我们需要切换弹窗,来操作弹窗
            Alert alert = driver.switchTo().alert();
            alert.accept();// 点击确认
        }
    
        @AfterAll
        public static void driverQuit() {
        
            driver.quit();
        }
    }

我们运行一下 , 发现报错了  
![image.png][image.png 11]  
no such alert 就代表我们没找到弹窗 . 但是我们确实是登录错误会谈出弹窗啊 . 那应该就是弹窗出来的太慢了 , 下面的获取弹窗还没获取到就报错了  
所以我们让获取弹窗和产生弹窗之间休息一下

package com.webtest.tests;
    
    import com.webtest.common.AutoTestUtils;
    import org.apache.commons.io.FileUtils;
    import org.junit.jupiter.api.AfterAll;
    import org.junit.jupiter.api.BeforeAll;
    import org.junit.jupiter.api.Test;
    import org.junit.jupiter.params.ParameterizedTest;
    import org.junit.jupiter.params.provider.CsvSource;
    import org.openqa.selenium.Alert;
    import org.openqa.selenium.By;
    import org.openqa.selenium.OutputType;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    import java.io.File;
    import java.io.IOException;
    
    /**
     * 登录页面的测试
     */
    public class BlogLoginTest extends AutoTestUtils {
        
    
        // 创建驱动对象
        public static ChromeDriver driver = createChromeDriver();
    
        @BeforeAll
        public static void baseControl() {
        
            // 访问登录页面
            driver.get("http://43.143.160.85:8080/login.html");
        }
    
        /*
            检查页面可以正常打开(页面是否渲染成功)
            1. 检查主页按钮是否存在
            2. 检查注册按钮是否存在
            如果这两个按钮找不到,报错了,就证明我们的页面是没加载出来的
         */
        @Test
        public void loginLoadSucc() {
        
            // 检查主页按钮是否存在(使用selector定位)
            driver.findElement(By.cssSelector("body > div.nav > a:nth-child(4)"));
            // 检查注册按钮是否存在(使用XPath定位)
            driver.findElement(By.xpath("/html/body/div[1]/a[2]"));
        }
    
        /*
            检查页面是否可以正常登录
            输入正确的账号密码测试即可
         */
        @ParameterizedTest
        @CsvSource({
        "admin,123456","Ray,123456"})
        public void loginSucc(String username,String password) throws InterruptedException, IOException {
        
            // 在第二次用例执行之前,先将输入框清空
            driver.findElement(By.cssSelector("#username")).clear();
            driver.findElement(By.cssSelector("#password")).clear();
    
            // 这三部只是保证登录的步骤执行了,但是不一定保证成功
            // 输入用户名
            driver.findElement(By.cssSelector("#username")).sendKeys(username);
            // 输入密码
            driver.findElement(By.cssSelector("#password")).sendKeys(password);
            // 点击提交按钮
            driver.findElement(By.cssSelector("#submit")).click();
    
            // 我们还需要对登录结果进行检测
            // 进入到了博客列表页才算成功
            // 我们定位博客列表页几个关键位置在不在即可:查看文章+修改文章+删除文章
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(1)"));
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(2)"));
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(3)"));
    
            // 返回到上一界面:登录界面
            driver.navigate().back();
        }
    
        /*
            输入错误的账号密码
         */
        @ParameterizedTest
        @CsvSource({
        "admin,error","Ray,error"})
        public void loginFail(String username,String password) throws InterruptedException, IOException {
        
            // 在第二次用例执行之前,先将输入框清空
            driver.findElement(By.cssSelector("#username")).clear();
            driver.findElement(By.cssSelector("#password")).clear();
    
            // 这三部只是保证登录的步骤执行了,但是不一定保证成功
            // 输入用户名
            driver.findElement(By.cssSelector("#username")).sendKeys(username);
            // 输入密码
            driver.findElement(By.cssSelector("#password")).sendKeys(password);
            // 点击提交按钮
            driver.findElement(By.cssSelector("#submit")).click();
    
            // 休息一下,避免下面获取弹窗执行太快,上面还没启动弹窗下面就去获取了
            Thread.sleep(1000);
            
            // 正常情况下应该会弹出弹窗告诉用户账号/密码错误
            // 所以接下来我们需要切换弹窗,来操作弹窗
            Alert alert = driver.switchTo().alert();
            alert.accept();// 点击确认
        }
    
        @AfterAll
        public static void driverQuit() {
        
            driver.quit();
        }
    }

![image.png][image.png 12]  
我们还可以指定这几个用例执行的先后顺序  
在类上面加上注解 : @TestMethodOrder(MethodOrderer.OrderAnnotation.class)  
在每个方法上面加上注解 @Order(顺序) 即可 , 这样我们就可以指定用例执行的顺序了  
我们选择让检查页面是否可以正常打开作为第一个执行的 , 其次是异常登陆 , 最后是正常登录

package com.webtest.tests;
    
    import com.webtest.common.AutoTestUtils;
    import org.apache.commons.io.FileUtils;
    import org.junit.jupiter.api.*;
    import org.junit.jupiter.params.ParameterizedTest;
    import org.junit.jupiter.params.provider.CsvSource;
    import org.openqa.selenium.Alert;
    import org.openqa.selenium.By;
    import org.openqa.selenium.OutputType;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    import java.io.File;
    import java.io.IOException;
    
    /**
     * 登录页面的测试
     */
    @TestMethodOrder(MethodOrderer.OrderAnnotation.class)
    public class BlogLoginTest extends AutoTestUtils {
        
    
        // 创建驱动对象
        public static ChromeDriver driver = createChromeDriver();
    
        @BeforeAll
        public static void baseControl() {
        
            // 访问登录页面
            driver.get("http://43.143.160.85:8080/login.html");
        }
    
        /*
            检查页面可以正常打开(页面是否渲染成功)
            1. 检查主页按钮是否存在
            2. 检查注册按钮是否存在
            如果这两个按钮找不到,报错了,就证明我们的页面是没加载出来的
         */
        @Test
        @Order(1)
        public void loginLoadSucc() {
        
            // 检查主页按钮是否存在(使用selector定位)
            driver.findElement(By.cssSelector("body > div.nav > a:nth-child(4)"));
            // 检查注册按钮是否存在(使用XPath定位)
            driver.findElement(By.xpath("/html/body/div[1]/a[2]"));
        }
    
        /*
            检查页面是否可以正常登录
            输入正确的账号密码测试即可
         */
        @ParameterizedTest
        @Order(3)
        @CsvSource({
        "admin,123456","Ray,123456"})
        public void loginSucc(String username,String password) throws InterruptedException, IOException {
        
            // 在第二次用例执行之前,先将输入框清空
            driver.findElement(By.cssSelector("#username")).clear();
            driver.findElement(By.cssSelector("#password")).clear();
    
            // 这三部只是保证登录的步骤执行了,但是不一定保证成功
            // 输入用户名
            driver.findElement(By.cssSelector("#username")).sendKeys(username);
            // 输入密码
            driver.findElement(By.cssSelector("#password")).sendKeys(password);
            // 点击提交按钮
            driver.findElement(By.cssSelector("#submit")).click();
    
            // 我们还需要对登录结果进行检测
            // 进入到了博客列表页才算成功
            // 我们定位博客列表页几个关键位置在不在即可:查看文章+修改文章+删除文章
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(1)"));
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(2)"));
            driver.findElement(By.cssSelector("#artlistDiv > div > div:nth-child(4) > a:nth-child(3)"));
    
            // 返回到上一界面:登录界面
            driver.navigate().back();
        }
    
        /*
            输入错误的账号密码
         */
        @ParameterizedTest
        @Order(2)
        @CsvSource({
        "admin,error","Ray,error"})
        public void loginFail(String username,String password) throws InterruptedException, IOException {
        
            // 在第二次用例执行之前,先将输入框清空
            driver.findElement(By.cssSelector("#username")).clear();
            driver.findElement(By.cssSelector("#password")).clear();
    
            // 这三部只是保证登录的步骤执行了,但是不一定保证成功
            // 输入用户名
            driver.findElement(By.cssSelector("#username")).sendKeys(username);
            // 输入密码
            driver.findElement(By.cssSelector("#password")).sendKeys(password);
            // 点击提交按钮
            driver.findElement(By.cssSelector("#submit")).click();
    
            // 休息一下,避免下面获取弹窗执行太快,上面还没启动弹窗下面就去获取了
            Thread.sleep(1000);
    
            // 正常情况下应该会弹出弹窗告诉用户账号/密码错误
            // 所以接下来我们需要切换弹窗,来操作弹窗
            Alert alert = driver.switchTo().alert();
            alert.accept();// 点击确认
        }
    
        @AfterAll
        public static void driverQuit() {
        
            driver.quit();
        }
    }

#### 2.2.3 博客列表页 ####

![image.png][image.png 13]

##### 登录状态下页面可以正常打开 #####

我们还是先继承 AutoTestUtils , 这样可以获取到浏览器驱动  
![image.png][image.png 14]  
然后写一个方法 , 来检查博客列表页是否能正常打开  
我们只需要定位到几个关键元素即可

最后我们需要在套件中将 BlogListTest 加入进去  
![image.png][image.png 15]  
但是这里有一个问题 , 我们的 BlogLoginTest 也是加入到了套件中的 , 而且 BlogLoginTest 里面是写了 quit 方法的 . 那还没执行到 BlogListTest 的时候 , 浏览器就退出了 , 这肯定是不行的 , 所以我们需要将 quit 移到 BlogListTest 中 , 让博客列表页也执行完之后 , 再去关闭浏览器  
![image.png][image.png 16]  
运行一下  
![image.png][image.png 17]  
但是这里存在一个隐患 : 我们刚才对 BlogLoginTest 类中添加了用例的执行顺序  
如果我们选择先执行正确的用例 , 再选择错误的用例 . 那么第一个类执行完的时候 , 处在的状态是未登录状态(账号/密码错误) , 所以再去执行博客列表页的检验的话 , 就有可能报错  
但是我们这个案例并未出错 , 这个问题大家留意就好

##### 未登录状态下弹窗提示登录 #####

未登录状态下访问个人列表页会弹窗提醒您还没登录 , 所以我们直接切换到弹窗  
点击确定之后 , 就会跳转到登录页 , 我们只需要定位到登录页的几个重要元素 , 判断确定是登录页就 OK 了

package com.webtest.tests;
    
    import com.webtest.common.AutoTestUtils;
    import org.junit.jupiter.api.*;
    import org.openqa.selenium.Alert;
    import org.openqa.selenium.By;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    @TestMethodOrder(MethodOrderer.OrderAnnotation.class)
    public class BlogListTest extends AutoTestUtils {
        
        // 创建浏览器驱动
        public static ChromeDriver driver = createChromeDriver();
    
        @BeforeAll
        public static void baseControl() {
        
            // 访问登录页面
            driver.get("http://43.143.160.85:8080/myblog_list.html");
        }
    
        /*
            检查个人文章列表页是否可以正常加载
         */
        @Test
        @Order(2)
        public void blogListLoadSucc() {
        
            driver.findElement(By.cssSelector("#username"));
            driver.findElement(By.cssSelector("#articlenum"));
        }
    
        /*
            测试未登录状态下弹窗是否会提示跳转到登录页面
         */
        @Test
        @Order(1)
        public void blogListLoginErr() {
        
            // 切换弹窗
            Alert alert = driver.switchTo().alert();
            // 点击确认
            alert.accept();
    
            // 检查是否跳转到了登录页
            driver.findElement(By.cssSelector("#username"));
            driver.findElement(By.cssSelector("#password"));
            driver.findElement(By.cssSelector("#submit"));
        }
    
        // quit() 方法需要加在最后执行的类上,不然会提前退出,后面的类就执行不了了
        @AfterAll
        public static void driverQuit() {
        
            driver.quit();
        }
    }

接下来 , 我们也需要把 runSuite 组件里面的 BlogLoginTest 去掉 , 这样才会保证未登录状态  
运行一下  
![image.png][image.png 18]

#### 2.2.4 编辑博客页 ####

![image.png][image.png 19]

##### 登录状态下页面可以正常打开 #####

我们还是需要先把 quit() 方法挪到 BlogEditTest 中 , 这样就可以保证 BlogEditTest 里面的用例可以被执行到  
然后让 BlogEditTest 继承 AutoTestUtils  
![image.png][image.png 20]

package com.webtest.tests;
    
    import com.webtest.common.AutoTestUtils;
    import org.junit.jupiter.api.AfterAll;
    import org.junit.jupiter.api.Assertions;
    import org.junit.jupiter.api.BeforeAll;
    import org.junit.jupiter.api.Test;
    import org.openqa.selenium.By;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    public class BlogEditTest extends AutoTestUtils {
        
        // 创建浏览器驱动
        public static ChromeDriver driver = createChromeDriver();
    
        @BeforeAll
        public static void baseControl() {
        
            // 访问登录页面
            driver.get("http://43.143.160.85:8080/blog_edit.html");
        }
    
        /*
            检查博客编辑页是否可以正常打开
         */
        @Test
        public void BlogEditLoadSuc() {
        
            driver.findElement(By.cssSelector("body > div.nav > a:nth-child(4)"));
            driver.findElement(By.cssSelector("body > div.nav > a:nth-child(5)"));
        }
    
        /*
            测试提交功能
            由于博客系统使用的 markdown 编辑器是第三方的
            所以不能直接向编辑器输入数据
            我们需要找到上面的状态栏来模拟添加文本
         */
        @Test
        public void editAndSubmitBlog() {
        
            // 先访问一下个人列表页,获取一下文章个数
            driver.get("http://43.143.160.85:8080/myblog_list.html");
            String before = driver.findElement(By.cssSelector("#articlenum")).getText();
    
            // 再回到博客编辑页编辑博客
            driver.get("http://43.143.160.85:8080/blog_edit.html");
    
            // 输入标题
            driver.findElement(By.cssSelector("#title")).sendKeys("自动化测试博客能否提交");
            // 由于博客系统编辑器是第三方的,selenium不能直接输入文本
            // 我们可以通过点击状态栏上面的按钮实现输入操作
            driver.findElement(By.cssSelector("#editorDiv > div.editormd-toolbar > div > ul > li:nth-child(21) > a > i")).click();// 模拟分割线
            driver.findElement(By.cssSelector("#editorDiv > div.editormd-toolbar > div > ul > li:nth-child(20) > a")).click();// 模拟有序列表
            // 点击提交
            driver.findElement(By.cssSelector("body > div.blog-edit-container > div.title > button")).click();
    
            // 我们的博客系统发布文章之后会弹出弹窗提醒用户登陆成功
            // 所以要切换到弹窗,点击确定
            // 避免太快,让他休息一下
            Thread.sleep(1000);
            Alert alert = driver.switchTo().alert();
            alert.accept();
    
            // 提交完之后我们并不知道是否提交成功,可以获取博客列表页文章个数,检查是否与之前文章个数相同,相同就是没添加成功
            Thread.sleep(1000);
            // 获取一下现在的文章数
            String now = driver.findElement(By.cssSelector("#articlenum")).getText();
            // 不相等的话就插入成功了
            Assertions.assertNotEquals(before,now);
        }
        
        // quit() 方法需要加在最后执行的类上,不然会提前退出,后面的类就执行不了了
        @AfterAll
        public static void driverQuit() {
        
            driver.quit();
        }
    }

我们还需要执行一下用例的执行顺序 , 必须让 检查博客编辑页是否加载成功必须放在前面

package com.webtest.tests;
    
    import com.webtest.common.AutoTestUtils;
    import org.junit.jupiter.api.*;
    import org.openqa.selenium.By;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    @TestMethodOrder(MethodOrderer.OrderAnnotation.class)
    public class BlogEditTest extends AutoTestUtils {
        
        // 创建浏览器驱动
        public static ChromeDriver driver = createChromeDriver();
    
        @BeforeAll
        public static void baseControl() {
        
            // 访问登录页面
            driver.get("http://43.143.160.85:8080/blog_edit.html");
        }
    
        /*
            检查博客编辑页是否可以正常打开
         */
        @Test
        @Order(1)
        public void BlogEditLoadSuc() {
        
            driver.findElement(By.cssSelector("body > div.nav > a:nth-child(4)"));
            driver.findElement(By.cssSelector("body > div.nav > a:nth-child(5)"));
        }
    
        /*
            测试提交功能
            由于博客系统使用的 markdown 编辑器是第三方的
            所以不能直接向编辑器输入数据
            我们需要找到上面的状态栏来模拟添加文本
         */
        @Test
        @Order(2)
        public void editAndSubmitBlog() {
        
            // 先访问一下个人列表页,获取一下文章个数
            driver.get("http://43.143.160.85:8080/myblog_list.html");
            String before = driver.findElement(By.cssSelector("#articlenum")).getText();
    
            // 再回到博客编辑页编辑博客
            driver.get("http://43.143.160.85:8080/blog_edit.html");
    
            // 输入标题
            driver.findElement(By.cssSelector("#title")).sendKeys("自动化测试博客能否提交");
            // 由于博客系统编辑器是第三方的,selenium不能直接输入文本
            // 我们可以通过点击状态栏上面的按钮实现输入操作
            driver.findElement(By.cssSelector("#editorDiv > div.editormd-toolbar > div > ul > li:nth-child(21) > a > i")).click();// 模拟分割线
            driver.findElement(By.cssSelector("#editorDiv > div.editormd-toolbar > div > ul > li:nth-child(20) > a")).click();// 模拟有序列表
            // 点击提交
            driver.findElement(By.cssSelector("body > div.blog-edit-container > div.title > button")).click();
    
            // 我们的博客系统发布文章之后会弹出弹窗提醒用户登陆成功
            // 所以要切换到弹窗,点击确定
            // 避免太快,让他休息一下
            Thread.sleep(1000);
            Alert alert = driver.switchTo().alert();
            alert.accept();
    
            // 提交完之后我们并不知道是否提交成功,可以获取博客列表页文章个数,检查是否与之前文章个数相同,相同就是没添加成功
            Thread.sleep(1000);
            // 获取一下现在的文章数
            String now = driver.findElement(By.cssSelector("#articlenum")).getText();
            // 不相等的话就插入成功了
            Assertions.assertNotEquals(before,now);
        }
    
        // quit() 方法需要加在最后执行的类上,不然会提前退出,后面的类就执行不了了
        @AfterAll
        public static void driverQuit() {
        
            driver.quit();
        }
    }

接下来 , 不要忘了把 BlogEditTest 加入到 runSuite 中  
![image.png][image.png 21]  
运行一下  
![image.png][image.png 22]

--------------------

###### 小 tips : 屏幕截图 ######

我们目前已经写了好几个测试用例了 , 如果某一个类里面的某一个测试用例报错了 , 我们是不是可以屏幕截图保存现场呢 ?  
但是要是每个用例都写一遍 , 未免太过于麻烦了 , 我们可以在 common 包下面的 AutoTestUtils 里面编写截图功能

package com.webtest.common;
    
    import org.apache.commons.io.FileUtils;
    import org.apache.commons.io.input.ClosedInputStream;
    import org.openqa.selenium.OutputType;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    import java.io.File;
    import java.io.IOException;
    import java.text.SimpleDateFormat;
    import java.time.Duration;
    import java.util.ArrayList;
    import java.util.List;
    
    public class AutoTestUtils {
        
        // 创建浏览器驱动对象
        // 创建在 AutoTestUtils 中就可以所有人一起使用
        public static ChromeDriver driver;
    
        // 创建驱动对象(浏览器对象)
        public static ChromeDriver createChromeDriver() {
        
            // 驱动对象未创建
            if (driver == null) {
        
                driver = new ChromeDriver();
                // 创建隐式等待
                driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));// 指定等待10s,超过10s就报错
            }
            // 驱动对象已经创建,直接返回
            return driver;
        }
    
        // 得到动态时间
        public List<String> getDynamictime() {
        
            // 文件格式希望是这样
            // 20230218 19:08:30:20
            // 使用 SimpleDateFormat 格式化时间戳
            SimpleDateFormat sdf1 = new SimpleDateFormat("yyyyMMdd-HHmmssSS");// 毫秒是大写的S
            SimpleDateFormat sdf2 = new SimpleDateFormat("yyyyMMdd");
    
            String fileName = sdf1.format(System.currentTimeMillis());
            // 那我们每天都会跑出许多测试用例,都存在一起会冗余
            // 那能不能让文件按照天的维度保存到不同文件夹中
            String dirName = sdf2.format(System.currentTimeMillis());
    
            // 将返回的目录名和文件名存放到 List 中
            List<String> list = new ArrayList<>();
            list.add(dirName);
            list.add(fileName);
            return list;
        }
    
        // 屏幕截图
        // 把所有的用例执行的结果保存下来
        public void getScreenShot(String methodName) throws IOException {
        
            File srcFile = driver.getScreenshotAs(OutputType.FILE);
            // 把屏幕截图生成的临时文件放到指定的路径中
            // 路径(dirName)+文件名(fileName)
            List<String> list = getDynamictime();
            // ./ 指的是当前项目路径下(BlogSharingAutoTest下)
            // ./src/test/java/com/webtest/dirname/filename
            //  ↓↓↓↓↓               ↓↓↓↓↓                ↓↓↓↓↓
            // ./src/test/java/com/webtest/20230218/20230218-19161630.png
            String fileName = "./src/test/java/com/webtest/" + list.get(0) + "/" + methodName + "_" + list.get(1) + ".png";
            FileUtils.copyFile(srcFile, new File(fileName));
        }
    }

我们就可以将每个用例都加上截图功能 , 方便查看具体效果  
注意 : 截图功能最好要放到断言之前

#### 2.2.5 博客详情页 ####

![image.png][image.png 23]  
还是老样子 , 继承 AutoTestUtils , 然后在最上面创建 ChromeDriver , 再定义一个方法跳转到博客详情页 , 该方法由 @BeforeAll 修饰

package com.webtest.tests;
    
    import com.webtest.common.AutoTestUtils;
    import org.junit.jupiter.api.AfterAll;
    import org.junit.jupiter.api.BeforeAll;
    import org.junit.jupiter.api.Test;
    import org.openqa.selenium.By;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    public class BlogDetailTest extends AutoTestUtils {
        
        // 创建浏览器驱动对象
        public static ChromeDriver driver = createChromeDriver();
    
        // 跳转到指定网页
        @BeforeAll
        public static void baseControl() {
        
            driver.get("http://43.143.160.85:8080/blog_content.html?id=3");
        }
    
        /*
            测试详情页能否正常打开
         */
        @Test
        public void blogDetailLoadSucc() {
        
            // 定位文章标题
            driver.findElement(By.cssSelector("#title"));
            // 定位文章发布时间
            driver.findElement(By.cssSelector("#data"));
        }
    
        // quit() 方法需要加在最后执行的类上,不然会提前退出,后面的类就执行不了了
        @AfterAll
        public static void driverQuit() {
        
            driver.quit();
        }
    }

那最后的释放驱动 , 挪来挪去的 , 就很有可能忘 . 那我们该怎么办呢 ?  
我们可以新建一个退出类 , 里面写退出的方法 , 然后在套件的最后调用一下即可

package com.webtest.tests;
    
    import com.webtest.common.AutoTestUtils;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    public class DriverQuit extends AutoTestUtils {
        
        // 创建浏览器驱动
        public static ChromeDriver driver = createChromeDriver();
        
        // 释放浏览器驱动
        @Test
        public void driverQuit() {
        
            driver.quit();
        }
    }

最后在 runSuite 中加入这个类即可

[http_43.143.160.85_8080_login.html]: http://43.143.160.85:8080/login.html
[d9e423a844994c048e5e9671e41e9821.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8974cc41e992462b96e9e824624a4b50.png
[Web _.xmind]: https://www.yuque.com/attachments/yuque/0/2023/xmind/28016775/1676681399475-f0e2d7b7-ce72-4c3e-8ab3-d536a4ab084b.xmind
[image.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/509eec24d0c14701a0be316ec7710649.png
[image.png 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/818cebecb23f446796ea354ee8a547de.png
[image.png 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3397104493b74d4686c332e59241f962.png
[image.png 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5159b31ea54d4edca02756466d724ce7.png
[image.png 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f7bc7198e583455482e7992abdae5d95.png
[image.png 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8b1647f51e104604bd5ebd145fffb653.png
[image.png 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c64d1d34ed2c43688efb08a786e97bca.png
[image.png 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e5b82680e73741b6992704188e304735.png
[image.png 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8ec856d38d6d4494962cea4ded7ed9d0.png
[demo.mp4 _6.05MB]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8331b644ead146d694e2e488db1fea7c.png
[image.png 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/fa5054419a3148d9b796740de21d6917.png
[image.png 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1f27533c3ac04829a2725136dc2a0d7b.png
[image.png 11]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1bfb4cde4ff043bf8503897bef4bd7f6.png
[image.png 12]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/28ac8f8be0d442d89c1ce9fb31b1fd19.png
[image.png 13]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3d13c03ebf894246acd292b5f8c3f81f.png
[image.png 14]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1cda3061495f4dc0b80fac778c3fccc6.png
[image.png 15]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8c1da17f6e784927a68cb6eda4a1f0e4.png
[image.png 16]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/941c667c29594b35906352e3b7b92fd8.png
[image.png 17]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2befee487c8f4c7f932a392f565b20ea.png
[image.png 18]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ad925dab418a4f588e53ca10c28dd80a.png
[image.png 19]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/affbac6bbbcc46fe8c2ec6895be0b1c6.png
[image.png 20]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/cbc19216d4f94a74990a84d051247d52.png
[image.png 21]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6bb44eae546c4cc99c3d98d532a1cb32.png
[image.png 22]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/cb791c8e58774268a4ca812b7ed8d8d2.png
[image.png 23]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ac0ac25467b141ab97aeaf07151fc7ca.png