下拉单选（选择后高亮）测试用例
下拉单选（选择后高亮）测试用例
1. 基础功能测试
| 用例编号 | 测试场景 | 操作步骤 | 预期结果 |
|---|---|---|---|
| TC-001 | 默认状态 | 1. 页面加载完成 | 下拉框显示默认占位符（如“请选择”），未展开选项列表 |
| TC-002 | 展开下拉列表 | 1. 点击下拉框 | 选项列表展开，所有选项可见 |
| TC-003 | 选择选项 | 1. 点击下拉框 2. 点击某个选项 | 选项列表关闭，选中值显示在下拉框中 |
| TC-004 | 选中后高亮 | 1. 选择选项A 2. 再次展开下拉列表 | 选项A的背景/字体颜色高亮（如蓝色背景） |
2. 交互与样式测试
| 用例编号 | 测试场景 | 操作步骤 | 预期结果 |
|---|---|---|---|
| TC-005 | 键盘操作 | 1. 使用 Tab 聚焦下拉框2. 按 Enter 展开列表3. 用 ↑/↓ 选择选项4. 按 Enter 确认 | 选项被选中且高亮显示 |
| TC-006 | 鼠标悬停 | 1. 展开下拉列表 2. 鼠标悬停在某选项上 | 悬停的选项显示悬停样式（如灰色背景） |
| TC-007 | 长文本选项 | 1. 选择内容超长的选项 | 选项文本截断或换行，高亮样式正常 |
| TC-008 | 特殊字符 | 1. 选择含特殊字符（如 @#¥）的选项 | 选项显示正常，高亮无异常 |
3. 异常与边界测试
| 用例编号 | 测试场景 | 操作步骤 | 预期结果 |
|---|---|---|---|
| TC-009 | 空数据 | 1. 下拉框无选项数据 | 显示“无数据”提示，不可展开 |
| TC-010 | 重复选择 | 1. 多次选择同一选项 | 每次选择后均高亮该选项 |
| TC-011 | 动态更新数据 | 1. 异步加载选项后选择 | 新选项可选中且高亮正常 |
| TC-012 | 禁用状态 | 1. 下拉框设置为 disabled | 无法展开或选择选项 |
4. 兼容性与无障碍测试
| 用例编号 | 测试场景 | 操作步骤 | 预期结果 |
|---|---|---|---|
| TC-013 | 跨浏览器 | 1. 在 Chrome/Firefox/Safari 中操作 | 高亮样式和功能一致 |
| TC-014 | 移动端响应式 | 1. 在手机/平板设备上操作 | 下拉列表适配屏幕，触控选择正常 |
| TC-015 | 无障碍访问 | 1. 使用屏幕阅读器操作 | 选中的选项通过 aria-selected 标识 |
5. 事件与数据流测试
| 用例编号 | 测试场景 | 操作步骤 | 预期结果 |
|---|---|---|---|
| TC-016 | 事件触发 | 1. 选择选项 | 触发 onChange 事件，回调参数为选中值 |
| TC-017 | 表单提交 | 1. 选择选项后提交表单 | 表单数据包含选中值 |
备注
- 高亮样式需与设计稿一致（如颜色、字体粗细）。
- 若选项为异步加载，需测试加载中和加载失败状态。
- 测试覆盖率应覆盖所有核心交互路径。