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

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

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

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

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

為什么瀏覽器不一致?

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

不斷發(fā)展的網(wǎng)絡(luò)標(biāo)準(zhǔn)

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

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

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

解釋的空間

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

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

bug、遺留代碼和黑客攻擊

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

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

設(shè)計不一致

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

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

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

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

設(shè)計與Lambdatest

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

跨瀏覽器測試

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

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

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

自動化測試

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

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

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

第三方集成

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

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

聰明的比較測試

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

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

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

為什么選擇Lambdatest

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

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