一、輸入框（Input Box）

輸入框用于接收用戶文本輸入，是最易出現(xiàn)問題的控件之一，常見 bug 包括：
數(shù)據(jù)驗(yàn)證失效
類型校驗(yàn)不嚴(yán)格：例如要求輸入手機(jī)號(hào)（純數(shù)字），但可輸入字母、符號(hào)；要求輸入郵箱卻不校驗(yàn)@符號(hào)。
長(zhǎng)度限制無(wú)效：超過設(shè)定的最大長(zhǎng)度（如 11 位手機(jī)號(hào)）仍可繼續(xù)輸入，或輸入內(nèi)容被截?cái)嗪笪刺崾尽?br> 特殊字符處理異常：輸入引號(hào)（"）、尖括號(hào)（<>）等字符時(shí)，頁(yè)面顯示錯(cuò)亂（如文字重疊）或觸發(fā)腳本注入（XSS 風(fēng)險(xiǎn)）。
狀態(tài)與交互問題
禁用 / 只讀屬性失效：設(shè)置disabled或readonly的輸入框仍可編輯，或通過瀏覽器開發(fā)者工具修改后可輸入。
前后空格未處理：用戶輸入首尾空格時(shí)，系統(tǒng)未自動(dòng)去除（trim），導(dǎo)致后續(xù)校驗(yàn)失?。ㄈ绲卿洉r(shí)用戶名帶空格提示 “不存在”）。
提示文字異常：placeholder在輸入內(nèi)容后未消失，或獲取焦點(diǎn)后仍顯示（遮擋輸入內(nèi)容）。

二、按鈕（Button）

按鈕用于觸發(fā)操作（如提交、重置），其功能穩(wěn)定性直接影響流程推進(jìn)，常見 bug 包括：
功能失效
點(diǎn)擊無(wú)響應(yīng)：未綁定點(diǎn)擊事件（onclick），或事件綁定錯(cuò)誤（如 JS 語(yǔ)法錯(cuò)誤導(dǎo)致代碼中斷）。
重復(fù)提交：表單提交按鈕未做防重復(fù)點(diǎn)擊處理（如未禁用按鈕），導(dǎo)致用戶快速點(diǎn)擊時(shí)多次提交數(shù)據(jù)（如重復(fù)下單）。
禁用狀態(tài)可交互：設(shè)置disabled的按鈕仍可點(diǎn)擊（如通過鍵盤Enter觸發(fā)），或點(diǎn)擊后執(zhí)行邏輯。
樣式與體驗(yàn)問題
狀態(tài)樣式不一致：點(diǎn)擊后無(wú) “選中” 反饋（如無(wú)顏色變化），禁用時(shí)樣式與正常狀態(tài)相同（用戶分不清是否可點(diǎn)擊）。
位置沖突：按鈕與其他控件（如下拉框）重疊，點(diǎn)擊時(shí)誤觸發(fā)其他控件（如點(diǎn)擊按鈕時(shí)同時(shí)打開下拉菜單）。
快捷鍵沖突：自定義快捷鍵（如Ctrl+S）與瀏覽器默認(rèn)快捷鍵（如保存頁(yè)面）沖突，導(dǎo)致功能異常。

三、下拉菜單（Dropdown/Select）

下拉菜單用于從預(yù)設(shè)選項(xiàng)中選擇，常見 bug 集中在顯示與數(shù)據(jù)同步上：
顯示異常
選項(xiàng)被遮擋：下拉框彈出后被導(dǎo)航欄、彈窗等元素覆蓋（z-index 設(shè)置錯(cuò)誤），部分選項(xiàng)無(wú)法查看。
內(nèi)容截?cái)啵哼x項(xiàng)文字過長(zhǎng)時(shí)未換行或顯示省略號(hào)（...），導(dǎo)致信息不全（如 “北京市朝陽(yáng)區(qū)” 顯示為 “北京市朝...”）。
滾動(dòng)位置錯(cuò)亂：頁(yè)面滾動(dòng)后，下拉框未跟隨輸入框移動(dòng)（如固定定位錯(cuò)誤），導(dǎo)致選項(xiàng)顯示在屏幕外。
數(shù)據(jù)同步問題
選擇后未更新：選中某選項(xiàng)后，輸入框顯示內(nèi)容仍為默認(rèn)值（如選擇 “上海” 后顯示 “請(qǐng)選擇城市”）。
動(dòng)態(tài)選項(xiàng)未刷新：依賴其他控件的下拉框（如 “省份” 選擇后加載 “城市”），數(shù)據(jù)未實(shí)時(shí)更新（如選 “浙江” 后城市仍顯示 “北京” 的區(qū)縣）。
禁用選項(xiàng)可選中：設(shè)置disabled的選項(xiàng)（如 “已下架商品”）仍可被點(diǎn)擊選中，提交后觸發(fā)后端錯(cuò)誤。

四、復(fù)選框（Checkbox）與單選框（Radio Button）

這類控件用于選擇（多選 / 單選），邏輯關(guān)聯(lián)錯(cuò)誤是主要問題：
復(fù)選框（Checkbox）
狀態(tài)未保存：勾選后刷新頁(yè)面，狀態(tài)恢復(fù)默認(rèn)（未存入緩存或本地存儲(chǔ)）。
全選功能失效：點(diǎn)擊 “全選” 按鈕后，部分子復(fù)選框未勾選；或取消某子選項(xiàng)后，全選框未自動(dòng)取消勾選。
關(guān)聯(lián)邏輯錯(cuò)誤：如 “選項(xiàng) A” 與 “選項(xiàng) B” 互斥（勾選 A 后 B 應(yīng)禁用），但實(shí)際可同時(shí)勾選。
單選框（Radio Button）
可多選：同一組單選框因name屬性不一致（如name="gender1"和name="gender2"），導(dǎo)致可同時(shí)選中多個(gè)選項(xiàng)。
標(biāo)簽關(guān)聯(lián)失效：點(diǎn)擊label文字時(shí)無(wú)法選中對(duì)應(yīng)單選框（label的for屬性與單選框id不匹配）。
狀態(tài)不明確：樣式設(shè)計(jì)問題導(dǎo)致 “選中” 與 “未選中” 難以區(qū)分（如僅顏色深淺差異，低對(duì)比度下看不清）。

五、日期選擇器（Date Picker）

日期選擇器用于快速選擇日期，常見問題與格式、范圍限制相關(guān)：
格式與校驗(yàn)問題
格式不匹配：前端選擇日期顯示為yyyy-mm-dd，但提交給后端時(shí)格式錯(cuò)誤（如后端要求mm/dd/yyyy，導(dǎo)致接口報(bào)錯(cuò)）。
范圍限制無(wú)效：設(shè)置 “只能選擇未來(lái)日期” 時(shí)，仍可選擇過去的日期；或最小 / 最大日期設(shè)置錯(cuò)誤（如最小日期晚于最大日期）。
交互異常
月份 / 年份切換失效：點(diǎn)擊 “上一月”“下一年” 按鈕無(wú)反應(yīng)（JS 事件未綁定），或切換后日期顯示錯(cuò)誤（如 2 月顯示 30 天）。
移動(dòng)端適配問題：在手機(jī)上日期選擇器彈窗過大，部分按鈕（如 “確定”）超出屏幕，無(wú)法點(diǎn)擊。

六、文件上傳控件（File Upload）

文件上傳涉及本地文件讀取與服務(wù)器交互，常見 bug 包括：
校驗(yàn)失效
類型限制無(wú)效：設(shè)置 “僅支持.jpg/png”，但可上傳.exe/.txt 文件（前端校驗(yàn)被繞過，且后端未二次校驗(yàn)）。
大小限制異常：超過最大限制（如 5MB）的文件仍可上傳，或上傳后無(wú)錯(cuò)誤提示（用戶以為成功）。
體驗(yàn)問題
進(jìn)度反饋錯(cuò)誤：上傳進(jìn)度條不動(dòng)但實(shí)際已完成，或進(jìn)度條 100% 后長(zhǎng)時(shí)間無(wú) “上傳成功” 提示。
文件名亂碼：上傳中文文件名（如 “測(cè)試圖片.png”）后，頁(yè)面顯示為 “??? 圖片.png”（編碼格式未統(tǒng)一為 UTF-8）。
未選擇文件可提交：點(diǎn)擊 “上傳” 按鈕時(shí)，未校驗(yàn)是否選擇文件，直接提交導(dǎo)致后端報(bào)錯(cuò)（無(wú)友好提示）。

七、彈窗（Modal/Popup）

彈窗用于展示臨時(shí)信息（如確認(rèn)框、詳情頁(yè)），其交互流暢性影響用戶體驗(yàn)：
關(guān)閉功能失效：關(guān)閉按鈕（×）、“取消” 按鈕點(diǎn)擊無(wú)反應(yīng)，或點(diǎn)擊彈窗外部空白區(qū)域無(wú)法關(guān)閉（未綁定關(guān)閉事件）。
顯示異常：彈窗未居中顯示（如在小屏幕上偏左 / 偏上），或部分內(nèi)容超出屏幕（無(wú)滾動(dòng)條）。
背景未鎖定：彈窗打開時(shí)，仍可操作背后的頁(yè)面元素（如下拉菜單、按鈕），導(dǎo)致數(shù)據(jù)混亂（如同時(shí)打開兩個(gè)彈窗）。

八、表格（Table）

表格用于展示列表數(shù)據(jù)（如訂單列表），常見問題集中在分頁(yè)、排序、篩選：
分頁(yè)錯(cuò)誤：點(diǎn)擊 “下一頁(yè)” 無(wú)反應(yīng)，或頁(yè)碼顯示與實(shí)際數(shù)據(jù)量不符（如共 10 條數(shù)據(jù)，每頁(yè) 5 條，卻顯示 “共 3 頁(yè)”）。
排序失效：點(diǎn)擊表頭（如 “金額”）排序時(shí)，數(shù)據(jù)未按升序 / 降序重新排列，或排序邏輯反了（如 “從大到小” 變成 “從小到大”）。
篩選異常：輸入篩選條件（如 “狀態(tài) = 已完成”）后，表格數(shù)據(jù)未過濾，或過濾結(jié)果包含不符合條件的記錄。

總結(jié)

控件 bug 的核心原因通常是：前端邏輯錯(cuò)誤（如 JS 校驗(yàn)遺漏）、兼容性問題（如 IE 與 Chrome 對(duì)disabled屬性處理不同）、前后端交互不一致（如數(shù)據(jù)格式不匹配）。測(cè)試時(shí)需結(jié)合功能校驗(yàn)、邊界值（如最大長(zhǎng)度、特殊字符）、跨瀏覽器（Chrome/Edge/IE）、跨設(shè)備（PC / 手機(jī)）場(chǎng)景，全面覆蓋控件的 “功能 - 樣式 - 體驗(yàn)” 維度。