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

已于 2023-08-21 18:16:26 修改
阅读量639 收藏 1
点赞数
文章标签： spring boot mybatis websocket
于 2023-08-20 20:39:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62040947/article/details/132395336
版权

云聊天

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. 总结

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

薯条和番茄酱
关注
SpringBoot整合Mybatis WebSocket
05-22
SpringBoot+Mybatis+WebSocket 新手搭建 如好用 请好评
spring + springmvc + mybatis +websocket实现聊天室
05-19
在这个项目"spring + springmvc + mybatis + websocket实现聊天室"中，我们将探讨如何利用这些技术栈构建一个功能完备的在线聊天平台。 首先，Spring框架是Java开发中的基石，提供了强大的依赖注入（DI）和面向切面...
SpringBoot整合websocket+测试
薛定谔的英短的博客
12-26 2621
SpringBoot整合websocketpom文件导入websocket依赖创建websocket配置文件创建websocket服务测试是否能连接工具测试结果websocket服务端执行日志 pom文件导入websocket依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId&
Springboot整合websocket(附详细案例代码)
最新发布
weixin_46425661的博客
09-09 4647
本文主要介绍WebSocket的概念，和在springboot项目中的使用。
SpringBoot快速搭建WebSocket并测试
weixin_44379605的博客
01-30 2828
WebSocket协议通过在客户端和服务端之间提供全双工通信来进行Web和服务器的交互功能。在ws应用程序中，服务器发布websocket端点。一个ws连接的建立，需要客户端和服务端维护一个Key来作为该连接的链接凭证。客户端向服务端发送wsKey，服务器根据wsKey生成wsAccept返回给客户端，客户端进行相同操作，如果最后的值和服务器返回的Accept的值相匹配，表示握手成功。
SpringBoot整合WebSocket测试
weixin_48732663的博客
02-25 890
WebSocketConfig 启用WebSocket的支持 @Configuration public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } } maven依赖 <!-- socket依赖 --> <dependency>
junit 4 spring 自动化测试
qinchaoyong
12-13 262
 1 添加jar ，依赖jar 包围 spring-test,jar与 junit4.jar  2 编写测试类    package com.test; import java.util.List; import org.junit.Test; import org.springframework.beans.factory.annotation.Autowired; im...
基于java（Springboot+SpringMVC+Mybatis+微信小程序的图书捐赠管理系统.zip
03-09
《基于Java（Springboot+SpringMVC+Mybatis+微信小程序）的图书捐赠管理系统详解》 在当前数字化时代，图书捐赠管理系统已经成为了图书馆管理和社区文化活动的重要工具。本项目采用Java技术栈，结合Springboot、...
会议管理系统 springboot+mybatis+springmvc
12-21
本项目以"会议管理系统"为主题，利用Java技术栈，具体包括Springboot、Mybatis和Springmvc三大框架，构建了一个功能完善的系统，旨在实现会议的预约、审批、通知以及记录等功能。 首先，Springboot作为核心框架，以...
spring5.x+springmvc5.x+mybatis3.5x+tomcat9+jdk8+maven 项目框架搭建 1.1版本
03-11
本项目框架搭建基于"spring5.x+springmvc5.x+mybatis3.5x+tomcat9+jdk8+maven"，这是一个经典且广泛使用的Java开发配置。下面将详细阐述这些组件的功能、相互关系以及如何进行集成。 1. **Spring 5.x**： Spring是...
基于web的农业温湿度监控系统，SpringMVC+Spring+MyBatis+WebSocket+ActiveMQ.zip
01-01
这是一个基于Web的农业温湿度监控系统的源码项目，采用了SpringMVC、Spring、MyBatis、WebSocket和ActiveMQ等核心技术。下面将详细解释这些技术及其在项目中的应用。 1. **SpringMVC**：SpringMVC是Spring框架的一...
springboot+websocket聊天室（多人聊天，单人聊天）
08-30
springboot集成websocket实现聊天室功能（可多人聊天和单独聊天）
springboot+websocket实时聊天系统
03-09
springboot+websocket+mysql，实现实时聊天系统，简单demo。包括login 登录页、register 注册页、friend_list 好友列表、message_conver聊天视图 四个页面。
springboot集成webSocket
04-16 469
文章目录依赖包代码结构核心代码测试 依赖包 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> 由于新建的项目，...
SpringBoot实战（九）集成WebSocket
ACGkaka的博客
01-10 1681
目录1. 简介2. 项目结构3. 项目地址4. 配置4.1 Maven4.2 WebSocketConfig5. Java 代码5.1 WebSocketController.java5.2 WebSocketServer.java6. 本地socket测试 1. 简介 WebSocket：是一种网络传输协议，可在单个TCP连接上进行全双工通信，位于OSI模型的应用层。 WebSocket 使得客户端和服务端之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。 在 WebSocket API 中
SpringBoot系统搭建集成-015-自动化测试
苍云烟
06-06 2467
实现BaseMatcher< T》/**//返回匹配器示例，就是一个单例 return new islisonWorldMatcher();} //匹配的业务逻辑 @Override public boolean matches(Object actual) {} //对输入项的描述，在断言失败的时候就会打印到console中 @Override public void describeTo(Description description) {} }
springboot基于springboot的软件自动化测试平台设计与实现
2401_86117023的博客
08-28 494
2.1 J。
Spring的单元自动化测试--业务逻辑层&控制器层单元自动化测试
技术黑板
08-23 319
源码附件：https://gitee.com/steffens/httpinterface/tree/master/bookcode38382 业务逻辑层单元自动化测试 package com.lujiatao.springboot.controller; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBoo...
前端加springboot实现Web Socket连接通讯以及测试流程（包括后端实现心跳检测）
weixin_52315708的博客
08-22 2289
写这个项目主要是有有个项目需要后端有数据实话返回前端，一开始采用前端轮询的方式，后面觉得及时性上有些不行，然后改为使用websocket ，具体实现demo以及测试流程发出来提供交流学习， WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值