知識星球沒有開發者會建立在不同瀏覽器中表現不同的應用程式。儘管無法抹除所有差異，但你的應用程式應該做到在各方面都能按預期工作，而這隻能透過跨瀏覽器測試來實現。
跨瀏覽器測試允許你檢查你的應用程式是否在不同的瀏覽器 —— 作業系統組合和不同的裝置中按預期工作。有時，當你使用最新技術構建應用程式時，你需要針對最新實現對它們進行測試。預釋出瀏覽器允許你輕鬆測試使用新技術構建的應用程式，因為它們配備了最新的實現。
在本文中，我們將探討 JavaScript 中的跨瀏覽器測試、它的工作原理以及為什麼需要它。接下來，我們將討論預釋出瀏覽器、它們的優勢以及如何使用它們測試 JavaScript 應用程式。
什麼是跨瀏覽器測試
在將 Web 應用程式交付給使用者之前，必須對其進行適當的測試。跨瀏覽器測試是一種質量保證，它可以保證產品的所需質量和特性，並避免 Web 應用程式出現缺陷。在跨瀏覽器測試中，Web 應用程式在具有適當測試環境管理的測試環境中進行測試。
測試環境是測試工程師用來分析其產品並確保避免缺陷的一組工具（軟體、硬體和網路）。有時，應用程式可能在某些瀏覽器中表現更好，而在其他瀏覽器中會出現一些錯誤。例如，在 Chrome 上測試的 Web 應用程式可能看起來按預期工作，但在 Microsoft Edge 上測試時，同一個應用程式可能會丟失某些功能。此外，由於開發人員在桌面環境中工作，應用程式可能無法在移動裝置上正確測試。根據statistica.com，大多數使用者都是在移動裝置上訪問應用程式。
測試環境管理是一個實現可靠軟體測試的過程。例如，測試程式、要測試的功能列表、要測試的瀏覽器/版本/平臺、執行測試的程式都包含在測試環境管理中。透過正確的測試環境管理，可以跨不同作業系統和瀏覽器平臺對 Web 應用程式進行測試，以便發現和解決錯誤。
為什麼要進行跨瀏覽器測試？
使用者可以從不同的平臺和作業系統訪問 Web 應用程式。例如，當一些使用者在他們的移動裝置（可以是 Android 或 iOS）上訪問應用程式時，另一個使用者可以透過桌上型電腦、iPad 或任何型別的平板電腦訪問相同的應用程式。雖然它是同一個應用程式，但它們是不同的螢幕解析度，並且應用程式在所有場景中的行為都不同。此外，透過跨瀏覽器測試，開發人員可以除錯和修復一些特定於瀏覽器的相容性錯誤。讓我們看看為什麼開發人員應該在向用戶交付之前在他們的 Web 應用程式中執行跨瀏覽器測試。
設計和響應能力
在實際開發 Web 應用程式之前，必須首先由 UI/UX（使用者介面/使用者體驗）設計師進行設計。UI/UX 設計師為不同的螢幕解析度建立設計。設計階段的目標是建立應用程式外觀和響應方式、按鈕和其他控制元件的行為方式的視覺效果。為了說明這些元素在使用者點選或與它們互動時應該如何表現，動畫被納入設計。有時，在不同的作業系統/瀏覽器上測試應用程式時，開發人員會發現錯誤。例如，特定元素可能被隱藏或以不連貫的方式放置，這會導致使用者覺得應用程式是無法響應的。
輔助功能 (a11y)
可訪問性也可以稱為a11y，它可用於衡量計算機系統或軟體對所有人（包括殘疾人和殘障人士）的可訪問性。W3C 建立了一些可訪問性標準。
a11y 的目標是讓網路對所有人都可用。你不能僅透過確認程式碼編寫得當來判斷應用程式是否可訪問。你必須在不同的瀏覽器上測試你的應用程式，以檢視它在所有瀏覽器上的可訪問性。
應用功能
你可以在此處測試應用程式的功能或特性。正如我之前所說，有一些特定於瀏覽器的相容性錯誤，除非你對應用程式進行跨瀏覽器測試，否則你不會發現這些錯誤。
跨瀏覽器測試工作流程
不要在沒有遵循適當的流程的情況下開始跨不同瀏覽器測試你的應用程式。在本節中，我們會看看如何高效地進行跨瀏覽器測試。
規劃
這是跨瀏覽器測試工作流程的第一階段。在規劃階段，開發者會確定產品的功能、產品將提供哪些服務以及開發產品所需的時間。在這一點上，所有描述 Web 應用程式設計和功能的要求都應該清楚地說明。
開發
開發階段是跨瀏覽器測試工作流程的第二階段。開發者會將已經討論過的功能整合到 Web 應用程式中。他們會將專案拆分為模組化元件，並在將這些元件合併到應用程式之前一一進行測試。
測試
在測試階段，構成 Web 應用程式的所有模組化元件都應該已經合併，此時，應用程式應該是一個實體。接著就需要對應用程式進行徹底的測試。應用程式將根據規劃階段指定的目標進行測試。你不必在目標列表中涵蓋的所有硬體裝置和軟體環境中對你的應用程式進行物理測試。正確的測試環境為每個用例（或至少大多數用例）提供了模擬器。
作為指南，請在下面這些平臺測試你的應用程式：
- 在目標列表中涵蓋的所有瀏覽器的穩定版本上測試應用程式的功能。
- 在目標列表中涵蓋的所有螢幕尺寸和解析度下進行測試。
- 跨不同作業系統測試 Web 應用程式的功能。
- 對你的應用程式執行 Lo-fi（低保真）可用性測試，以檢視它的響應速度和可訪問性。
修復
在這個階段，你需要修復那些在測試階段檢測到的錯誤。測試和修復是迭代過程，這意味著它們應該重複進行，直到沒有發現錯誤為止。修復錯誤或缺陷後，再次測試應用程式以確保沒有新引入的缺陷。
什麼是預釋出瀏覽器
在跨瀏覽器測試中，相容性測試非常重要。相容性測試允許你在不同瀏覽器上測試應用程式的功能和解析度，以檢查它們的行為是否符合預期。預釋出瀏覽器是尚未向公眾釋出的瀏覽器的新版本。但是，這些瀏覽器對開發人員開放以測試他們的應用程式。
有時，來自 Web 瀏覽器的新功能可能會破壞你的應用程式。其他時候，你可能會遇到特定於瀏覽器的錯誤，而這些錯誤在你在其他地方測試應用程式時不會出現。這就是為什麼建議開發人員在預釋出瀏覽器上測試他們的應用程式的原因。例如，Firefox允許你跨不同的作業系統、螢幕解析度進行測試，並將資料傳送到 Mozilla。因此，如果存在你無法糾正的錯誤，Mozilla 會幫助你解決。其他允許開發人員在預釋出版本上進行測試的瀏覽器包括Edge、Safari、Chrome和Opera。在預釋出瀏覽器上測試你的 Web 應用程式的一些好處是：
- 測試可能會破壞你的應用程式的瀏覽器的新功能。
- 與瀏覽器設計和開發團隊合作，確保你以正確的方式實現功能。
- 當你遇到錯誤時，請向瀏覽器開發人員尋求幫助。
在預釋出瀏覽器中進行測試 vs 測試自動化系統
在我們比較預釋出瀏覽器和測試自動化系統之前，讓我們簡要地瞭解一下測試自動化系統的全部內容。
測試自動化系統是允許你編寫指令碼的系統，這些指令碼將用於自動驗證你的應用程式。這種型別的測試主要用於測試應用程式的功能，與手動測試相比，它是高效的。例如，在 DevOps 中，測試必須與構建應用程式相結合，因為目標是更快、更一致地將產品交付給使用者。
在預釋出瀏覽器中進行測試可能涉及使用測試自動化工具進行的測試自動化。例如，可以在你的應用程式中編寫指令碼，用於測試自動化工具（例如selenium 驅動程式）在瀏覽器上執行時執行測試。測試工程師還可以決定僅在包含不同測試自動化工具的測試環境中測試他們的應用程式。例如，測試工程師可以在selenium box上測試他們的應用程式。
JavaScript 跨瀏覽器測試工具
跨瀏覽器工具提供了一個框架來測試你的應用程式。這些工具可以是手動的，也可以是自動的。JavaScript 主要用於構建 Web 應用程式，因此我們將探索流行的 JavaScript 跨瀏覽器工具以及它們與 Web 開發的關係。
Selenium webDriver
Selenium 驅動程式是一種開源工具，用於進行 Web 應用程式的自動化測試。Selenium 驅動程式支援 Firefox、Chrome、Edge、Internet Explorer、Safari 和 Opera 等瀏覽器。要用 Node Package Manager 安裝 selenium，請在終端中執行以下命令：
npm install selenium-webdriver
接下來，我們需要安裝[chromedriver](https://chromedriver.chromium.org/getting-started)和驅動 chrome/chromium，並修改[PATH](https://www.selenium.dev/documentation/en/webdriver/driver_requirements/#chromiumchrome)環境變數。一旦 chrome 在你的路徑中，你就可以透過執行以下命令在 Chrome 上測試你的應用程式中的功能。
如何在 Chrome 上使用 selenium 呢？我們可以透過一個簡單的示例測試一下導航連結是否顯示“Google 搜尋”作為其標題的一部分：
// Import web driver into your application
const webdriver = require('selenium-webdriver'),
By = webdriver.By,
until = webdriver.until;
// Create instance of webdriver for firefox
const driver = new webdriver.Builder()
.forBrowser('firefox')
.build();
//navigate to google homepage
driver.get('http://www.google.com');
// Enter text "webdriver" in google search
driver.findElement(By.name('q')).sendKeys('webdriver');
//click on TAB key to avoid driver sleep.
driver.sleep(1000).then(function() {
driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
});
//click on google search button
driver.findElement(By.name('btnK')).click();
//perform test to confirm page title
driver.sleep(2000).then(function() {
driver.getTitle().then(function(title) {
if(title === 'webdriver - Google Search') {
console.log('Test passed');
} else {
console.log('Test failed');
}
//shut down driver after test
driver.quit();
});
});
如果標題不匹配，selenium 將丟擲 AssertionError 並立即結束。Selenium 還允許你同時跨不同的 Web 瀏覽器測試 Web 應用程式的功能。例如，我們可以在 Chrome 和 Firefox 上執行相同的測試。
首先，我們將安裝[gekodriver](https://github.com/mozilla/geckodriver)Firefox 驅動程式。然後我們將同時使用 Chrome 和 Firefox 為我們的應用程式編寫測試：
/ Import web driver into your application
const webdriver = require('selenium-webdriver'),
By = webdriver.By,
until = webdriver.until;
// Create instance of webdriver for firefox
let driver_fx = new webdriver.Builder()
.forBrowser('firefox')
.build();
// Create instance of webdriver for chrome
let driver_chr = new webdriver.Builder()
.forBrowser('chrome')
.build();
//create search test for firefox and chrome
searchTest(driver_fx);
searchTest(driver_chr);
//function to implement search
function searchTest(driver) {
//navigate to google homepage
driver.get('http://www.google.com');
// Enter text "webdriver" in google search
driver.findElement(By.name('q')).sendKeys('webdriver');
//click on TAB key to avoid driver sleep.
driver.sleep(1000).then(function() {
driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
});
//click on google search button
driver.findElement(By.name('btnK')).click();
//perform test on both browsers to confirm page title
driver.sleep(2000).then(function() {
driver.getTitle().then(function(title) {
if(title === 'webdriver - Google Search') {
console.log('Test passed');
} else {
console.log('Test failed');
}
driver.quit();
});
});
}
使用 selenium，你需要手動編寫有關目標列表的指令碼。執行測試後，如果測試未透過，selenium 將丟擲斷言錯誤。
LambdaTest
LambdaTest是一個跨瀏覽器的測試工具，完全包含不同的測試環境。在 Lambda 上測試你的 Web 應用程式時，你可以跨不同瀏覽器、預釋出瀏覽器和作業系統擷取網頁的螢幕截圖，以檢查缺陷和響應能力。藉助 LambdaTest，你可以使用 selenium 等工具執行自動化測試。
Lambda 允許你執行基於雲的測試，以便開發人員可以輕鬆協作。它是持續整合和持續交付的好工具，特別是對於嚴重依賴自動化並希望將產品持續交付給使用者的 DevOps 工程師而言。
Sauce Labs
Sauce Labs是一種基於雲的跨瀏覽器測試工具，可提供 LambdaTest 等測試環境。但是，Sauce Labs 主要專注於移動和 Web 應用程式。它還允許開發人員輕鬆地將自動化測試與 Selenium 結合起來。Sauce Labs 為跨多個 Web 瀏覽器的每個會話提供影片錄製，而不是像 Lambda 測試這樣的螢幕截圖。
BrowserStack
BrowserStack是一個基於雲的跨瀏覽器平臺，適用於移動應用程式和 Web 應用程式。此工具允許你將應用程式連線到充當測試環境的伺服器。就像 LambdaTest 和 Sauce Labs 一樣，BrowserStack 允許你使用 Selenium 輕鬆編寫測試自動化指令碼。
一旦你的應用程式釋出，你應該密切觀察使用者的行為，正在使用哪些功能，是否存在工作流程被破壞等。在這個階段，你可以瞭解應該做什麼修復或改進。一個簡單的方法是使用像SessionStack這樣的解決方案，它可以無縫整合到你的 Web 應用程式中，並從瀏覽器收集行為和技術資訊。之後，你可以將使用者旅程的畫素完美會話回放為影片，並準確檢視他們在使用你的產品時發生的情況。