使用SpringBoot+SpringMVC+Mybatis+WebSocket实现云聊天项目并对项目进行自动化测试

云聊天

1. 项目介绍

本项目是仿照微信实现网页版聊天程序,用户注册登录后可与在线好友实时聊天,下线好友上线后可以查看到好友发送的消息;用户可以在搜索框搜索用户添加好友;用户还可以查看好友申请列表,选择是否同意好友申请;用户可以删除与好友的聊天记录或者删除好友。

1.2 功能需求

  1. 注册功能
    实现⼀个注册页面。注册页面上包含了⼀个输入框,输入用户名和密码,注册成功后可以选择是否跳转到登录页面。

  2. 登录功能
    实现⼀个登录页面。登录页面上包含⼀个输入框,输⼊用户名和密码,登录成功后可以跳转到主页面。

  3. 主界面
    实现一个主界面。主页面包含以下几个部分:

    • 用户信息:显示用户名以及头像。
    • 搜索框:用于用户搜索添加好友,输入用户名后右侧显示用户名搜索结果。
    • 会话列表:显示当前用户所有会话,点击某个会话即可在右侧显示聊天记录。
    • 好友列表:显示当前用户的所有好友,点击好友列表中的表项,就会跳转到会话列表,同时给会话列表新增⼀个表项。
    • 好友申请列表:显示当前用户收到的好友申请,点击某个申请后,可以在右侧显示中点击拒绝或者同意好友申请。
    • 消息区域:主界面右侧显示消息区域。最上方显示会话名称(好友名或者群聊),中间显示消息内容,下方显示个输入框和发送按钮,用户点击发送按钮则会把输入框中的消息通过网络发送出去。
  4. 消息传输功能
    在输入框中输入消息,点击发送按钮可发送消息。
    如果对方在线,就会即刻显示实时消息。如果对方不在线,上线后就会看到历史消息。

  5. 添加好友功能
    在左上角的输入框中输入要查找的用户,则会根据用户名进行模糊匹配,匹配结果放到右侧列表区中。可以输入一个验证消息,点击按钮发送好友申请。对方会在好友申请列表中收到一个提示信息,点击接收按钮则通过好友申请,点击拒绝按钮则忽略好友申请。
    如果对方不在线,会在上线后看到历史的好友申请。

2. 开发环境

1.前端开发:
技术:HTML、CSS、JavaScript
工具:IntelliJ IDEA 2021.3.1
2.后端开发:
数据库:MySQL5.7
开发语言:Java
技术框架:SpringBoot、SpringMVC、Mybatis、WebSocket
管理工具:Maven
开发工具:Intellij IDEA 2020.1.4
操作系统:Windows10

3. 项目演示

登录页面

在这里插入图片描述

注册页面:
在这里插入图片描述
主界面
在这里插入图片描述
会话列表
在这里插入图片描述

消息区域
在这里插入图片描述

好友列表
在这里插入图片描述
好友申请列表
在这里插入图片描述

用户搜索结果
在这里插入图片描述

以下将对云聊天项目编写测试用例以及主要功能的自动化测试。

4.项目测试

1. 测试用例的编写

请添加图片描述

2. 自动化测试

以下进行部分自动化测试用例的执行,检验项目功能是否符合预期。

2.1 登录功能测试

测试代码: 输入非法用户名或密码逻辑相似,不重复描述。

 //输入正确用户名和密码测试登录功能
    @ParameterizedTest
    @CsvSource({"admin,123456"})
    @Order(1)
    public void loginNormalTest(String username, String password) throws IOException, 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();

        sleep(3000);
        //点击弹窗确定
        Alert alert = driver.switchTo().alert();
        //测试弹窗提示信息是否正确
        String alertText = alert.getText();
        String expect = "登录成功!";
        Assertions.assertEquals(expect, alertText);
        alert.accept();
        //测试是否跳转到主界面
        sleep(5000);
        String url = "http://124.221.76.124:59091/client2.html";
        Assertions.assertEquals(url,driver.getCurrentUrl());

        // 校验当前登录的用户是不是admin,如果是测试通过,否则测试不通过
        String user_name = driver.findElement(By.cssSelector("body > div.client-container > div > div.left > div.user")).getText();
        driver.manage().timeouts().implicitlyWait(3, TimeUnit.SECONDS);
        Assertions.assertEquals(username, user_name);
        sleep(5000);
        
    }

预期效果: 输入正确的用户名和密码弹窗提示登陆成功,点击登录成功跳转到主界面
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

实际效果: 页面正确跳转,与预期结果相符。

2.2 注册功能测试

测试代码:

 //注册功能测试
    @ParameterizedTest
    @CsvSource({"test1,123456"})
    @Order(1)
    public void rigisterTest(String username,String password) throws InterruptedException {
        driver.get("http://124.221.76.124:59091/register.html");
        //先清除用户名和密码框
        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();

        sleep(5000);
        //点击弹窗确定
        Alert alert = driver.switchTo().alert();
        //测试弹窗提示信息是否正确
        String alertText = alert.getText();
        String expect = "注册成功是否跳转登陆页面?";
        Assertions.assertEquals(expect, alertText);
        alert.accept();
        //测试是否跳转到主界面
        sleep(5000);
        String url = "http://124.221.76.124:59091/login.html";
        Assertions.assertEquals(url,driver.getCurrentUrl());
    }

预期效果: 输入不存在的用户名和密码弹窗提示注册成功!是否跳转登录页面,点击确定成功跳转到登录页面。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

实际效果: 页面正确跳转,与预期结果相符。

2.3 主界面测试

2.3.1 用户信息显示

测试代码:

  * 测试登录成功之后主界面用户信息是否正确
     */
    @Test
    public void UserInfoTest() throws InterruptedException {
        sleep(3000);
        String excepted = "admin";
        String actual = driver.findElement(By.xpath("/html/body/div[3]/div/div[1]/div[3]")).getText();
        Assertions.assertEquals(excepted,actual);
    }

预期效果: 当前用户信息是登录用户的信息。
在这里插入图片描述
在这里插入图片描述

实际效果: 用户信息匹配,与预期结果相符。

2.3.2 搜索框功能

预期效果: 输入用户名,点击搜索按钮右侧显示所有与用户名匹配的用户。

 /**
     * 测试搜索框功能
     */
    @ParameterizedTest
    @CsvSource({"zhangsan"})
    public void searchTest(String input) throws InterruptedException {
        sleep(3000);
        //输入搜索内容
        driver.findElement(By.cssSelector("#searchInput")).sendKeys(input);
        sleep(3000);
        //点击搜索
        driver.findElement(By.cssSelector("#searchButton")).click();
        sleep(3000);
        //检查右侧显示是否正确
        String excepted ="zhangsan";
        String actual = driver.findElement(By.cssSelector("#Users > li > div.nameDiv")).getText();
        Assertions.assertEquals(excepted,actual);

    }

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

实际效果: 显示所有相关用户,与预期结果相符。

2.3.3 会话列表

场景一

测试代码:

   /**
     * 测试会话列表功能
     */
    @Test
    public void sessionListTest() throws InterruptedException {
        //场景1,点击会话列表显示所有会话信息
        driver.findElement(By.cssSelector("body > div.client-container > div > div.left > div.tab > div.tab-session")).click();
        sleep(3000);

        //测试用户信息显示是否正确
        String actualName= driver.findElement(By.cssSelector("#session-list > li:nth-child(1) > h3")).getText();
        String exceptedName = "tony";
        Assertions.assertEquals(exceptedName,actualName);
        String actualMessage = driver.findElement(By.cssSelector("#session-list > li:nth-child(1) > p")).getText();
        String exceptedMessage = "我们已经是好友啦,快...";
        Assertions.assertEquals(exceptedMessage,actualMessage);

        //场景2,点击好友列表项查看右侧是否正确会话信息
        driver.findElement(By.cssSelector("#session-list > li:nth-child(1)")).click();
        sleep(3000);
        String actualTitle = driver.findElement(By.cssSelector("#right > div.title")).getText();
        String exceptedTitle = "tony";
        Assertions.assertEquals(exceptedTitle,exceptedTitle);
    }

预期效果: 点击会话列表按钮,显示用户的所有会话信息

实际效果: 会话列表显示正确,与预期结果相符。

场景二

预期效果: 点击会话列表项按钮,右侧显示会话的历史信息

在这里插入图片描述
在这里插入图片描述

实际效果: 历史消息加载成功,与预期结果相符。

2.3.4 好友列表

场景一

测试代码:

/**
     * 测试好友列表功能
     */

    @Test
    public void friendlistTest() throws InterruptedException {
        //场景1,点击好友列表显示所有好友信息
        driver.findElement(By.cssSelector("#getFriend")).click();
        sleep(3000);

        //测试用户信息显示是否正确
        String actualName= driver.findElement(By.cssSelector("#friend-list > li:nth-child(1) > h4")).getText();
        String exceptedName = "john";
        Assertions.assertEquals(exceptedName,actualName);

        //场景2,点击好友列表项查看是否跳转到会话列表项,右侧显示对应聊天记录
        driver.findElement(By.cssSelector("#friend-list > li:nth-child(1)")).click();
        sleep(3000);
        String actualName2= driver.findElement(By.cssSelector("#session-list > li.selected > h3")).getText();
        String exceptedName2 = "john";
        Assertions.assertEquals(exceptedName2,actualName2);
        String actualMessage = driver.findElement(By.cssSelector("#session-list > li.selected > p")).getText();
        String exceptedMessage = "我们已经是好友啦,快...";
        Assertions.assertEquals(exceptedMessage,actualMessage);

        //测试右侧是否显示正确聊天记录
        driver.findElement(By.cssSelector("#session-list > li:nth-child(1)")).click();
        sleep(3000);
        String actualTitle = driver.findElement(By.cssSelector("#right > div.title")).getText();
        String exceptedTitle = "john";
        Assertions.assertEquals(exceptedTitle,actualTitle);
    }

预期效果: 点击好友列表按钮,显示用户的所有好友信息
在这里插入图片描述
在这里插入图片描述

实际效果: 好友列表显示正确,与预期结果相符。

场景二

预期效果: 点击好友列表项按钮,跳转到会话列表并选中与该好友的会话列表项,如果没有就新增一个会话列表项,右侧显示与该好友的聊天记录。
在这里插入图片描述

在这里插入图片描述

实际效果: 跳转到会话列表项成功,与预期结果相符。

2.3.5 添加好友功能

测试代码:

 /**
     * 测试搜索框功能
     */
    @Order(1)
    @ParameterizedTest
    @CsvSource({"zq"})
    public void searchTest(String input) throws InterruptedException {
        sleep(3000);
        //输入搜索内容
        driver.findElement(By.cssSelector("#searchInput")).sendKeys(input);
        sleep(3000);
        //点击搜索
        driver.findElement(By.cssSelector("#searchButton")).click();
        sleep(3000);
        //检查右侧显示是否正确
        String excepted ="zq";
        String actual = driver.findElement(By.cssSelector("#Users > li > div.nameDiv")).getText();
        Assertions.assertEquals(excepted,actual);

    }

    /**
     * 测试添加好友功能
     */
    @Test
    @Order(2)
    public void addFriendTest() throws InterruptedException {

        //在搜索用户测试用例之后,点击添加好友
        driver.findElement(By.cssSelector("#Users > li > div.addDiv")).click();
        sleep(3000);
        //跳转到登录页面登录被添加用户
        driver.get("http://124.221.76.124:59091/login.html");
        //先清除用户名和密码框
        driver.findElement(By.cssSelector("#username")).clear();
        driver.findElement(By.cssSelector("#password")).clear();
        //输入用户名和密码并点击登录
        driver.findElement(By.cssSelector("#username")).sendKeys("zq");
        driver.findElement(By.cssSelector("#password")).sendKeys("123456");

        driver.findElement(By.cssSelector("#submit")).click();
        sleep(3000);
        Alert alert = driver.switchTo().alert();
        alert.accept();

        //查看申请列表是否有好友申请
        sleep(3000);
        driver.findElement(By.cssSelector("#tab-apply")).click();


    }

预期效果: 在搜索框搜索用户名,右侧显示用户搜索结果,输入备注信息,点击添加按钮,被添加用户收到好友申请。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

实际效果: 好友申请发送成功,与预期结果相符。

该功能与搜索框功能还有好友申请列表场景二按顺序执行,可以进一步测试同意或者拒绝好友申请功能。

2.3.6 好友申请列表

测试代码:

    
    /**
     * 测试好友申请列表,并同意好友申请
     */
    @ParameterizedTest
   @Order(3)
    @CsvSource({"admin"})
    public void applListTest(String applyName ) throws InterruptedException {
        //查看申请列表是否有好友申请
        sleep(3000);
        driver.findElement(By.cssSelector("#tab-apply")).click();
        sleep(3000);
        //测试是否是该用户的好友申请
       String actualName =  driver.findElement(By.cssSelector("#Appliers > li > div.applyNameDiv")).getText();
       String exceptedName = applyName;
       Assertions.assertEquals(exceptedName,actualName);
       //同意好友申请
        driver.findElement(By.cssSelector("#Appliers > li > div.agreeTab")).click();
//        //拒绝好友申请
//        driver.findElement(By.cssSelector("#Appliers > li > div.rejectTab")).click();
        sleep(500000);
    }

场景一

预期效果: 点击好友申请列表按钮,右侧显示用户的所有好友申请信息
在这里插入图片描述

实际效果: 好友申请列表显示正确,与预期结果相符。

场景二

预期效果: 在申请列表点击同意按钮,即添加好友成功,并且自动发送一条消息。
在这里插入图片描述

实际效果: 同意好友申请成功,与预期结果相符。

场景三
预期效果: 在申请列表点击拒绝按钮,即清空好友申请列表,忽略申请。
在这里插入图片描述

实际效果: 拒绝好友申请成功,与预期结果相符。

2.3.7 消息传输功能

预期效果: 点击某用户会话列表项,在右侧消息输入区域输入信息,点击发送,该用户收到信息。
在这里插入图片描述
在这里插入图片描述

实际效果: 消息发送接收成功,与预期结果相符。

2.3.7 删除好友功能

预期效果: 打开tony消息区域,点击右侧消息区域的扩展,点击删除好友,聊天记录清空,好友列表无此好友。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

实际效果: 好友删除成功,与预期结果相符。

2.3.8 删除聊天记录功能

测试代码:

  /**
     * 测试删除好友或者聊天记录功能
     */
    @Test
    public void deleteFriend_session() throws InterruptedException {
        //1.选择一个列表项
        driver.findElement(By.cssSelector("#session-list > li:nth-child(1)")).click();
        sleep(3000);
        //2.点击删除聊天记录功能
        driver.findElement(By.cssSelector("#right > div.title > div")).click();
        sleep(3000);
//        driver.findElement(By.cssSelector("#Dropdown > div.deleteChat")).click();
//        sleep(3000);
//        //2.点击删除好友功能
        driver.findElement(By.cssSelector("#Dropdown > div.deleteFriend")).click();
        sleep(3000);
        //3.查看好友列表是否不存在该好友
        driver.findElement(By.cssSelector("#getFriend")).click();
        sleep(3000);
        //通过父子类标签找到所有的好友
        List<WebElement> elementList = driver.findElements(By.cssSelector("#friend-list"));
        for (int i =0;i<elementList.size();i++){
            if ((elementList.get(i).getText().equals("john"))){
                System.out.println("测试不通过");
                break;
            }
        }
        System.out.println("测试通过");

//        //3.查看会话列表是否不存在该会话
//        driver.findElement(By.cssSelector("body > div.client-container > div > div.left > div.tab > div.tab-session")).click();
//        sleep(3000);
//        List<WebElement> elementList = driver.findElements(By.cssSelector("#session-list"));
//        for (int i =0;i<elementList.size();i++){
//            if ((elementList.get(i).getText().equals("zq"))){
//                System.out.println("测试不通过");
//                break;
//            }
//        }
//        System.out.println("测试通过");

    }

预期效果: 打开zq消息区域,点击右侧消息区域的扩展,点击删除聊天记录,聊天记录清空。
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

实际效果: 聊天记录删除成功,与预期结果相符。

3. 总结

根据部分自动化测试用例执行结果可知,项目功能大体完善。接下来可以继续执行编写的测试用例,进一步测试功能、界面、兼容性、安全性等等。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值