如何使用 LambdaTest 讓跨瀏覽器測試更高效
已發表: 2022-03-10本文得到了 LambdaTest 親愛的朋友的大力支持，LambdaTest 是一款跨瀏覽器兼容性測試工具，可讓您在真實瀏覽器和設備上進行免費的自動化和實時交互式跨瀏覽器測試。 謝謝！
在消費者每天坐在移動設備前數小時之前，網頁設計師必須應對大量的瀏覽器和操作系統。 所以，跨瀏覽器測試的概念並不新鮮。
由於 Web 瀏覽器並不總是以相同的方式呈現網站或以最初預期的方式處理數據，因此跨瀏覽器測試長期以來一直是 Web 設計和開發的重要組成部分。 這是確保幕後構建的內容在網站前端正確實施的唯一方法。
但是，如果您嘗試自己查看每個瀏覽器、操作系統和設備，它很快就會變得乏味。
幸運的是，我們生活在一個自動化為王的時代，我們現在有一種更好的方式來進行跨瀏覽器測試（而且更頻繁）。 那麼，讓我們談談為什麼需要自動化這個過程以及如何在 LambdaTest 的幫助下做到這一點。
一種處理跨瀏覽器測試的改進方法
當您著手為您的用戶建立一個網站時，您需要考慮他們是誰、他們需要什麼以及他們在整個旅程中會做出什麼回應。 但是，由於用戶的瀏覽器選擇，您如何以及何時解決用戶可能遇到的不同結果？
響應式設計可能有助於緩解其中的一些差異，但它並不是解決瀏覽器和設備之間固有的顯示問題的萬靈藥。
為了完全確保您為網站所做的代碼和設計選擇不會對用戶產生負面影響，在整個網頁設計過程中進行跨瀏覽器測試是必不可少的。
“
而且，如果您想確保廣泛的跨瀏覽器測試不會對您的底線產生負面影響，那麼自動化就是您的最佳選擇。
以下是一些提示，可幫助您在流程中構建自動化測試：
熟悉瀏覽器支持差異
這是 Statista 按市場份額對頂級網絡瀏覽器的綜述：
現在，這裡的問題不一定是每個瀏覽器都以不同的方式處理您的網站數據。 真正搞砸的是幕後為瀏覽器提供動力的引擎。
例如，這些是領先的網絡瀏覽器使用的引擎：
- Chrome 使用 Blink + V8；
- Edge 使用 Blink；
- Firefox 使用 Quantum/Gecko + SpiderMonkey；
- Safari 使用 WebKit + Nitro；
- Internet Explorer 使用 Trident + Chakra。
其中許多引擎以不同的方式呈現同一段代碼。 例如，看一下 LambdaTest 創建的這個實驗：
date HTML 標籤是最常用的標籤之一，然而，Chrome、Firefox 和 Opera 是唯一完全支持它的標籤——如測試區域上方的頂部藍色條所示。 即使這樣，這些瀏覽器也提供了截然不同的用戶體驗。
例如，上圖顯示了日期標籤在 Chrome 中的樣子。 以下是相同代碼在 Edge 中的顯示方式：
不僅字體樣式和大小略有不同，而且日期選擇下拉菜單的顯示方式也大不相同。
因此，在您開始考慮跨瀏覽器測試並解決這些瀏覽器和引擎之間的問題之前，請先熟悉關鍵差異。
可以用作參考的工具是我可以使用...。
您可以在最常用的組件和技術中尋找差異。 以 CSS 網格佈局為例：
大多數領先的（和一些不那麼領先的）瀏覽器都支持 CSS 網格佈局（綠色的那些）。 Internet Explorer（藍色）提供部分支持，而 Opera Mini（紫色）則完全不提供。
或者假設您嘗試在設計中使用更多 WebP 圖像，因為它們的性能和分辨率要好得多。 這是我可以使用的……告訴我們瀏覽器對圖像格式的支持：
最新版本的 Internet Explorer 和 Safari（網頁版和移動版）不提供支持。 因此，如果您打算使用 WebP 圖像進行設計，則必須為這些瀏覽器創建一個解決方法。
底線：現在花點時間了解支持的內容或代碼類型，這樣您就可以從一開始就更有效地構建網站。
專業提示：創建瀏覽器矩陣以供參考
您可以看到為什麼理解瀏覽器渲染和支持之間的差異如此重要。 您對它們越熟悉，當發現新的差異時，您就越不會慌亂。
為了讓您自己更輕鬆，現在為所有這些差異創建一個瀏覽器矩陣是一個好主意。
這是 LambdaTest 設計的一個簡單的：
我建議您自己創建一個。 您可以利用Can I use...中的數據以及記錄您在自己的項目中遇到的支持問題。
這也將幫助您在設計時設置優先級。 例如，您可以根據它們對您網站目標的影響來決定哪些不受支持的功能值得使用。
網站上線後，準備好此電子表格也很有用。 使用來自 Google Analytics 的數據，您可以開始根據用戶主要使用的 Web 瀏覽器來確定設計選擇的優先級。
給自己一個可以完成所有工作的跨瀏覽器測試工具
您構建的網站的大小無關緊要。 所有面向公眾的網站都將受益於自動化的跨瀏覽器測試工具。
使用 LambdaTest 進行自動化特別好的地方在於它為用戶提供了選項。 從檢查您的代碼如何影響前端的全自動測試到簡化管理更新和錯誤工作的半自動化任務，有很多方法可以自動化和優化您的流程。
以下是您應該了解的一些功能亮點：
實時測試：最適合錯誤跟踪
當您需要用自己的兩隻眼睛檢查目標時，實時測試很有用。 就像如果您已將設計發送給客戶進行審查，但他們堅持認為某些東西看起來不正確，您可以使用他們的確切配置來審查網站。 它還有助於確認錯誤並確定哪些瀏覽器受到影響。
在實時測試面板中，您將輸入您的站點 URL，然後選擇您的查看規範。
它可以讓您獲得超級具體，從以下選項中進行選擇：
- Mac 與 Android，
- 設備類型，
- 設備版本，
- 操作系統，
- 網頁瀏覽器。
測試開始後，您將看到以下內容（當然，取決於您選擇的設備類型）：
上面，您可以看到側邊欄中的第一個選項可以讓您快速切換設備視圖。 這樣，如果您有幾個瀏覽器視圖試圖比較或檢查錯誤，您就不必回溯。
就其他實時測試選項而言，它們中的大多數對於在實際發生的上下文中識別和報告問題很有用。
在上面的錯誤跟踪工具中，您可以查明頁面上發生錯誤的位置。 然後，您可以使用側邊欄上的許多工具對其進行標記。
用戶還可以使用屏幕截圖和視頻選項來捕獲更大的錯誤——尤其是在您瀏覽網站或與網站互動時發生的錯誤。
屏幕截圖測試：最適合加速手動測試
您或您的 QA 沒有理由仍然無法自行審核您的網站。 也就是說，為什麼要讓這個過程比它需要的時間更長呢？ 您可以讓 LambdaTest 的可視化 UI 測試工具加快該過程。
例如，屏幕截圖工具使您可以一次選擇要比較的所有設備和瀏覽器：
測試完成後，您將在一處獲得所有請求的屏幕截圖：
您可以在此處查看它們，將它們下載到您的計算機或與他人共享。
您還可以按項目和版本/輪次組織您的屏幕截圖。 這樣，如果您正在進行多輪修訂並想要參考以前的版本，則以前迭代的所有副本都存在於此。 （您也可以在回歸測試中使用屏幕截圖，稍後我將對此進行解釋。）
響應式測試：最適合確認移動優先體驗
如果您需要查看的不僅僅是靜態屏幕截圖，響應式測試可以滿足您的需求。 您需要做的就是選擇要比較的操作系統和設備，該工具將在移動瀏覽器中填充網站的完整工作版本：
您不僅可以在所有可能的瀏覽器中查看您網站的設計和交互性，還可以更改網站的方向（以防萬一在橫向時出現問題）。
這個測試工具的好處是，如果有任何問題出現，您可以在檢測到它的第二秒標記錯誤。 在交互式移動瀏覽器的正上方有一個按鈕供您執行此操作。 這樣可以更快地報告和解決那些代價高昂的移動錯誤。
智能測試：最適合回歸測試
眼睛只能檢測到這麼多，尤其是當您已經查看網頁的同一部分數週時。
因此，當您開始在您的網站上實施更改時——在開發期間、在發布之前甚至之後——回歸測試對於捕捉那些潛在的難以發現的問題至關重要。
這應該在任何事情發生變化時發生：
- 您手動更新設計的一部分。
- 代碼在後端進行了調整。
- 有人報告了一個錯誤並實施了修復。
- 軟件已更新。
- 重新連接 API。
如果您知道哪個頁面以及該頁面的哪個部分受到直接影響，智能測試可以輕鬆確認一切正常。
只需上傳受影響頁面的原始屏幕截圖，然後在進行更改後添加比較圖像。 （這就是屏幕截圖工具真正派上用場的地方。）
注意： Smashing Magazine 網站顯然沒有任何問題。 但我在上面的示例中所做的是為不同版本的 iPhone 使用渲染。 顯然，這不是回歸測試的工作方式，但我想向您展示這個比較功能在出現問題時的外觀。
現在，至於為什麼這個功能如此棒，下面是它的工作原理：
此單個屏幕截圖可讓您查看頁面的兩個版本不再對齊的位置。 因此，如果屏幕截圖最初來自同一個瀏覽器視圖，如果您沒有計劃重新對齊所有元素，這可能是一個問題。
您還可以使用並排比較測試來檢查相同的內容：
同樣，智能測試旨在幫助您在回歸測試期間快速定位和報告問題。 找到最適合您的方法，以便您從現在開始盡快解決這些問題。
自動化測試：最適合大規模檢測問題
從技術上講，到目前為止，我們所看到的一切都內置了某種形式的自動化，無論是同時處理 20 個不同的瀏覽器屏幕截圖，還是讓您立即查看所有 iOS 和 Android 設備的移動測試界面。
也就是說，LambdaTest 平台還附帶了一個名為“自動化”的工具。 這使您能夠在超過 2,000 個瀏覽器上的雲中進行 Selenium 測試。 一個較新的功能“Lambda Tunnel”也可用於在您的本地主機上進行 Selenium 測試。 這樣，您甚至可以在代碼更改上線之前看到它們的顯示方式。
將 LambdaTest 與 Selenium 測試相結合有很多好處：
- 這是進行大量跨瀏覽器測試的高效方法，從而增加瀏覽器覆蓋率（這是無法手動完成的）。
- 通過並行跨瀏覽器測試，您將減少執行整個自動化測試所花費的時間。
- 因為 Selenium 測試首先確定您首選的編碼語言，所以它可以更智能地檢測瀏覽器中出現的錯誤。
當然，使用 LambdaTest Selenium 自動化網格的最大好處是 LambdaTest 將幫助您評估您的測試是通過還是失敗。
您仍然需要查看結果以確認所有錯誤都是真正的失敗，反之亦然，但是讓 LambdaTest 為您完成初始工作將為您節省大量時間和麻煩。
包起來
跨瀏覽器測試不僅僅是確保網站具有移動響應能力。 我們最終希望在這裡做的是消除網頁設計中的猜測。 可能有十幾種可能的瀏覽器和數百種瀏覽器/設備配置，但自動跨瀏覽器測試可以使檢查所有這些可能性和定位錯誤變得更加容易。