【经验分享】Web前端开发测试常见问题总结
【辰兮要努力】: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)題
偶爾也遇到有人清空校驗(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)題。
- 上一篇: 设计配色灵感|热情甜蜜色系配色方案
- 下一篇: 浏览器数据库IndexedDB