UI界面测试用例（完整版）

UI界面测试用例（通用完整版）本文档为通用Web/APPUI界面测试用例，覆盖界面布局、视觉样式、文字内容、图片图标、分辨率适配、浏览器/设备兼容、交互反馈、弹窗提示、空状态、报错状态等全场景测试点，可直接用于后台管理系统、小程序、APP、官网等所有UI界面测试，可按需增删场景。一、测试用例通用说明1.测试目的：验证产品UI界面美观性、规范性、统一性、适配性、交互合理性，符合产品原型、UI设计稿及交互规范。2.测试依据：产品原型图、UI设计稿、交互文档、产品需求文档。3.通用判定标准：界面无错乱、无变形、无重叠遮挡、文字无溢出、样式统一、交互反馈正常、多终端适配无异常。4.适用范围：Web端、移动端APP、微信小程序、H5页面、后台管理系统所有可视化界面。二、基础布局测试用例序号测试模块测试用例描述预期结果测试结果备注1整体布局核对页面整体布局结构，包含头部、侧边栏、内容区、底部模块页面布局与UI设计稿、原型完全一致，模块分区清晰，无缺失、多余模块2模块间距检查页面所有模块、按钮、输入框、文字之间的间距、边距间距、内外边距符合设计规范，统一标准，无过大、过小、错乱问题3元素对齐检查页面所有文字、按钮、输入框、图标等元素对齐方式元素左对齐、居中、右对齐符合设计要求，整体整齐规整，无错位偏移4页面留白查看页面上下左右留白区域，核心内容展示区域留白均匀合理，核心内容居中展示，无大面积空白、内容挤压问题5滚动布局页面内容超出屏幕时，查看滚动条展示效果及内容滚动状态滚动条正常显示、样式美观，滚动流畅无卡顿，内容跟随滚动无错位三、文字内容测试用例序号测试模块测试用例描述预期结果测试结果备注1文字准确性核对页面所有标题、提示语、按钮文字、输入框提示文字文字内容与需求、设计稿一致，无错别字、漏字、多字、乱码2字体样式检查文字字体、字号、字重、行高、颜色字体样式完全符合UI规范，标题、正文、辅助文字层级区分清晰，样式统一3文字溢出输入超长文字、查看列表超长内容、弹窗文字展示效果超长文字自动换行或省略展示，无文字溢出、遮挡、重叠错乱4文字对齐检查标题、正文、列表文字、按钮文字对齐方式文字对齐符合设计要求，无高低错位、偏移问题5特殊文字查看页面标点符号、数字、英文、特殊符号展示效果特殊符号、数字、英文展示正常，无变形、乱码、错位四、图标与图片测试用例序号测试模块测试用例描述预期结果测试结果备注1图标展示检查页面所有功能图标、状态图标、菜单图标图标清晰完整、无缺失、无变形、无模糊，大小、颜色符合设计规范2图片展示查看banner图、头像、内容配图、背景图等所有图片图片加载正常、高清无拉伸、无压缩变形，比例适配页面3图片加载异常断开网络，查看图片加载失败展示效果加载失败显示默认占位图，无空白、错乱、报错代码展示4图标交互鼠标悬浮、点击图标，查看状态变化悬浮、点击变色、缩放效果符合交互规范，反馈明显五、控件元素测试用例（按钮/输入框/下拉框）序号测试模块测试用例描述预期结果测试结果备注1按钮样式查看常规按钮、确认、取消、禁用、primary等各类按钮样式按钮大小、圆角、颜色、阴影、文字居中符合UI规范，不同状态样式区分明确2按钮交互测试按钮悬浮、点击、禁用状态交互效果悬浮变色、点击按压效果正常，禁用按钮置灰、不可点击3输入框样式查看输入框默认、聚焦、输入、报错、禁用状态样式各状态边框颜色、背景色、提示文字样式符合设计，无变形错位4下拉框样式测试下拉框默认、展开、选中、禁用状态展示下拉弹窗位置正常，选项排版整齐，选中状态标识清晰5复选框/单选框查看勾选、未勾选、禁用状态样式及位置对齐效果控件与文字对齐整齐，选中标识清晰，状态切换正常六、弹窗与提示框测试用例序号测试模块测试用例描述预期结果测试结果备注1弹窗布局打开各类弹窗（新增、编辑、详情、提示弹窗）弹窗居中展示，大小适配内容，标题、内容、按钮布局规整无错位2弹窗遮罩查看弹窗背景遮罩层展示效果遮罩半透明、覆盖全屏，锁定底层页面，不可点击底层内容3提示消息触发成功、失败、警告、信息提示弹窗提示图标、颜色、文字匹配对应状态，自动消失时间合理，展示位置正确4弹窗关闭点击关闭按钮、遮罩层、取消按钮关闭弹窗弹窗正常关闭，无残留、无卡顿、无页面错乱七、空状态/异常状态测试用例序号测试模块测试用例描述预期结果测试结果备注1数据空状态页面无数据时查看空页面展示效果展示默认空状态图标+提示文字，界面整洁无空白错乱2网络异常状态断网刷新页面、操作功能展示网络异常提示，无报错代码、无页面崩溃，支持重试3数据加载状态页面加载、接口请求过程中查看加载效果展示加载动画/loading提示，加载完成后正常展示页面内容4权限为空状态无权限访问页面/功能展示无权限提示页面，无空白、无报错，提示清晰八、分辨率与适配测试用例序号测试模块测试用例描述预期结果测试结果备注1电脑端适配切换1920、1440、1080、768等不同分辨率页面自适应缩放，无元素挤压、溢出、错位、重叠，布局正常2浏览器缩放浏览器缩放50%-150%查看页面效果页面自适应适配，核心元素不缺失、不错乱，文字不溢出3移动端适配手机、平板不同设备尺寸访问页面移动端布局自适应，按钮、文字、图片适配屏幕，无横向滚动、错乱九、浏览器/设备兼容测试用例序号测试模块测试用例描述预期结果测试结果备注1浏览器兼容在Chrome、Edge、Firefox、360浏览器打开页面各浏览器界面样式、布局、交互完全一致，无兼容差异、错乱2系统兼容Windows、Mac系统打开访问页面不同系统下字体、布局、样式展示统一，无异常3移动端系统兼容IOS、Android设备访问页面双端界面展示、交互效果一致，无适配bug十、UI一致性测试用例序号测试模块测试用例描述预期结果测试结果备注1全局样式统一检查全站按钮、字体、颜色、圆角、间距样式全站UI样式统一，同类元素样式一致，无自定义差异化错乱2交互逻辑统一检查全站弹窗、提示、按钮交互逻辑同类操作交互反馈统一，操作逻辑一致，无混乱问题3命名规范统一检查全站提示文字、按钮名称、功能命名同类功能文字命名统一，无前后不一致、歧义问题十一、常见UI缺陷汇总1.文字：错别字、文字溢出、字号字体不统一、行高错乱、标点符号异常。2.布局：元素重叠、错位、间距不一致、留白不合理、