【项目】在线音乐播放器测试报告

超、凢脫俗 2023-10-16 12:06 48阅读 0赞

**目录**

项目背景

项目功能

测试计划

功能测试

登录页面的测试

测试用例

测试结果

注册页面的测试

测试用例

测试结果

音乐列表页面的测试

测试用例

测试结果

出现的bug

搜索功能的bug

问题解决

删除功能的bug

问题解决

喜欢列表页面的测试

测试用例

测试结果

上传音乐页面的的测试

测试用例

测试结果

自动化测试

性能测试

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

## 项目背景 ##

这是一个基础版本的在线音乐播放网站，用户可以上传音乐，在线聆听已上传的音乐。

同时支持用户将指定音乐添加到自己喜欢列表。

## 项目功能 ##

1、登录功能——用户可按正常的用户名和密码进行登录，进入到音乐列表页面

2、注册功能——未注册的用户可以按照进行注册，设定自己的用户名和密码进行登录

3、音乐列表页面——用户可实时查看当前网站所有上传的音乐，提供音乐播放、音乐收藏和音乐删除功能，此外该页面还提供了音乐搜索和分页显示音乐列表的功能。

> tips: 我们目前并没有提供权限模块，用户默认都是管理员，可以进行音乐的上传和删除功能

4、音乐收藏页面——用户可查看当前自己所收藏的所有上传音乐，并进行音乐的播放。

5、音乐上传——用户可上传本地音乐到服务器，同时系统会将该音乐相关信息存储到对应数据库中

6、音乐播放——借助SewisePlayer播放插件实现对用户上传音乐的播放

## 测试计划 ##

### 功能测试 ###

![8129294c98164781b190f0515a8cc5f3.png][]

#### 登录页面的测试 ####

##### 测试用例 #####

![a2c716514eac4a47b47930f4fbb0e83e.png][]

##### 测试结果 #####

1）页面显示

![37fcd33a5389476ea88ffa0fd4010d27.png][]

图片显示有问题

经查是前端页面显示该图片的过程中出现了问题（路径错误）

解决后如下

![725a4ee03a564f2e94b4bb5bd0853b4b.png][]

2）正常登录

![40cbf28ad1f147d79a030202eb0725ae.png][]

3）异常登录

![b1dd918d0b924876906db11b197f1fbe.png][]

![21e628a7f5694b00a826167584a245c0.png][]

#### 注册页面的测试 ####

##### 测试用例 #####

![1e54a32fc3504f059188c0e10f175564.png][]

##### 测试结果 #####

1）页面显示

![5fd43dfb6c0b4684842c38a0a2622471.png][]

2）正常注册

![f009c7b8dc2f4928a3adc29534746bc1.png][]

3）异常注册

![c3d6c422a8504cb497d2a7d5a7f60673.png][]

![45e6b1c23ddc4eb6be29e3aec75d2b44.png][]

![699755e776544f8e94c612ff55a100ac.png][]

![8f0f3c22ab244a4fa0516fde37b8153e.png][]

#### 音乐列表页面的测试 ####

##### 测试用例 #####

![91daae0a6c8544aab30f7fdc01ca518e.png][]

##### 测试结果 #####

1）页面效果

2）功能模块

**分页功能**

![b99517ef3597407b948d8bd7afdeb949.png][]

**播放功能**

![270e5d93a0604932b0a654d5d7880a5f.png][]

##### 出现的bug #####

###### **搜索功能的bug** ######

输入英文、字母搜索是正常

![d8d6c19daf8f4b01ba98483cee1d325e.png][]

但是一旦输入汉字搜索会出现乱码现象，并且找不到要搜索的内容

![e02117b69a5241a4a438789d72ec91cf.png][]

###### 问题解决 ######

当一个问题出现，首先要确定这个是前端的问题还是后端的问题，我们先来看浏览器上的显示

![4a20d5c763ad4b158c78d239777f0320.png][]

![2a91a10584664d0db50349e2d11091c8.png][]

是前端传递参数错误吗，但是在开发者工具中明明就前端就是想后端传递了对应的title值，同时前端也设置了字符编码

![6472cd71a63840ad9384f43695c5a4c9.png][]

那么我们就先从后端入手

我们尝试动进行URL解码来处理中文乱码问题

![305b4b577fe7449dab28d448913e1682.png][]

![6b393a2b03fc402b8a76597c977bbc6f.png][]

这个时候，我们发现前端仍然有问题

![2091c8ec245345908314938bcdbc1f0b.png][]

我们在前端在查询url中的某个参数值的时候，再对参数值进行解密——以应对上面的这种情况

![f05dfaa4e167435989f853767f7ea43c.png][]

![fcff7a8022d14df7b2edf3a6b4ad691f.png][]

可以看到，成功再搜索框中显示了当前搜索的关键字，但是这样做有一个问题，那就是歌曲名这个信息直接暴漏在url中

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

###### **删除功能的bug**  ######

![6e50018ac8f44cae8860e5f64c531c65.png][]

如果当前用户为登录，会出现弹窗，提示跳转到登录页面

![a97c837d8e92490ba319b9f1a9d88668.png][]

![693d8a4c1237456e96e925a8fed88502.png][]

###### 问题解决 ######

出现了bug，首先我们来想怎么解决这个bug

首先来确定bug的位置

![f12f4eccbd094501aea34969459fa8bf.png][]

通过上图我们可以看到，我们前端想后端成功传递了要删除的音乐id，但是后端没有返回预期的结果，后端在音乐删除过程中出错了

![c6e80fb92f0f4c5e8ecd91e0dbd6c96a.png][]

我们注意到后端代码中红框这一行，我们在音乐表删除对应记录的时候，同时还想要同步删除喜欢列表中该音乐所对应记录

但是这样有一个问题，如果在喜欢列表中没有该音乐所对应的记录，此时res2 不就等于0，此时不就会出现问题吗？

并且，通过观察喜欢列表后，我们发现喜欢列表的数据也是根据音乐表产生了，是一个多表查询，因此我们在删除音乐表中的对应记录的时候，不用把喜欢列表的记录给同步删除。

下面是修改后的

![ba096465e5884f3cb73ef83dcb26a358.png][]

#### 喜欢列表页面的测试 ####

##### 测试用例 #####

![42af1f2c359b4d0caa9961d339404ce1.png][]

##### 测试结果 #####

![3b29d8fc29674a65b1769b21b2c9259f.png][]

#### 上传音乐页面的的测试 ####

##### 测试用例 #####

![5f6eac11ccfa46d8b135eaa1754bfbbf.png][]

#####  #####

##### 测试结果 #####

**页面效果**

![95ef7b18c34343b98c1076895850c25a.png][]

![f26b7adfcedf453b911ccc166c0c8dd5.png][]

**异常上传**

![6db4a1d285424c48aaa8199e0ed20d94.png][]

![4ff5f486a002483b810ab8a720768f2e.png][]

**正常上传**

![fde886f30713460faeebaa18da2ca7a5.png][]

### 自动化测试 ###

### 性能测试 ###

[8129294c98164781b190f0515a8cc5f3.png]: https://img-blog.csdnimg.cn/8129294c98164781b190f0515a8cc5f3.png
[a2c716514eac4a47b47930f4fbb0e83e.png]: https://img-blog.csdnimg.cn/a2c716514eac4a47b47930f4fbb0e83e.png
[37fcd33a5389476ea88ffa0fd4010d27.png]: https://img-blog.csdnimg.cn/37fcd33a5389476ea88ffa0fd4010d27.png
[725a4ee03a564f2e94b4bb5bd0853b4b.png]: https://img-blog.csdnimg.cn/725a4ee03a564f2e94b4bb5bd0853b4b.png
[40cbf28ad1f147d79a030202eb0725ae.png]: https://img-blog.csdnimg.cn/40cbf28ad1f147d79a030202eb0725ae.png
[b1dd918d0b924876906db11b197f1fbe.png]: https://img-blog.csdnimg.cn/b1dd918d0b924876906db11b197f1fbe.png
[21e628a7f5694b00a826167584a245c0.png]: https://img-blog.csdnimg.cn/21e628a7f5694b00a826167584a245c0.png
[1e54a32fc3504f059188c0e10f175564.png]: https://img-blog.csdnimg.cn/1e54a32fc3504f059188c0e10f175564.png
[5fd43dfb6c0b4684842c38a0a2622471.png]: https://img-blog.csdnimg.cn/5fd43dfb6c0b4684842c38a0a2622471.png
[f009c7b8dc2f4928a3adc29534746bc1.png]: https://img-blog.csdnimg.cn/f009c7b8dc2f4928a3adc29534746bc1.png
[c3d6c422a8504cb497d2a7d5a7f60673.png]: https://img-blog.csdnimg.cn/c3d6c422a8504cb497d2a7d5a7f60673.png
[45e6b1c23ddc4eb6be29e3aec75d2b44.png]: https://img-blog.csdnimg.cn/45e6b1c23ddc4eb6be29e3aec75d2b44.png
[699755e776544f8e94c612ff55a100ac.png]: https://img-blog.csdnimg.cn/699755e776544f8e94c612ff55a100ac.png
[8f0f3c22ab244a4fa0516fde37b8153e.png]: https://img-blog.csdnimg.cn/8f0f3c22ab244a4fa0516fde37b8153e.png
[91daae0a6c8544aab30f7fdc01ca518e.png]: https://img-blog.csdnimg.cn/91daae0a6c8544aab30f7fdc01ca518e.png
[b99517ef3597407b948d8bd7afdeb949.png]: https://img-blog.csdnimg.cn/b99517ef3597407b948d8bd7afdeb949.png
[270e5d93a0604932b0a654d5d7880a5f.png]: https://img-blog.csdnimg.cn/270e5d93a0604932b0a654d5d7880a5f.png
[d8d6c19daf8f4b01ba98483cee1d325e.png]: https://img-blog.csdnimg.cn/d8d6c19daf8f4b01ba98483cee1d325e.png
[e02117b69a5241a4a438789d72ec91cf.png]: https://img-blog.csdnimg.cn/e02117b69a5241a4a438789d72ec91cf.png
[4a20d5c763ad4b158c78d239777f0320.png]: https://img-blog.csdnimg.cn/4a20d5c763ad4b158c78d239777f0320.png
[2a91a10584664d0db50349e2d11091c8.png]: https://img-blog.csdnimg.cn/2a91a10584664d0db50349e2d11091c8.png
[6472cd71a63840ad9384f43695c5a4c9.png]: https://img-blog.csdnimg.cn/6472cd71a63840ad9384f43695c5a4c9.png
[305b4b577fe7449dab28d448913e1682.png]: https://img-blog.csdnimg.cn/305b4b577fe7449dab28d448913e1682.png
[6b393a2b03fc402b8a76597c977bbc6f.png]: https://img-blog.csdnimg.cn/6b393a2b03fc402b8a76597c977bbc6f.png
[2091c8ec245345908314938bcdbc1f0b.png]: https://img-blog.csdnimg.cn/2091c8ec245345908314938bcdbc1f0b.png
[f05dfaa4e167435989f853767f7ea43c.png]: https://img-blog.csdnimg.cn/f05dfaa4e167435989f853767f7ea43c.png
[fcff7a8022d14df7b2edf3a6b4ad691f.png]: https://img-blog.csdnimg.cn/fcff7a8022d14df7b2edf3a6b4ad691f.png
[6e50018ac8f44cae8860e5f64c531c65.png]: https://img-blog.csdnimg.cn/6e50018ac8f44cae8860e5f64c531c65.png
[a97c837d8e92490ba319b9f1a9d88668.png]: https://img-blog.csdnimg.cn/a97c837d8e92490ba319b9f1a9d88668.png
[693d8a4c1237456e96e925a8fed88502.png]: https://img-blog.csdnimg.cn/693d8a4c1237456e96e925a8fed88502.png
[f12f4eccbd094501aea34969459fa8bf.png]: https://img-blog.csdnimg.cn/f12f4eccbd094501aea34969459fa8bf.png
[c6e80fb92f0f4c5e8ecd91e0dbd6c96a.png]: https://img-blog.csdnimg.cn/c6e80fb92f0f4c5e8ecd91e0dbd6c96a.png
[ba096465e5884f3cb73ef83dcb26a358.png]: https://img-blog.csdnimg.cn/ba096465e5884f3cb73ef83dcb26a358.png
[42af1f2c359b4d0caa9961d339404ce1.png]: https://img-blog.csdnimg.cn/42af1f2c359b4d0caa9961d339404ce1.png
[3b29d8fc29674a65b1769b21b2c9259f.png]: https://img-blog.csdnimg.cn/3b29d8fc29674a65b1769b21b2c9259f.png
[5f6eac11ccfa46d8b135eaa1754bfbbf.png]: https://img-blog.csdnimg.cn/5f6eac11ccfa46d8b135eaa1754bfbbf.png
[95ef7b18c34343b98c1076895850c25a.png]: https://img-blog.csdnimg.cn/95ef7b18c34343b98c1076895850c25a.png
[f26b7adfcedf453b911ccc166c0c8dd5.png]: https://img-blog.csdnimg.cn/f26b7adfcedf453b911ccc166c0c8dd5.png
[6db4a1d285424c48aaa8199e0ed20d94.png]: https://img-blog.csdnimg.cn/6db4a1d285424c48aaa8199e0ed20d94.png
[4ff5f486a002483b810ab8a720768f2e.png]: https://img-blog.csdnimg.cn/4ff5f486a002483b810ab8a720768f2e.png
[fde886f30713460faeebaa18da2ca7a5.png]: https://img-blog.csdnimg.cn/fde886f30713460faeebaa18da2ca7a5.png