【辰兮要努力】：hello你好我是辰兮，很高興你能來(lái)閱讀，昵稱(chēng)是希望自己能不斷精進(jìn)，向著優(yōu)秀程序員前行！

博客來(lái)源于項(xiàng)目以及編程中遇到的問(wèn)題總結(jié)，偶爾會(huì)有讀書(shū)分享，我會(huì)陸續(xù)更新Java前端、后臺(tái)、數(shù)據(jù)庫(kù)、項(xiàng)目案例等相關(guān)知識(shí)點(diǎn)總結(jié)，感謝你的閱讀和關(guān)注，希望我的博客能幫助到更多的人，分享獲取新知，大家一起進(jìn)步!

吾等采石之人，應(yīng)懷大教堂之心，愿大家奔赴在各自的熱愛(ài)里…

文章目錄

• • • 一、文章序言
    • 二、界面相關(guān)
    • 三、布局相關(guān)
    • 四、兼容性相關(guān)

---

一、文章序言

最近一段時(shí)間在開(kāi)發(fā)測(cè)試一個(gè)完整的模塊，在測(cè)試過(guò)程中我發(fā)現(xiàn)有很多頁(yè)面出現(xiàn)相同的問(wèn)題，同時(shí)在測(cè)試幾輪后我發(fā)現(xiàn)我仍然會(huì)有遺漏的小細(xì)節(jié)

當(dāng)然一些基礎(chǔ)的問(wèn)題我覺(jué)得應(yīng)該在開(kāi)發(fā)階段就避免和解決掉!

現(xiàn)整理一下最近遇到的前端常見(jiàn)問(wèn)題：反思、學(xué)習(xí)、分享

前端問(wèn)題總結(jié)可能存在重疊的部分或者遺漏的地方，不過(guò)我們按照這個(gè)思路可以解決大多數(shù)前端測(cè)試階段遇到的問(wèn)題

---

二、界面相關(guān)

樣式問(wèn)題：

1、字體重疊
2、彈框輸入框位置錯(cuò)位
3、很明顯的的不工整的顯示
4、輸入框內(nèi)提示字寫(xiě)錯(cuò)，或者提示的漢字寫(xiě)錯(cuò)等
5、表格數(shù)據(jù)顯示的時(shí)候什么數(shù)據(jù)居左，什么數(shù)據(jù)居中，什么數(shù)據(jù)居右（根據(jù)業(yè)務(wù)與數(shù)據(jù)實(shí)際情況顯示）
………………

---

表格分頁(yè)問(wèn)題：

分頁(yè)可以自由點(diǎn)擊，且可以自由切換頁(yè)數(shù)頁(yè)碼

---

表單的校驗(yàn)問(wèn)題：

作為一個(gè)開(kāi)發(fā)人員一定要有意識(shí)，姓名，郵箱，手機(jī)號(hào)，編號(hào)等等需要必填的必填項(xiàng)！ 務(wù)必務(wù)必增加校驗(yàn)！

具體根據(jù)業(yè)務(wù)總結(jié)反思

在開(kāi)發(fā)測(cè)試過(guò)程常見(jiàn)到打開(kāi)彈框出現(xiàn)校驗(yàn)未清除問(wèn)題

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

偶爾也遇到有人清空校驗(yàn)后又f12報(bào)錯(cuò)的問(wèn)題

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

---

頁(yè)面間跳轉(zhuǎn)問(wèn)題

頁(yè)面流程的完整性一定要走通，不要出現(xiàn)跳轉(zhuǎn)爆404的情況，返回跳登錄頁(yè)面情況

拓展：部分系統(tǒng)禁用了瀏覽器的返回按鈕

如果vue頁(yè)面使用了window.vue.$router.go(-1)，會(huì)導(dǎo)致無(wú)法返回到上一頁(yè)，瀏覽器會(huì)自動(dòng)跳到登錄頁(yè)面

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

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

---

彈出框顯隱問(wèn)題

錯(cuò)誤的實(shí)戰(zhàn)場(chǎng)景

1、彈框打不開(kāi)

2、彈框只能打卡一次，關(guān)閉后無(wú)法再次打開(kāi)

3、彈框嵌套彈框會(huì)影響其他彈框的關(guān)閉和打開(kāi)

保證頁(yè)面中的彈出框可以正常的打卡和正常關(guān)閉，每一個(gè)彈框獨(dú)立

建議: 如果彈出框代碼較多或者邏輯復(fù)雜建議單獨(dú)寫(xiě)一個(gè)dialog-vue頁(yè)面，主頁(yè)面引用

//之前在緩存模式下：使用過(guò)這個(gè)函數(shù)，即將頁(yè)面數(shù)據(jù)初始化的函數(shù) 有一次導(dǎo)致過(guò)彈框在執(zhí)行此方法后打不開(kāi) Object.assign(this.$data, this.$options.data()) //也可能和開(kāi)發(fā)人員的引用有關(guān)系，正確使用即可 this.$data是表示當(dāng)前的改變后的this中的數(shù)據(jù) this.$options.data()是表示沒(méi)有賦值前的this中的數(shù)據(jù),表示 初始話(huà)的data.

當(dāng)在頁(yè)面中要對(duì)data中的數(shù)據(jù)進(jìn)行多組操作時(shí)，防止每組數(shù)據(jù)之間的影響，可以先對(duì)數(shù)據(jù)進(jìn)行初始化后在進(jìn)行賦值。

一般可以使用Object.assign(this.$data, this.$options.data())來(lái)對(duì)data中的數(shù)據(jù)進(jìn)行初始化操作。

如果data中的一部分?jǐn)?shù)據(jù)需要初始化的話(huà)就需要將這些數(shù)據(jù)放到一個(gè)對(duì)象中就行處理。

---

常見(jiàn)提示問(wèn)題

點(diǎn)擊過(guò)程中警告的提示用warning

大部分的CV戰(zhàn)士在開(kāi)發(fā)過(guò)程中復(fù)制了提示就沒(méi)有管后續(xù)了，不要濫用error

服務(wù)端返回的錯(cuò)誤信息我們可以使用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: '錯(cuò)了哦，這是一條錯(cuò)誤消息',type: 'error'});

duration是顯示時(shí)間, 毫秒。設(shè)為 0 則不會(huì)自動(dòng)關(guān)閉，默認(rèn)3000毫秒

showClose是否顯示關(guān)閉按鈕

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

正確的使用相關(guān)前端提示，用戶(hù)會(huì)有更好的產(chǎn)品體驗(yàn)

---

三、布局相關(guān)

這里開(kāi)發(fā)人員一般安裝UI出的設(shè)計(jì)開(kāi)發(fā)，當(dāng)然如果你覺(jué)得有建議或者可以?xún)?yōu)化的地方應(yīng)該及時(shí)的提出溝通，減少后續(xù)修改成本

常見(jiàn)比如多個(gè)按鈕的擺放位置，輸入框排列位置，具體的table頁(yè)的屬性的排布

頁(yè)面整體的布局跟著自己的產(chǎn)品屬性走吧

---

四、兼容性相關(guān)

前端開(kāi)發(fā)還涉及到很多兼容性相關(guān)的東西：如瀏覽器，分辨率，平臺(tái)屬性等等

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

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

還遇到過(guò)打開(kāi)電腦軟鍵盤(pán)的操作，當(dāng)時(shí)的方法，只支持在IE瀏覽器上打開(kāi)軟鍵盤(pán)

如上等等問(wèn)題開(kāi)發(fā)過(guò)程要積累經(jīng)驗(yàn)，積極尋求大佬幫助，再總結(jié)內(nèi)化，分享幫助到更多的人

分辨率：根據(jù)產(chǎn)品的實(shí)際應(yīng)用場(chǎng)景，主流的分辨率要做到適配，我們現(xiàn)在做的要兼容1440等情況，錯(cuò)誤也算開(kāi)發(fā)需要兼容考慮的問(wèn)題

分辨率問(wèn)題根據(jù)產(chǎn)品場(chǎng)景來(lái)

平臺(tái)屬性：我們是做模塊化開(kāi)發(fā)，但是應(yīng)用于不同的產(chǎn)品系統(tǒng)，部分樣式會(huì)被平臺(tái)更高權(quán)重的樣式影響到，也有涉及到緩存模式，要兼容，產(chǎn)品要樣式要適配不同的皮膚，如果不適配要單獨(dú)寫(xiě)樣式適配

---

最近一段時(shí)間在對(duì)自己項(xiàng)目進(jìn)行測(cè)試驗(yàn)證，本篇是對(duì)近期前端測(cè)試工作的一個(gè)簡(jiǎn)單總結(jié)，可能有部分遺漏，歡迎大家留言指出，后期在完善的過(guò)程中我會(huì)不斷的反思總結(jié)，爭(zhēng)取輸出更好的文章

努力成為一名熱愛(ài)產(chǎn)品的研發(fā)工程師

---

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。