當網絡還很年輕的時候，一個56k的連接速度很快，CSS是新的，F(xiàn)lash在Macromedia眼中只是一個亮點。有一個短語出現(xiàn)在了一半的閃屏上:在IE6中瀏覽效果最好。

你看，早在20世紀初，互聯(lián)網的競爭就沒那么激烈了。完全有可能忽略掉40%的用戶而仍然盈利。事實上，考慮到為每個瀏覽器維護不同的代碼庫的開銷，為多個瀏覽器構建代碼庫在財務上往往是不可行的。

前端代碼在不同的瀏覽器中呈現(xiàn)的方式仍然非常不同

多年來，web的競爭變得更加激烈，開發(fā)人員開始認真考慮如何為更廣泛的受眾編寫站點代碼;網絡標準開始出現(xiàn)。

很難想象，如果沒有網絡標準的支撐，我們將如何應對移動網絡的指數級增長。然而，web標準助長了瀏覽器一致顯示代碼的誤解;事實上，前端代碼在不同的瀏覽器中呈現(xiàn)出來的效果仍然非常不同。

為什么瀏覽器不一致?

盡管業(yè)界普遍認同web標準，但瀏覽器呈現(xiàn)web頁面的方式仍然非常不同。原因如下:

不斷發(fā)展的網絡標準

發(fā)布CSS3、HTML5，尤其是ECMAScript的新特性需要很長時間。從最初的提案到建議，有數百個修改和修正。

問題是早期采用者經常發(fā)現(xiàn)他們使用的是一個過時的規(guī)范版本。

以CSS的Flexbox為例，它在所有主流瀏覽器上都享有良好的支持，甚至在IE上也是如此;不幸的是，微軟編寫了一個較老版本的規(guī)范，任何仍然需要支持IE的人將發(fā)現(xiàn)他們需要運行向后兼容的代碼。

解釋的空間

Web標準故意留下了大量的解釋空間。由于規(guī)范引用了默認設置，所以有許多屬性以不同的方式呈現(xiàn)，但沒有定義該默認設置。

雖然這可能令人沮喪，但這種靈活性是有充分理由的:將macOS的Safari瀏覽器上的select元素與iOS的Safari瀏覽器上的select元素進行比較;不僅是選擇風格不同，因為它將是在邊緣，或Chrome -這是一個完全不同的用戶界面元素!

bug、遺留代碼和黑客攻擊

像所有的程序員一樣，構建瀏覽器的工程師也不是完美的。他們的工作壓力、截止日期和營銷部門都和我們一樣。結果是不完整的代碼常常有bug，特別是在邊緣情況下。

有一個典型的瀏覽器bug只出現(xiàn)在Chrome中:帶有占位符文本的輸入字段，在Y軸上旋轉180度，出人意料地覆蓋了backface-visibility屬性。的原因嗎?不知什么時候，有人在Chrome的引擎上工作(可能是為了加速渲染)，選擇切換可見性，而不是檢測當前的當前狀態(tài)。

設計不一致

幸運的是，瀏覽器大戰(zhàn)已經過去很久了。但是，由于上面列出的原因，開發(fā)人員必須接受這樣一個事實，即瀏覽器是不一致的。

當然,網站不需要每一個瀏覽器和設備上看起來一樣——的原因之一,有多種瀏覽器,不同的用戶有不同的喜好,但網站必須功能,和熟悉(尤其是在移動和桌面)然而用戶選擇訪問它。

測試站點的一種方法是購買10-20臺計算機和20-30臺移動設備，在每臺設備上安裝多個瀏覽器，每次修改代碼時都要在每臺設備上進行艱苦的測試。

更聰明的方法是使用像Lambdatest這樣的跨瀏覽器測試應用程序。

設計與Lambdatest

Lambdatest是一個SaaS，它支持在各種設備上進行測試，讓您的開發(fā)機器也能輕松地進行測試。您不需要任何特殊設備，只需登錄網站進行一系列不同的測試選擇:

跨瀏覽器測試

Lambdatest可以讓你在2000多個不同的瀏覽器上進行實時的交互測試。這些不是模擬器，它們是您遠程訪問的實際瀏覽器實例。

通過一個直觀的用戶界面，你可以瀏覽macOS、iOS、Windows和Android上的頂級瀏覽器。比較不一致性，甚至使用屏幕截圖和視頻選項來記錄問題區(qū)域。

這種手工測試方法非常靈活，對于檢查構建的各個組件非常理想。這對于檢查bug修復是否完全解決非常有用。但是對于真正全面的測試來說，手工測試是勞動密集型的，因為Lambdatest提供了自動化測試。

自動化測試

Lambdatest真正發(fā)揮作用的地方是自動化測試。自動化允許您測試您的設計，最多可以測試2000多個瀏覽器實現(xiàn)。只需選擇您想要測試的操作系統(tǒng)和瀏覽器，運行自動化的屏幕截圖過程，并在儀表板中查看結果。

對于在開發(fā)過程中進行的測試，您可能只想比較目標瀏覽器，但是對于任何構建里程碑，都應該盡可能全面地進行測試。

使用restful API，您可以自動記錄日志、測試元數據，并以世界記錄的速度查找bug，從而節(jié)省您的時間、金錢和聲譽。

第三方集成

除了手工測試和自動化之外，Lambdatest還集成了大量的第三方工具，包括Jira、GitLab和Trello。這意味著您可以徹底地測試您的站點，而不必離開您現(xiàn)有工作流程的安全性。

它還有一個Chrome擴展和一個WordPress插件。這兩款工具都可以讓你在2000多個瀏覽器上對你的網站進行截屏，你只需在瀏覽器或WordPress管理面板上點擊一下即可。

聰明的比較測試

也許我們最喜歡的特性是智能UI測試特性。這個創(chuàng)新的功能可以自動檢測出什么地方出了問題。對于遠程工作的設計人員和開發(fā)人員來說，這是非常好的，因為他們沒有同事的新眼睛來檢查更改。

只需從Lambdatest的自動化測試中調出一個屏幕截圖作為基線，然后運行智能比較測試工具，它將標記出任何顯著的差異。

當您快速修復bug時，這是一個非常好的工具，需要再次檢查修復是否破壞了其他東西?？紤]到代碼中的絕大多數bug都是在瀏覽器不一致的情況下引入的，所以最好檢查一下引入的解決方案是否會帶來大量全新的問題。

為什么選擇Lambdatest

為了覆蓋市場上更流行的品牌，您需要測試的不同瀏覽器和設備的數量對于大多數團隊來說都是非常昂貴的。更不用說持續(xù)更新的需求。Lambdatest消除了這種成本，并使全面的測試在每個網絡專業(yè)人士的能力范圍內。如果沒有Lambdatest支持的跨瀏覽器測試，設計和構建一個現(xiàn)代網站幾乎是不可能的。

我們喜歡Lambdatest的原因是它是一種靈活的方式，可以將全面和可靠的測試工作到您現(xiàn)有的工作流程中。還有其他一些應用程序可以讓你在不同的瀏覽器上進行測試，但它們通常會迫使你采用一種新的工作方式，Lambdatest不會。