当前位置：首页 > ai >正文

网页五子棋项目测试报告

ai 2025/6/26 7:08:17

一：项目演示

在这里插入图片描述

1：登录页面

在这里插入图片描述

2：接着输入正确的账号密码

在这里插入图片描述

3：接着进入游戏大厅，这里会实时显示用户名、分数、比赛场次和获胜场数

在这里插入图片描述

4：接着我们点击开始匹配，然后会发现按钮会发生改变

在这里插入图片描述

5：此时我们按照相同的步骤再让一个同分段用户进行匹配（因为匹配策略是按照分段进行匹配的）

在这里插入图片描述

6：在点击匹配的瞬间，会让双方都跳转到对决页面，接着我们模拟用户正常下子

在这里插入图片描述

7：接着点击返回大厅的按钮，然后双方可以继续匹配，同时发现双方的分数发生了改变，赢一局分数会增加 20，输一局分数会减少 20

在这里插入图片描述

8：最后看一下服务器的日志输出：

在这里插入图片描述

以上是整个系统的大概功能，接下来我会对整个系统的各个部分进行详细的测试，下面先讲解一下这个项目的大概功能是什么：

二：项目功能

整个项目的页面大概有 4 个

登录页面
注册页面
游戏大厅
游戏对决

因为偷懒，所以我的登录页面和注册页面直接复用了样式，所以长的很像。

2.1 用户管理功能

1：用户可以登录
2：用户可以注册
3：系统能够记录用户的相关信息，如用户id、用户名、密码、天梯分数、排位总场次和胜场总场次等，并提供修改密码、查看个人信息等功能。
4：通过 session 来管理用户的登录状态信息，让用户在后续游戏中保持登录状态，直到用户主动退出或者等待超时自动退出

2.2 游戏对战功能

1：游戏匹配：系统根据用户的分段来进行匹配，找到合适的玩家后就进入游戏对决页面
2：游戏对决：在游戏房间内，双方可以实时的进行五子棋对战
3：胜负判断：当前落子位置在横、纵、斜四个方向有连续五个相同的棋子，判断胜利。

三：对系统进行详细的测试

下面我会对项目按照以下八个方面进行项目测试：

功能测试
性能测试
页面测试
弱网测试
兼容性测试
易用性测试
安全性测试
自动化测试

在这里插入图片描述

3.1 功能测试

下面就简单举一个例子，具体的功能测试可以看一下上面的图片。

1：首先我们去测试登陆功能，我们先看看数据库中现在存在哪些数据

在这里插入图片描述

下面我们对登陆按钮进行测试：

在这里插入图片描述

下面测试一下注册功能：

在这里插入图片描述

这里测出了一个小 bug，不是故意留的

在这里插入图片描述

下面还有很多功能测试的图片，这里就不一一把图片放出来了，只放几个主要的。

3.2 性能测试

性能测试就需要使用到 Jmeter 了，首先我们需要启动 Jmeter，

在这里插入图片描述

首先要创建一个梯度压测线程组，慢慢增大我们对这两个接口的并发请求的数量

在这里插入图片描述

然后创建一个 HTTP Cookie 管理器，再里面去添加相关的用户信息，HTTP Cookie 管理器用于存储和发送 Cokkie，我们需要让 Jmter 用线程去模拟请求的发送，所以此时是肯定需要线设置 Cookie 的，添加 HTTP Cookie 管理器后，Cookie 的存储和发送将自动完成。

我们自己手动抓包，找出 Cookie

在这里插入图片描述

接着我们去设置一下 CSV 文件，让 Jmeter 从 CSV 文件中去读取用户的账号和密码：

在这里插入图片描述

接着打开 Response Times Distrubution，这是一个监听器，用于监测整个事务运行期间的响应时间，通过这个监视器可以让我们更加直观的看见系统的响应性能：

在这里插入图片描述

然后打开 Transactions per Second（TPS），去分析系统的吞吐量，TPS 全称每秒事务数，表示客户端向服务器发送请求并接收响应的整个过程，反映了系统在单位时间内处理业务的最大能力。

在这里插入图片描述

因为我的这个项目是基于 Websocket 协议的，所以并没有使用到类似于 @RequestMapping 这样的注解，所以我们主要测试一下几个接口的响应速度：

http://127.0.0.1:8080/login.html
http://127.0.0.1:8080/match.html
http://127.0.0.1:8080/chessboard.html

下面运行一下 Jmter，观察一下各个指标：

可以看到异常率是很低的，
在这里插入图片描述

在这里插入图片描述

3.3 页面测试

在这里插入图片描述

3.4 弱网测试

弱网测试不太好操作，因为我最多通过 fiddler 去模拟弱网环境，对于手机，平板等设备我个人无法去模拟弱网，所以这个地方就暂且跳过，等有能力了再测试

3.5 兼容性测试

这个也很简单，但是需要我把页面部署到云服务器上才能让别的设备访问，大概的测试内容也差不多，这里不多赘述

3.6 易用性测试

在这里插入图片描述

3.7 安全性测试

这个有点难测试，等我有能力了回来补

3.8 自动化测试

首先创建一个 maven 项目，接着创建对应的文件夹，然后在 pom.xml 文件中导入驱动和 selenium 库

<dependency><groupId>io.github.bonigarcia</groupId><artifactId>webdrivermanager</artifactId><version>5.8.0</version><scope>test</scope>
</dependency>

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

在这里插入图片描述

完整代码如下：

import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.edge.EdgeDriver;
import org.openqa.selenium.edge.EdgeOptions;
import org.openqa.selenium.chrome.ChromeOptions;public class test {public static void test1() throws InterruptedException {// 1. 自动配置并下载Chrome浏览器驱动，无需手动管理驱动版本
//        WebDriverManager.chromedriver().setup();System.setProperty("webdriver.chrome.driver","C:\\Users\\86198\\Desktop\\Selenium\\chromedriver.exe");// 2. 配置Chrome浏览器选项，解决跨域访问限制（常见于本地测试环境）ChromeOptions  options = new ChromeOptions();options.addArguments("--remote-allow-origins=*");// 3. 初始化WebDriver实例，启动Chrome浏览器并应用配置选项WebDriver driver = new ChromeDriver(options);// 4. 导航至目标页面（百度首页），模拟用户访问行为driver.get("http://127.0.0.1:8080/login.html");// 5. 定位搜索框并输入关键词（迪丽热巴）//   使用XPath定位元素：通过页面元素的XPath路径精准定位//   sendKeys()方法：模拟键盘输入，触发搜索关键词Thread.sleep(3000);driver.findElement(By.xpath("//*[@id=\"username\"]")).sendKeys("user1");Thread.sleep(3000);driver.findElement(By.xpath("//*[@id=\"password\"]")).sendKeys("123");// 6. 定位搜索按钮并执行点击操作//   click()方法：模拟鼠标点击，触发搜索动作Thread.sleep(3000);driver.findElement(By.xpath("//*[@id=\"submit\"]")).click();//        // 7. 关闭浏览器并释放资源，避免残留进程占用内存
//        driver.quit();}public static void main(String[] args) {try {test1();} catch (InterruptedException e) {throw new RuntimeException(e);}}
}