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

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

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

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

很難想象，如果沒有網(wǎng)絡(luò)標(biāo)準(zhǔn)的支撐，我們將如何應(yīng)對(duì)移動(dòng)網(wǎng)絡(luò)的指數(shù)級(jí)增長(zhǎng)。然而，web標(biāo)準(zhǔn)助長(zhǎng)了瀏覽器一致顯示代碼的誤解;事實(shí)上，前端代碼在不同的瀏覽器中呈現(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的新特性需要很長(zhǎng)時(shí)間。從最初的提案到建議，有數(shù)百個(gè)修改和修正。

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

以CSS的Flexbox為例，它在所有主流瀏覽器上都享有良好的支持，甚至在IE上也是如此;不幸的是，微軟編寫了一個(gè)較老版本的規(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)格不同，因?yàn)樗鼘⑹窃谶吘墸駽hrome -這是一個(gè)完全不同的用戶界面元素!

bug、遺留代碼和黑客攻擊

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

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

設(shè)計(jì)不一致

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

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

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

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

設(shè)計(jì)與Lambdatest

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

跨瀏覽器測(cè)試

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

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

這種手工測(cè)試方法非常靈活，對(duì)于檢查構(gòu)建的各個(gè)組件非常理想。這對(duì)于檢查bug修復(fù)是否完全解決非常有用。但是對(duì)于真正全面的測(cè)試來說，手工測(cè)試是勞動(dòng)密集型的，因?yàn)長(zhǎng)ambdatest提供了自動(dòng)化測(cè)試。

自動(dòng)化測(cè)試

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

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

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

第三方集成

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

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

聰明的比較測(cè)試

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

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

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

為什么選擇Lambdatest

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

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