【辰兮要努力】：hello你好我是辰兮，很高興你能來閱讀，昵稱是希望自己能不斷精進，向著優秀程序員前行！

博客來源于項目以及編程中遇到的問題總結，偶爾會有讀書分享，我會陸續更新Java前端、后臺、數據庫、項目案例等相關知識點總結，感謝你的閱讀和關注，希望我的博客能幫助到更多的人，分享獲取新知，大家一起進步!

吾等采石之人，應懷大教堂之心，愿大家奔赴在各自的熱愛里…

文章目錄

• • • 一、文章序言
    • 二、界面相關
    • 三、布局相關
    • 四、兼容性相關

---

一、文章序言

最近一段時間在開發測試一個完整的模塊，在測試過程中我發現有很多頁面出現相同的問題，同時在測試幾輪后我發現我仍然會有遺漏的小細節

當然一些基礎的問題我覺得應該在開發階段就避免和解決掉!

現整理一下最近遇到的前端常見問題：反思、學習、分享

前端問題總結可能存在重疊的部分或者遺漏的地方，不過我們按照這個思路可以解決大多數前端測試階段遇到的問題

---

二、界面相關

樣式問題：

1、字體重疊
2、彈框輸入框位置錯位
3、很明顯的的不工整的顯示
4、輸入框內提示字寫錯，或者提示的漢字寫錯等
5、表格數據顯示的時候什么數據居左，什么數據居中，什么數據居右（根據業務與數據實際情況顯示）
………………

---

表格分頁問題：

分頁可以自由點擊，且可以自由切換頁數頁碼

---

表單的校驗問題：

作為一個開發人員一定要有意識，姓名，郵箱，手機號，編號等等需要必填的必填項！ 務必務必增加校驗！

具體根據業務總結反思

在開發測試過程常見到打開彈框出現校驗未清除問題

if (this.$refs[formData] !== undefined) {this.$refs[formData].resetFields(); // 重置表單數據}

偶爾也遇到有人清空校驗后又f12報錯的問題

解決方案分享：TypeError: Cannot read property ‘resetFields‘ of undefined解決方案

---

頁面間跳轉問題

頁面流程的完整性一定要走通，不要出現跳轉爆404的情況，返回跳登錄頁面情況

拓展：部分系統禁用了瀏覽器的返回按鈕

如果vue頁面使用了window.vue.$router.go(-1)，會導致無法返回到上一頁，瀏覽器會自動跳到登錄頁面

window.vue.$router.go(-1);

建議：vue頁面建議直接使用路由跳轉，跳轉到指定頁面，不要使用上述返回跳轉，適配更多情況

---

彈出框顯隱問題

錯誤的實戰場景

1、彈框打不開

2、彈框只能打卡一次，關閉后無法再次打開

3、彈框嵌套彈框會影響其他彈框的關閉和打開

保證頁面中的彈出框可以正常的打卡和正常關閉，每一個彈框獨立

建議: 如果彈出框代碼較多或者邏輯復雜建議單獨寫一個dialog-vue頁面，主頁面引用

//之前在緩存模式下：使用過這個函數，即將頁面數據初始化的函數 有一次導致過彈框在執行此方法后打不開 Object.assign(this.$data, this.$options.data()) //也可能和開發人員的引用有關系，正確使用即可 this.$data是表示當前的改變后的this中的數據 this.$options.data()是表示沒有賦值前的this中的數據,表示 初始話的data.

當在頁面中要對data中的數據進行多組操作時，防止每組數據之間的影響，可以先對數據進行初始化后在進行賦值。

一般可以使用Object.assign(this.$data, this.$options.data())來對data中的數據進行初始化操作。

如果data中的一部分數據需要初始化的話就需要將這些數據放到一個對象中就行處理。

---

常見提示問題

點擊過程中警告的提示用warning

大部分的CV戰士在開發過程中復制了提示就沒有管后續了，不要濫用error

服務端返回的錯誤信息我們可以使用error

this.$message({showClose: true,message: '恭喜你，這是一條成功消息',type: 'success'}); this.$message({showClose: true,message: '警告哦，這是一條警告消息',type: 'warning'}); this.$message({showClose: true,message: '這是一條消息提示'}); this.$message({showClose: true,message: '錯了哦，這是一條錯誤消息',type: 'error'});

duration是顯示時間, 毫秒。設為 0 則不會自動關閉，默認3000毫秒

showClose是否顯示關閉按鈕

this.$message({showClose: true,duration: 2000,type: 'error',message: '錯了哦，這是一條錯誤消息'});

正確的使用相關前端提示，用戶會有更好的產品體驗

---

三、布局相關

這里開發人員一般安裝UI出的設計開發，當然如果你覺得有建議或者可以優化的地方應該及時的提出溝通，減少后續修改成本

常見比如多個按鈕的擺放位置，輸入框排列位置，具體的table頁的屬性的排布

頁面整體的布局跟著自己的產品屬性走吧

---

四、兼容性相關

前端開發還涉及到很多兼容性相關的東西：如瀏覽器，分辨率，平臺屬性等等

瀏覽器：產品要在主流的瀏覽器上正常的展示，樣式以及功能不受瀏覽器的影響

最近遇到視頻在IE瀏覽器上能播放谷歌瀏覽器上被限制的問題；部分需要安裝插件

還遇到過打開電腦軟鍵盤的操作，當時的方法，只支持在IE瀏覽器上打開軟鍵盤

如上等等問題開發過程要積累經驗，積極尋求大佬幫助，再總結內化，分享幫助到更多的人

分辨率：根據產品的實際應用場景，主流的分辨率要做到適配，我們現在做的要兼容1440等情況，錯誤也算開發需要兼容考慮的問題

分辨率問題根據產品場景來

平臺屬性：我們是做模塊化開發，但是應用于不同的產品系統，部分樣式會被平臺更高權重的樣式影響到，也有涉及到緩存模式，要兼容，產品要樣式要適配不同的皮膚，如果不適配要單獨寫樣式適配

---

最近一段時間在對自己項目進行測試驗證，本篇是對近期前端測試工作的一個簡單總結，可能有部分遺漏，歡迎大家留言指出，后期在完善的過程中我會不斷的反思總結，爭取輸出更好的文章

努力成為一名熱愛產品的研發工程師

---

非常感謝你閱讀到這里，如果這篇文章對你有幫助，希望能留下你的點贊👍 關注?? 分享👥 留言💬thanks！！！

2021年6月25日23:53:40 愿你們奔赴在自己的熱愛里！

總結

以上是生活随笔為你收集整理的【经验分享】Web前端开发测试常见问题总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。