當前位置:首頁 » 網頁前端 » 前端頁面測試
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端頁面測試

發布時間: 2022-02-17 07:54:31

A. 前端做出來的移動端頁面用什麼測試

移動端的web頁面調試一般可以採取以下三種調試方法:第一,在PC端的瀏覽器里直接f12調試,一般現在的瀏覽器都有device mode,調用這個模式瀏覽器就可以模擬移動端的設備進行調試,目前chrome支持的設備包括蘋果、三星、nexus等;
第二,在PC端創建安卓和ios的虛擬機調試,感覺有點復雜,一般web開發很少用這種模式,原生app開發用得比較多;
第三,直接用移動設備測試,將你開發所用的PC和要測試的移動設備連接在同一個區域網下,通過PC搭建一個伺服器,這樣移動設備就可以通過區域網ip訪問你開發的網頁看效果了。
通常來說,第一種調試方式方便快捷,能夠快速的查看效果,基本上解決90%的調試問題。剩下的問題一般要配合第三種方法,比如不同的系統(安卓、蘋果)搭配不同的瀏覽器(UC、QQ、chrome、Safari)的顯示差異問題等等。

B. 前端測試和後端測試的區別

前端主要是客戶端頁面和介面,後端主要是服務端和介面

C. 如何進行前端自動化測試

沒人邀請,路過回答。

前端測試是前端工程方面的重要分支,有過一些探索,這里簡單分享一下。

首先,還是要強調一點:
前端是一種特殊的GUI軟體
看過我最近一年內做前端工程方面相關分享的人可能有印象,我總是在強調這一點。前端測試也跟這個理論基礎有所關聯。

在這里,我還想吐槽一下:
API測試方法論在測試GUI時並不能解決所有問題。
與很多前端工程師討論過前端測試,大家更多的還是盯著API測試方法論。誠然,前端有那麼一小部分代碼是可以用API測試保證質量的,但前端項目中的絕大多數代碼是GUI界面,前端測試應該向傳統GUI測試方法論需求解決方案:GUI軟體測試_網路 ,這個網路詞條介紹的很不錯,大家可以感受一下GUI測試相關概念和方法。它的測試用例、覆蓋率統計、測試方法等等都與API測試有著很大的不同。

統一了這個認知之後,我們來討論一下前端GUI測試的特殊性。根據網路詞條上的那些介紹,相信大家都能感覺到GUI測試的成本非常高,而前端這種特殊的GUI軟體,具有天生的快速迭代特徵,這使得case維護成本也變得非常高,經常跟不上迭代速度。


個標準的互聯網應用產品的前端部分,我粗略估計大概有20%的業務基礎代碼比較穩定,比如通用組件、通用演算法和數據模塊等,可以針對這些建立復雜一些的
API和GUI測試用例來保證質量。剩下80%的部分不是很穩定,每天都在迭代,針對他們維護case的成本非常高。目前業界中號稱做了自動化測試的項
目,也大多是在做那穩定的20%。

關於穩定部分的單元測試方法我這里就不贅述了, @貘吃饃香 的答案給出了很多關鍵字,有興趣的去搜索就好了。我想討論的是針對剩下80%不穩定部分的工程化測試方案。據我了解,前端測試面對這些問題還是很無力的,業內大部分團隊還是靠堆人解決。

面對這種現狀,我其實也沒想到過什麼好的方法,基本原則就是:以最低的成本建立和維護自動化測試用例。到目前為止,就想到過兩個方案(都不是測試方案,只是回歸測試輔助):

1. 不太靠譜的「超級工位」大法。
這個方案可以說根本不是什麼技術方案,而是一個辦公設施,就是我們准備一個工位,擺上所有我們需要測試的主流設備,然後設備通過某種方式與一台電腦相連接,測試人員坐在工位上,在電腦中輸入某個url,就能同步到所有設備中,然後開始逐個的人肉測試。
超級工位大法示意圖(應該很多設備的,這里就是隨便展示一下而已。。。)超級工位大法示意圖(應該很多設備的,這里就是隨便展示一下而已。。。)
相比現在的前端GUI測試,超級工位已經算是從0到1的飛躍了,雖然沒解決什麼技術問題,但為測試前的准備工作做好了鋪墊。如果把前端測試比作吃屎,超級工位就是為這餐准備了一個好一點的餐桌。。。

2. 靠譜一些的「頁面差異監控」

12
年的時候還在網路,當時有同事去美國參加velocity,twitter分享了一下他們的開發流程,其中有一個環節就是頁面對比監控,利用了一個叫
pdiff的工具,每次提交代碼,會自動對比頁面之間的差異然後提醒測試人員注意回歸。這也是一個典型的GUI測試零成本維護用例的案例。不過pdiff
這個工具是基於像素對比的,誤報率比較高,所以去年我做了一個這個項目:fouber/page-monitor · GitHub 基於DOM樹的diff,這樣就能很大程度上自主控制要監控的元素,可以設置監控樣式、文本的變化,比起像素diff智能了一些。


工作原理就是利用phantom或其他headless瀏覽器訪問頁面,然後截圖,然後執行一段js,遍歷整個dom樹,獲取元素計算樣式和元素內文本內
容,構造出一個JSON結構,然後每次diff這個json來判斷頁面差異,並標記在截圖上展示。dom樹的diff過程有點類似react的虛擬dom
樹diff。

(react的dom樹diff演算法示意圖)(react的dom樹diff演算法示意圖)
(react的dom樹diff演算法示意圖)(react的dom樹diff演算法示意圖)

DOM樹diff我們可以分辨出元素樣式修改/內容修改/新增元素/刪除元素四種不同的頁面差異,我們可以配置選擇器來忽略元素。四種頁面差異的效果圖:

新增元素(綠色區域標記部分,「i am new here」)新增元素(綠色區域標記部分,「i am new here」)
刪除元素(灰色區域標記部分,「你好」)刪除元素(灰色區域標記部分,「你好」)
內容修改(黃色區域標記部分,「百-度」,「新-浪」)內容修改(黃色區域標記部分,「百-度」,「新-浪」)
樣式修改(紅色區域標記的部分)樣式修改(紅色區域標記的部分)

基於這樣的頁面差異對比監控,我們可以建立一個任務系統,把應用的所有頁面url監控起來,這樣每次版本迭代提交代碼後,系統就能自動告訴我們,哪些頁面的元素展現發生了改變,用於確定回歸范圍。

用監控的方式確定測試回歸范圍,是一種「少吃屎」的手段,符合工程化要求,能比較大范圍的應用,雖然不能完美解決GUI中的交互問題,但能保證GUI的展現問題已經是不小的進步了。

D. 對於前端界面數據的展示和後端數據校驗這塊的測試點有哪些呀

嗯,對於前段基本數據的展示和厚的書,就得用這塊測試點有很多。

E. 網站前端性能測試有什麼工具可以測頁面載入或渲染等時間呢

頁面載入速度本來就是和瀏覽器與機器性能掛鉤,為了區分從伺服器端取數據和瀏覽器載入渲染頁面的時間的話,比較推薦使用Chrome自帶的開發者工具,其中在Timeline的Tab下就能看到各個行為所消耗的時間,還是很方便的。
每種顏色代表不同的行為,比如Loading,Scripting,Rendering,Painting每種顏色代表不同的行為,比如Loading,Scripting,Rendering,Painting

覺得這樣不夠具有代表性的話,可以去各種頁面性能檢測的網站進行測試,得出的結果比較統一吧
我自己在用的是這個WebPagetest - Website Performance and Optimization Test,能夠比較直觀的看出性能,而且還給出了優化方法和優化後的性能對比

F. 前端開發和軟體測試哪個簡單

選擇之前可以先分別了解一下這兩個方向的主要工作職責是什麼。
一、軟體測試
字面意思,主要工作是測試軟體。發現軟體程序中的錯誤,對軟體是否符合設計要求,以及是否能達到技術要求,進行有關驗證,以及評估軟體的質量。
隨著IT類企業的大量增加,從而導致各類人才出現大量缺口,其中軟體測試人才更是緊缺。當然,這里說的是嚴格意義上的軟體測試開發工程師。
需要熟練標准規范的測試流程,能夠做性能,功能,自動化測試;熟練使用Linux操縱系統,獨立搭建測試環境;熟練MySQL、Oracle等資料庫的一種或多種;至少掌握Java、Python、C++等一門編程語言。
在蝸牛學苑的教學過程中,不但要教會學員做標準的軟體測試,還會教會學員自己開發自動化測試工具。我們會讓學員用這些工具來完成一些項目,但是這些工具對我們來說根本不是核心和重點,我們要教會大家的是不依賴於這些工具也可以完成自動化測試,這就牽涉到其背後的底層的工作原理,這些才是我們要學習的重點。
二、Web前端
前端開發是創建Web頁面或APP等前端界面呈現給用戶的過程。通過HTML、CSS及JavaScript以及衍生出來的各種技術、框架、解決方案,來實現互聯網產品的用戶界面交互。前端技術變化比較快,需要不斷的學習。在終端應用場景不斷拓展的當下,前端開發的邊界也在不斷的拓展,崗位需求的數量也會呈不斷上升的趨勢。
蝸牛學苑在結合了企業需求、企業技術調研以及目前主流的技術分析和實戰後將Web前端課程重磅升級,增加了更多項目實戰,框架原理的分析,加強了前後端的實戰。不僅要學會怎麼用,還要知道是怎麼來的。
總之,軟體測試和Web前端都是不錯的專業,都有充足的上升空間和發展前景。根據你自己的興趣和擅長的方向來選擇吧。

G. 請問,有沒有一款綜合性的前端測試工具,集成常用的前端測試工具

沒有特別集成的總和工具,給樓主列舉了一系列的測試工具
1. Browser Shots

Browsershots工具提供了對你的Web設計在不同操作系統和瀏覽器下截圖的功能。它是一個免費的在線開源Web工具,使開發人員能以一種便捷的方式同時測試網頁的瀏覽器兼容情況。在Browsershots上提交的網址將被添加到一個任務隊列。隨後一些分布式的計算機將在各自的瀏覽器中打開該網站並截圖。最終可通過一個中央伺服器來查看這些上傳的截圖。

2. IETester

IETester是一個免費的Web瀏覽器調試工具,可以模擬出不同的js引擎來幫助程序員設計效果統一的代碼。IETester可以在獨立的標簽頁中開啟IE 5.5、IE 6、IE 7以及最新的IE 8(9) beta等不同版本的IE。

3. WebPage Speed Test

使用該工具可在全球不同位置及不同瀏覽器中測試網頁的真實鏈接速度。除了簡單的測速,你還可以執行一些其他高級測試,如多步執行(multi-step transaction)、視頻錄制、內容阻止等。測試結果將提供豐富的診斷信息,包括資源載入瀑布圖、網頁速度優化檢查及改進建議等。

4. Mobile testing

使用這個工具你可以查看你的網站在移動設備上的效果。可以設置移動設備的類型、錄屏,以及結果不公開。

5. Feed validator

免費的W3C Feed校驗服務,可用於查找Atom和RSS Feed中的語法錯誤。

6. Instant Website Test

該工具提供免費即時的網站性能測試服務。可從全球不同位置探測你的網站載入速度有多快,並查明是何者降低了頁面性能。

7. Pingdom

輸入URL,即可測試頁面的載入時間,分析並發現加速的「瓶頸」所在。

8. Link Checker

該工具可用於搜尋查明你網站內的所有鏈接里是否有斷鏈。

9. DNS Health Checker

正確的DNS設置對網站運行來說是至關重要的。Pingdom的DNS Health test工具可以幫助你發現錯誤的DNS設置,並檢查域名解析是否正確。它能夠自動發現你所指定域名使用的DNS伺服器,然後執行一系列迭代測試來查明域名設置及DNS伺服器響應是否正確。

10. Load impact
Load Impact是一個在線網站負載測試服務,可以幫助你測試網站的負載和壓力。

11. Google web page tester

Google的Page Speed Service,可以為第三方網站提供網頁加速服務。你只需要把以前的域名CNAME到ghs.google.com,瀏覽者就不再直接訪問網站的伺服器,而是轉到Google的伺服器上。Google的伺服器會抓取網站伺服器上的網站內容,然後進行重寫、緩存。它使用類似CDN(內容分發)的原理,而比普通只提供緩存的CDN多了內容重寫的環節,自動為網頁提供合並CSS、合並JavaScript、將CSS移到HTML的Head、壓縮圖片、優化圖片、緩存圖片、碎片域名、gzip資源等網頁加速技巧。

12. Validate you HTML code

該工具可用於檢查Web文檔中HTML、XHTML、SMIL、MathML等標記的有效性。

13. Website vulnerability tool

免費的在線網路漏洞掃描工具,可用於檢查你的網站的安全性。

H. 前端開發好還是軟體測試好

web前端相當於是半個程序猿,測試門檻比較低但是薪資待遇也相對差一些。每當換行業時,總是不知道學習什麼,又怕自己入錯行了,那到底web前端和軟體測試哪個好呢?

了解web前端的知識

前端方面非常稀缺人才,如果懂H5那是非常好的了,而且待遇也不低,不過 瀏覽器兼容性是前端噩夢測試雖然入門門檻低,但是其實需要學的東西非常多,如果是web測試,那麼各種亂七八糟前端的東西都要去了解(JS,CSS,HTTP,HTTPS,POST請求,XML,JSON)起碼不會寫代碼,但是你要了解。

軟體測試的基礎知識

軟體測試還可以細分為功能測試,這個要求技術不高薪水也不高,屬於黑盒測試開發,這個介於黑盒和白盒之間,都要懂,而且要會代碼,薪資和開發比差不多;白盒測試,這個一般開發會做,也有給測試做的,薪資和開發差不多,基本持平自動化測試,這個基本要會寫代碼而且量還不少,薪水不錯性能測試,這個主要是性能分析,薪水也不錯,不比開發少安全測試這個基本就是搞安全的 這個能力有多強,薪資有多高。

web前端該掌握的基礎

web前端開發一般指網頁開發,學好CSS3是網頁外觀的重要一點,就是布局效果,CSS3可以幫助把網頁外觀做得更加美觀。學習JavaScript的基本語法,以及如何使用JavaScript編程將會提高開發人員的個人技能,JavaScript相對於前端來說,也是分量比較重的。也要認識一下NodeJS和PHP加上資料庫等這樣的後端語言,方便前後端開發配合,學習 HTML5、CSS3、響應式頁面布局、微網站製作等開發移動互聯網的應用。像Ajax、JQuery、jQueryMobile、Bootstrap、AngularJS等更是前端開發必學的高級技術,掌握精通這些可以拿到很滿意的薪資。

軟體測試邏輯性

軟體測試工程師與軟體工程師不同,軟體工程師大多是男生,因為軟體開發的工作需要很強的邏輯推理能力,而軟體測試工程師則不需要天天去思維創造,工作重點是在注重經驗的積累上面,同時,軟體測試工程師要查找軟體的缺陷需要具備的素質與女性所有的細心,耐心,安靜,敏感等各個方面很吻合。同時,女生做測試的優勢還在於溝通,女生應該比男生稍微細心點,這點對於發現Bug還是很有優勢的。

軟體測試是在軟體開發過程中,在不同階段對程序進行測試,發現程序中的錯誤,對軟體的質量進行控制,扮演著「把關人」的角色。細膩、敏感、認真、有耐心、想像力豐富、溝通能力強是女性與生俱來的性格特點,這些性格特點可以使女生在軟體測試工作中更加順利。

I. Web前端站點有哪些功能測試的方法

有些測試方法的界限比較模糊,比如功能測試的同時會穿插一些兼容性和安全性的測試,以下列出簡單的一些點,可以參考下:
1、該頁所提供的功能邏輯方面有無問題;
2、各輸入項的合法性測試、輸入順序;(是否只做了前端的js驗證)
3、該頁許可權,既無訪問許可權的用戶能否直接訪問該頁;
4、不同瀏覽器下該頁的顯示;
5、該頁鏈接的參數是否可以修改,對功能的影響;
7、多個頁面打開該頁,進行操作,是否有不合法的影響;
8、網路環境異常情況下系統的處理;
9、頁面鏈接是否正確;
10、cookies測試;

J. 軟體測試和前端開發有什麼區別

在選擇之前可以先分別了解一下這兩個方向的主要工作職責是什麼。
一、軟體測試
字面意思,主要工作是測試軟體。發現軟體程序中的錯誤,對軟體是否符合設計要求,以及是否能達到技術要求,進行有關驗證,以及評估軟體的質量。
隨著IT類企業的大量增加,從而導致各類人才出現大量缺口,其中軟體測試人才更是緊缺。當然,這里說的是嚴格意義上的軟體測試開發工程師。
需要熟練標准規范的測試流程,能夠做性能,功能,自動化測試;熟練使用Linux操縱系統,獨立搭建測試環境;熟練MySQL、Oracle等資料庫的一種或多種;至少掌握Java、Python、C++等一門編程語言。
在蝸牛學苑的教學過程中,不但要教會學員做標準的軟體測試,還會教會學員自己開發自動化測試工具。我們會讓學員用這些工具來完成一些項目,但是這些工具對我們來說根本不是核心和重點,我們要教會大家的是不依賴於這些工具也可以完成自動化測試,這就牽涉到其背後的底層的工作原理,這些才是我們要學習的重點。
二、Web前端
前端開發是創建Web頁面或APP等前端界面呈現給用戶的過程。通過HTML、CSS及JavaScript以及衍生出來的各種技術、框架、解決方案,來實現互聯網產品的用戶界面交互。前端技術變化比較快,需要不斷的學習。在終端應用場景不斷拓展的當下,前端開發的邊界也在不斷的拓展,崗位需求的數量也會呈不斷上升的趨勢。
蝸牛學苑在結合了企業需求、企業技術調研以及目前主流的技術分析和實戰後將Web前端課程重磅升級,增加了更多項目實戰,框架原理的分析,加強了前後端的實戰。不僅要學會怎麼用,還要知道是怎麼來的。
總之,軟體測試和Web前端都是不錯的專業,都有充足的上升空間和發展前景。根據你自己的興趣和擅長的方向來選擇吧。