Gitee.com

前面文章中我们把在线音乐播放器项目从零到一的都编写完成完成并在每个模块编写的过程中利用

Postman

进行了接口的简单测试在本篇文章我将对我们所编写的这个项目进行一个详细的测试并且再对本项目做一个整体的介绍来检查我们项目中是否还存在问题这里我们要进行的测试分为功能测试、自动化测试、性能测试三种最后将这些测试的过程及结果总结到一起形成这篇测试报告。

一、项目简介

在数字化时代音乐作为人们生活中不可或缺的一部分其消费与传播方式发生了巨大变革。

传统的音乐播放模式逐渐向线上转移人们渴望能够通过便捷的网络平台随时随地畅享丰富多样的音乐资源。

本在线音乐播放器项目正是为满足这一市场需求而开发旨在为用户打造一个功能全面、操作便捷的音乐播放与管理平台使用户无需受限于本地音乐存储即可轻松探索、播放和管理海量音乐曲目。

2.应用技术

框架作为核心框架提供了依赖注入等功能有效管理项目中的组件对象解耦各模块之间的依赖关系提高代码的可维护性与扩展性。

SpringBoot基于

Spring

进一步简化了项目的初始搭建与配置过程通过自动配置特性使开发者能够快速聚焦于业务逻辑开发大大提高开发效率同时也便于项目的部署与运维。

Mybatis负责数据库访问层的操作能够将

SQL

数据库进行数据的持久化操作如音乐信息、用户数据等的存储与读取高效处理数据访问需求。

SpringMVC遵循

MVC

设计模式实现了前端请求与后端处理逻辑的清晰分离与高效交互负责接收并处理来自前端的各种

HTTP

请求如用户登录、音乐查询与操作等请求并将处理结果返回给前端页面进行展示。

BCrypt

加密算法用于对用户密码进行加密存储保障用户密码在数据库中的安全性有效防止密码泄露导致的用户账号安全问题确保用户信息安全。

2前端开发

HTML构建页面的基础结构负责定义页面的各个元素与布局如音乐列表界面、用户登录界面、喜欢音乐列表展示等页面的骨架搭建。

CSS用于美化页面样式通过设置字体、颜色、背景、布局等样式属性使页面呈现出美观、舒适的视觉效果提升用户操作体验与界面友好度。

JS为页面添加动态交互功能如实现音乐播放控制、用户操作响应如点击登录按钮、添加喜欢音乐等、数据验证等功能增强页面的交互性与响应性。

jQuery简化了

JavaScript

的开发过程提供了丰富的插件与便捷的操作方法方便对页面元素进行选择、事件绑定、动画效果实现等操作进一步提高前端开发效率与代码简洁性。

Ajax用于实现前端与后端的异步数据交互在不刷新整个页面的情况下能够在后台与服务器进行数据传输如实时查询音乐、无刷新更新音乐播放列表等功能提升用户体验的流畅性与实时性。

3数据库

关系型数据库进行数据存储能够高效地组织与管理平台所需的各类数据包括音乐信息歌曲名、歌手、音频文件路径、用户信息用户名、密码、用户音乐信息喜欢音乐确保数据的完整性、一致性与持久性为平台的稳定运行提供数据支持。

二、项目功能

本在线音乐播放器项目的核心功能有登录、上传音乐、删除指定音乐、批量删除选中的音乐、查询要找的音乐、添加音乐至喜欢列表、移除喜欢的音乐。

登录功能用户名与加密后的密码都已经写入到后端的数据库中了本项目目前还没有实现注册功能即用户名与密码是已经存在的登录成功后就会跳转到音乐列表页。

音乐列表页在这个页面中我们可以看到所有的音乐信息其包括音乐名称歌手。

在每个音乐对应的行中有播放音乐、删除音乐、喜欢音乐的三个按钮这三个按钮也对应着三个功能每个音乐前面设计了一个选择框通过这个可以实现批量删除的操作。

喜欢音乐列表页这个页面的整体布局与音乐列表页布局大致相同只不过没有喜欢音乐及批量删除选中音乐的功能了添加了取消喜欢音乐的功能和回到首页的功能在这个页面中也可以针对喜欢的音乐进行查询操作。

上传音乐页面在这个页面进行的就是上传音乐的操作并且还有返回首页的连接。

三、功能测试

dependenciesdependencygroupIdorg.seleniumhq.selenium/groupIdartifactIdselenium-java/artifactIdversion4.0.0/version/dependencydependencygroupIdio.github.bonigarcia/groupIdartifactIdwebdrivermanager/artifactIdversion5.8.0/versionscopetest/scope/dependencydependencygroupIdcommons-io/groupIdartifactIdcommons-io/artifactIdversion2.6/version/dependency/dependencies

创建项目结构如下图所示

类用它存放我们自动化代码中通用的方法在这个类中我们要创建的方法如下

Utils

没有驱动对象就创建驱动对象WebDriverManager.chromedriver().setup();ChromeOptions

options

允许访问所有链接options.addArguments(--remote-allow-origins*);driver

new

设置隐式等待driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(2));}//

有驱动对象之间返回return

SimpleDateFormat(yyyy-MM-dd);//

规定时间格式为

sim1.format(System.currentTimeMillis());//

创建文件名称,

sim2.format(System.currentTimeMillis());//

拼接好完整文件名(包含:存放具体位置,及文件名称)String

filename

((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);//

把截图

放到指定的位置FileUtils.copyFile(srcFile,

new

检查登录页面是否正确加载检查正常登录功能是否正常检查异常登录功能是否正常。

LoginPage

http://127.0.0.1:8080/login.html;//

设置显式等待private

查找状态提示框driver.findElement(By.cssSelector(#message));//

获取页面标题String

刷新当前页面,防止输入框中残留信息driver.navigate().refresh();driver.findElement(By.cssSelector(#user)).sendKeys(123);driver.findElement(By.cssSelector(#submit)).click();//

显式等待弹窗出现wait.until(ExpectedConditions.alertIsPresent());Alert

alert

alert.getText().equals(用户名或密码错误!);//

测试用户名不存在driver.findElement(By.cssSelector(#user)).sendKeys(usseee);driver.findElement(By.cssSelector(#password)).sendKeys(123);driver.findElement(By.cssSelector(#submit)).click();wait.until(ExpectedConditions.alertIsPresent());assert

alert.getText().equals(用户名或密码错误!);alert.accept();//

测试用户名正确,

密码为空driver.findElement(By.cssSelector(#user)).sendKeys(lisi);driver.findElement(By.cssSelector(#submit)).click();wait.until(ExpectedConditions.alertIsPresent());assert

);alert.accept();//

密码错误driver.findElement(By.cssSelector(#user)).sendKeys(lisi);driver.findElement(By.cssSelector(#password)).sendKeys(232424);driver.findElement(By.cssSelector(#submit)).click();wait.until(ExpectedConditions.alertIsPresent());assert

);alert.accept();}//

刷新当前页面,防止输入框有残留信息driver.navigate().refresh();//

输入存在的用户名和正确的密码driver.findElement(By.cssSelector(#user)).sendKeys(lisi);driver.findElement(By.cssSelector(#password)).sendKeys(123456);driver.findElement(By.cssSelector(#submit)).click();//

显式等待,

等待弹窗出现wait.until(ExpectedConditions.alertIsPresent());Alert

alert

检查列表页面是否能正确加载检查音乐的查询功能是否正常检查音乐的删除功能是否正常检查选中音乐的删除功能是否正常检查喜欢音乐的功能是否正常。

ListPage

http://127.0.0.1:8080/list.html;//

设置显式等待private

{driver.findElement(By.cssSelector(#exampleInputName2));//

获取页面标题String

driver.findElement(By.cssSelector(#exampleInputName2));input.sendKeys(李宇春

咏春);WebElement

driver.findElement(By.cssSelector(#submit1));select.click();ListWebElement

result

driver.findElements(By.cssSelector(#info

tr));assert

1;input.clear();input.sendKeys(南征北战);select.click();result

driver.findElements(By.cssSelector(#info

tr));assert

1;input.clear();select.click();result

driver.findElements(By.cssSelector(#info

tr));assert

1;input.clear();input.sendKeys(没有这个音乐);select.click();result

driver.findElements(By.cssSelector(#info

tr));assert

{driver.findElement(By.cssSelector(#exampleInputName2)).sendKeys();driver.findElement(By.cssSelector(#submit1)).click();ListWebElement

result

driver.findElements(By.cssSelector(#info

tr));int

{driver.findElement(By.cssSelector(#\\31

1))).click();}else

{driver.findElement(By.cssSelector(#\\3

1))).click();}driver.findElement(By.cssSelector(#delete)).click();wait.until(ExpectedConditions.alertIsPresent());Alert

alert

driver.switchTo().alert();assert

alert.getText().equals(音乐全部删除成功!

);alert.accept();i--;driver.navigate().refresh();int

count

{driver.findElement(By.cssSelector(#\\31

1))).click();i--;count--;}while

(count

{driver.findElement(By.cssSelector(#\\3

1))).click();i--;count--;}driver.findElement(By.cssSelector(#delete)).click();wait.until(ExpectedConditions.alertIsPresent());assert

alert.getText().equals(音乐全部删除成功!

);alert.accept();driver.findElement(By.cssSelector(#delete)).click();wait.until(ExpectedConditions.alertIsPresent());assert

alert.getText().equals(批量删除音乐失败!!

);alert.accept();}//

{driver.findElement(By.cssSelector(#exampleInputName2)).sendKeys();driver.findElement(By.cssSelector(#submit1)).click();int

index

driver.findElements(By.cssSelector(#info

tr)).size();driver.findElement(By.cssSelector(#del

(index

1))).click();wait.until(ExpectedConditions.alertIsPresent());Alert

alert

driver.switchTo().alert();assert

);alert.accept();}//

{driver.findElement(By.cssSelector(#exampleInputName2)).sendKeys();driver.findElement(By.cssSelector(#submit1)).click();int

index

driver.findElements(By.cssSelector(#info

tr)).size();driver.findElement(By.cssSelector(#love

(index

1))).click();wait.until(ExpectedConditions.alertIsPresent());Alert

alert

driver.switchTo().alert();assert

);alert.accept();}

类在这里编写喜欢列表页面的所有测试用例在这里我们要完成的事情如下

检查喜欢列表页面是否能正确加载检查喜欢音乐的查询功能是否正常检查取消喜欢音乐的功能是否正常检查回到大厅的按钮功能是否正常。

LovePage

http://127.0.0.1:8080/loveMusic.html;//

设置显式等待private

{driver.findElement(By.cssSelector(body

div.container

driver.findElement(By.cssSelector(#exampleInputName2));input.sendKeys(李宇春

咏春);WebElement

driver.findElement(By.cssSelector(#submit1));select.click();ListWebElement

result

driver.findElements(By.cssSelector(#info

tr));assert

1;input.clear();input.sendKeys(无涯);select.click();result

driver.findElements(By.cssSelector(#info

tr));assert

1;input.clear();select.click();result

driver.findElements(By.cssSelector(#info

tr));assert

1;input.clear();input.sendKeys(没有这个音乐);select.click();result

driver.findElements(By.cssSelector(#info

tr));assert

{driver.findElement(By.cssSelector(#exampleInputName2)).sendKeys();driver.findElement(By.cssSelector(#submit1)).click();int

index

driver.findElements(By.cssSelector(#info

tr)).size();driver.findElement(By.cssSelector(#del0)).click();wait.until(ExpectedConditions.alertIsPresent());Alert

alert

driver.switchTo().alert();assert

alert.getText().equals(取消喜欢音乐成功!);alert.accept();}//

void

{driver.findElement(By.cssSelector(body

div.container

类在这里编写上传音乐页面的所有测试用例在这里我们要完成的事情如下

检查上传音乐页面是否能正确加载检查上传音乐的功能是否正常检查回到首页的连接跳转功能是否正常。

UploadPage

http://127.0.0.1:8080/upload.html;//

设置显式等待private

查找是否有歌手输入框driver.findElement(By.cssSelector(#singerInput));driver.findElement(By.cssSelector(#fileInput));String

title

{driver.findElement(By.cssSelector(#fileInput)).sendKeys(D:\\音乐下载\\李宇春

咏春.mp3);driver.findElement(By.cssSelector(#singerInput)).sendKeys(李宇春);driver.findElement(By.cssSelector(#uploadFrom

input[typesubmit]:nth-child(3))).click();wait.until(ExpectedConditions.alertIsPresent());Alert

alert

driver.switchTo().alert();assert

alert.getText().equals(已经拥有当前歌曲!

);alert.accept();driver.navigate().refresh();driver.findElement(By.cssSelector(#fileInput)).sendKeys(D:\\音乐下载\\庞龙

兄弟抱一下

[mqms2].mp3);driver.findElement(By.cssSelector(#singerInput)).sendKeys(庞龙);driver.findElement(By.cssSelector(#uploadFrom

input[typesubmit]:nth-child(3))).click();wait.until(ExpectedConditions.alertIsPresent());assert

title

{driver.get(url);driver.findElement(By.cssSelector(#uploadFrom

a)).click();String

在这里进行所有测试代码的运行我们要以合理的方式调用每一个页面的所有测试方法来进行在线音乐播放器的

自动化测试关于

LoginPage();loginPage.loginPageRight();loginPage.loginFail();loginPage.loginSuc();//

uploadPage

UploadPage();uploadPage.uploadPageRight();uploadPage.uploadMusic();uploadPage.uploadBack();//

lovePage

LovePage();lovePage.lovePageRight();lovePage.selLoveMusic();lovePage.delLoveMusic();lovePage.loveBack();//

listPage

ListPage();listPage.listPageRight();listPage.selectMusic();listPage.loveMusic();listPage.deleteMusic();listPage.deleteSelMusic();//

driver

如上图运行过程所示我们的自动化测试用例全部通过在执行自动化测试的时候我们要注意多次执行的时候在上传音乐的方法中要更改新的上传音乐否则就会上传音乐失败在执行失败的时候要多用屏幕截图来抓取当时出错的场景。

五、性能测试

对在线音乐播放器项目的登录接口和获取音乐列表接口及获取喜欢音乐列表接口进行简单的性能测试下面就来介绍在线音乐播放器项目性能测试的一个测试流程。

1.创建梯度压测线程组

Group来慢慢增大我们对这两个接口的并发请求的数量创建的梯度压测线程组的具体配置如下图所示

2.创建

在在线音乐播放器项目中涉及到的接口协议、IP、端口号及内容编码都完全一样所以我们就可以把这些单独抽取出来存放在默认值中这样其他接口就可以省略不写协议、IP、端口号及内容编码了这里我们具体设置的默认值如下图所示

3.创建

如果我们在未登录状态进行获取音乐列表的操作将会获取到一个空的音乐列表这显然是不科学的所以为了我们可以获取到登录请求中用户的用户信息就需要添加一个

HTTP

根据在线音乐播放器项目中用户登录的接口来编写用户登录请求的内容具体内容如下图所示

5.创建获取音乐列表页请求

根据在线音乐播放器项目中获取音乐列表请求接口来编写获取音乐列表的内容具体内容如下图所示

6.创建获取喜欢音乐列表页请求

根据在线音乐播放器项目中获取喜欢音乐列表请求接口来编写获取喜欢音乐列表的内容具体内容如下图所示

7.性能测试执行结果

Time这是用来记录每一时刻存活线程的数目最后形成一个图表Transactions

per

SecondTPS这个监听器是用来分析系统吞吐量的重要工具。

TPS

即每秒事务数表示一个客户机向服务器发送请求后服务器做出反应的过程这个指标反映了系统在同一时间内处理业务的最大能力TPS

Times

Time这个监听器是用来监听整个事务运行期间的响应时间在测试过程中它可以帮我们观察并分析响应时间的实时平均值以及整体响应时间的走向通过这个监听器我们可以更直观的了解系统中不同时间点的响应性能从而发现可能存在的性能问题聚合报告通过这个报告可以看到性能测试过程中整体的数据变化。

8.生成性能测试报告

执行完成性能测试之后我们需要出具一份性能测试报告这个报告不用我们手动进行编写而是通过命令的方式使用

JMeter

-n以无图形化运行-t被运行的脚本-l将运行信息写入日志文件后缀为

jtl

的日志文件-e生成测试报告-o指定报告输出可以不存在若已经存在要保证内容为空否则会出现错误。

那么测试报告生成之后在

关于性能测试报告的具体内容我在这里就不进行过多展示了感兴趣的小伙伴我会把这个报告附在本篇文章中可以自行观察。

·总结

文章到此就要结束了在这里我再对本篇测试报告做一个总结我们一共进行了功能测试、自动化测试以及性能测试这三种测试方式在功能测试阶段我们着重点是对项目整体进行了一个简易的测试在自动化测试阶段我们主要测试各个页面的相关信息着重测试了登录及音乐列表页面的相关功能在性能测试阶段我们着重测试了用户登录、获取用音乐列表、获取喜欢音乐列表的接口性能并生成了性能测试报告在以上过程中遇到的问题就是执行自动化测试时会出现上传音乐失败的情况这是因为我们每次运行自动化测试脚本时都需要更改上传音乐的信息否则就会出现音乐已经存在的情况还有就是性能测试中获取音乐列表及获取喜欢音乐列表为空解决方式就是添加

HTTP

管理器如果对文章内容有所疑惑欢迎在评论区进行留言如果感觉本篇文章还不错希望能收到你的三连支持那么我们下一篇文章再见吧~~~