Eric Elliott 曾撰寫過一篇關於 JavaScript 測試的文章：《JavaScript 測試：單元測試、功能測試和集成測試》，文中解釋了不同類型的測試以及何時使用哪種測試。
本文將更深入地探討 JavaScript 功能測試，並使用 Nightwatch.js 庫進行演示。
在開始之前，讓我們回顧一下功能測試是什麼，以及它為什麼重要。簡單來說，功能測試旨在確保應用程序從用戶的角度來看按預期工作。
我們這裡討論的不是單元測試或集成測試之類的技術測試。這裡的目標是確保用戶能夠無縫地執行特定場景，例如登錄平台、購買產品等等。
關鍵要點
nightwatch.json 文件或 nightwatch.conf.js 文件中，它允許創建多個測試環境，例如默認環境、登台環境或生產環境。 Nightwatch.js 簡介
Nightwatch.js 將自己描述為一個基於 Node.js 的端到端測試框架。它依賴於 Selenium，這是一個旨在促進 Web 瀏覽器自動化的項目。
通過用戶友好的語法，Nightwatch.js 可以“編寫腳本”場景，然後由瀏覽器（不一定是非 headless 的）自動執行。
安裝 Nightwatch
Nightwatch 本身是一個 Node.js 模塊，這意味著您需要在您的機器上安裝 Node.js。最簡單的方法是使用版本管理器，例如 nvm。 Nightwatch 在 npm 上分發，因此您可以像安裝其他模塊一樣安裝它——使用 -g 全局安裝，或使用 --save-dev 在當前項目中安裝。
npm install --save-dev nightwatch
Nightwatch 依賴於 Selenium WebDriver API，因此需要一個 Selenium WebDriver 服務器。它運行在 Java 上，這意味著您還必須在您的環境中安裝 Java 開發工具包 (JDK 7 )。您可以從 Oracle 網站下載 JDK。
下載並安裝完成後，您可以使用 java -version 確保 Java 在您的機器上可用。最後一步是從 Selenium 下載頁面下載打包為 jar 的 Selenium 獨立服務器。我建議您將其放在項目中的 bin 文件夾內。
npm install --save-dev nightwatch
好了，我們現在準備好了。讓我們開始吧。
配置 Nightwatch
您可以想像，Nightwatch 有很多配置。幸運的是，我們不必了解所有內容即可開始。配置可以放在項目根目錄下的 nightwatch.json 文件或 nightwatch.conf.js 文件中。我建議使用後者，因為它更靈活，並且允許您添加註釋。
<code>your_project/ | |– bin/ | |– selenium-server-standalone-2.53.1.jar | `– package.json</code>
注意：我個人覺得當配置文件被分割成更小的配置對象時更容易閱讀，而 JSON 文件不允許這樣做。
在本例中，我們告訴 Nightwatch 我們的測試將位於 tests 文件夾中，使用特定的 Selenium 配置和特定的測試設置。讓我們逐段來看：
var SELENIUM_CONFIGURATION = {
start_process: true,
server_path: 'bin/selenium-server-standalone-2.53.0.jar',
host: '127.0.0.1',
port: 4444
};
var FIREFOX_CONFIGURATION = {
browserName: 'firefox',
javascriptEnabled: true,
acceptSslCerts: true
};
var DEFAULT_CONFIGURATION = {
launch_url: 'http://localhost',
selenium_port: 4444,
selenium_host: 'localhost',
desiredCapabilities: FIREFOX_CONFIGURATION
};
var ENVIRONMENTS = {
default: DEFAULT_CONFIGURATION
};
module.exports = {
src_folders: ['tests'],
selenium: SELENIUM_CONFIGURATION,
test_settings: ENVIRONMENTS
};通過此配置對象，我們告訴 Selenium 在 127.0.0.1:4444 上運行，這恰好是 Nightwatch 的默認值。我們還確保它使用我們下載並存儲在 bin 文件夾中的 Selenium 服務器自動啟動。
注意：有關更高級的用法，請務必查看所有 Selenium 選項的列表。
繼續進行實際的測試設置：
var SELENIUM_CONFIGURATION = {
start_process: true,
server_path: 'bin/selenium-server-standalone-2.53.0.jar',
host: '127.0.0.1',
port: 4444
};Nightwatch 的 test_settings 選項期望一個對象，其鍵是每個環境的名稱，映射到另一個配置對象。在本例中，我們還沒有設置自定義環境（尚未），因此我們使用默認環境。稍後，我們可以擁有登台或生產測試環境。
在環境配置中，我們告訴 Nightwatch 打開哪個 URL（例如，登台環境的 URL 將不同），以及應該使用哪個瀏覽器運行測試。
注意：有關更高級的用法，請務必查看所有測試選項的列表。
var DEFAULT_CONFIGURATION = {
launch_url: 'http://localhost',
selenium_port: 4444,
selenium_host: 'localhost',
desiredCapabilities: FIREFOX_CONFIGURATION
};
var ENVIRONMENTS = {
default: DEFAULT_CONFIGURATION
};在本例中，我們將使用 Firefox，啟用 JavaScript，並接受 SSL 證書。我們可以更進一步，指定特定的瀏覽器版本（使用 version）或操作系統（使用 platform）。
注意：有關更高級的用法，請務必查看所有功能選項的列表。
好了，我們現在有了正確的配置。是時候編寫第一個測試了！
編寫 Nightwatch 測試
對於我們的測試，我們將考慮一個位於 /login 的登錄頁面，其中包含一個電子郵件字段、一個密碼字段和一個提交按鈕。提交表單後，用戶應該被重定向到一個顯示“新聞提要”的頁面。
在我們的配置中，我們指定測試位於名為 tests 的文件夾中。讓我們創建這個 tests 文件夾，以及一個名為 login.js 的文件。
npm install --save-dev nightwatch
此文件將導出一個對象，該對象描述了我們的場景。每個鍵（如果有多個）都是測試的名稱，映射到包含要執行的步驟的函數。
<code>your_project/ | |– bin/ | |– selenium-server-standalone-2.53.1.jar | `– package.json</code>
測試函數公開了一個對象，該對象提供了描述場景所需的 API。首先要做的是導航到登錄 URL。然後，填寫字段並按下按鈕。最後，檢查我們是否可以看到“新聞提要”文本。
var SELENIUM_CONFIGURATION = {
start_process: true,
server_path: 'bin/selenium-server-standalone-2.53.0.jar',
host: '127.0.0.1',
port: 4444
};
var FIREFOX_CONFIGURATION = {
browserName: 'firefox',
javascriptEnabled: true,
acceptSslCerts: true
};
var DEFAULT_CONFIGURATION = {
launch_url: 'http://localhost',
selenium_port: 4444,
selenium_host: 'localhost',
desiredCapabilities: FIREFOX_CONFIGURATION
};
var ENVIRONMENTS = {
default: DEFAULT_CONFIGURATION
};
module.exports = {
src_folders: ['tests'],
selenium: SELENIUM_CONFIGURATION,
test_settings: ENVIRONMENTS
};注意：始終使用 .end() 來終止指令列表，以便正確關閉 Selenium 會話。
這很簡單！我們現在可以運行我們的測試以查看它是否有效：
var SELENIUM_CONFIGURATION = {
start_process: true,
server_path: 'bin/selenium-server-standalone-2.53.0.jar',
host: '127.0.0.1',
port: 4444
};這應該給我們類似這樣的結果：
注意：隨著 Firefox 47 的發布，基於擴展的 FirefoxDriver 版本停止工作。這已在 Firefox 47.1 和 Selenium 2.53.1 中修復。要使用不同的瀏覽器運行測試，請查閱項目的 wiki。
我們可以做的最後一件事是，為了避免每次都訪問 Nightwatch 二進製文件，在 package.json 中創建一個小的 npm 腳本作為別名：
var DEFAULT_CONFIGURATION = {
launch_url: 'http://localhost',
selenium_port: 4444,
selenium_host: 'localhost',
desiredCapabilities: FIREFOX_CONFIGURATION
};
var ENVIRONMENTS = {
default: DEFAULT_CONFIGURATION
};改進 Nightwatch 測試
擁有大量的功能測試會導致大量重複的信息，這使得維護（是的，測試套件也需要維護）變得困難。為了防止這種情況，我們可以使用頁面對象。
在端到端測試領域，頁面對象方法是一種流行的模式，它包括將被測頁面（或頁面片段）包裝到對像中。目標是抽像出底層的 HTML 和通用配置以簡化場景。
幸運的是，Nightwatch 有一個簡單的方法來處理頁面對象。我們需要做的第一件事是將 page_objects_path 選項添加到配置中。我覺得 tests/pages 很有意義；不過，您可以指定任何您想要的文件夾。
var FIREFOX_CONFIGURATION = {
browserName: 'firefox',
javascriptEnabled: true,
acceptSslCerts: true
};現在，我們可以在此文件夾中創建一個 login.js 文件。稍後將使用文件名作為鍵來檢索此文件中指定的全部配置，因此我建議為其命名一個有意義的名稱。
在此文件中，我們將指定一個 URL 並使用友好的名稱為一些 HTML 元素設置別名，以使編寫未來的場景更容易。
<code>your_project/ | |– bin/ | |– selenium-server-standlone-2.53.1.jar | |– tests/ | |– login.js | |- nightwatch.conf.js `– package.json</code>
請注意，我們沒有硬編碼 URL。相反，我們使其依賴於環境配置中定義的 launchUrl 選項。通過這種方式，我們的頁面對象與上下文無關，無論環境如何，它都能工作。
現在修改我們的測試以使用頁面對象非常簡單。首先，我們需要通過客戶端從頁面對像中檢索頁面。每個頁面對像都被公開為一個以頁面對象文件名命名的函數（例如 login()）。
然後，我們可以用我們的別名替換我們的 CSS 選擇器，並在前面加上 @ 符號以指示我們指的是自定義名稱。就是這樣。
npm install --save-dev nightwatch
注意我們如何在客戶端本身而不是頁面上終止會話。
使用多個環境
能夠在不同的環境中運行功能測試對於確保本地工作沒有破壞任何用戶路徑，或者登台和生產環境的工作方式相同非常有用。
要在特定環境中運行測試，我們可以在 CLI 中使用 --env 選項。當我們省略該選項時，將使用默認環境（已在我們的配置中）。
讓我們將登台環境添加到我們的配置中。
<code>your_project/ | |– bin/ | |– selenium-server-standalone-2.53.1.jar | `– package.json</code>
現在，當我們運行測試時，launch_url 選項將根據環境而不同。
var SELENIUM_CONFIGURATION = {
start_process: true,
server_path: 'bin/selenium-server-standalone-2.53.0.jar',
host: '127.0.0.1',
port: 4444
};
var FIREFOX_CONFIGURATION = {
browserName: 'firefox',
javascriptEnabled: true,
acceptSslCerts: true
};
var DEFAULT_CONFIGURATION = {
launch_url: 'http://localhost',
selenium_port: 4444,
selenium_host: 'localhost',
desiredCapabilities: FIREFOX_CONFIGURATION
};
var ENVIRONMENTS = {
default: DEFAULT_CONFIGURATION
};
module.exports = {
src_folders: ['tests'],
selenium: SELENIUM_CONFIGURATION,
test_settings: ENVIRONMENTS
};總結
讓我們總結一下所有這些。 Nightwatch.js 是一個用於編寫端到端功能測試的 JavaScript 框架。它依賴於 Selenium WebDriver API，並且能夠自動運行不同的瀏覽器。
編寫測試主要包括定義典型的用戶場景。為此目的，有一個簡單但非常完整的 API。
從這裡開始，我將把它留給您，並鼓勵您開始為您的最大項目編寫功能測試，以確保您永遠不會再次破壞用戶功能！
Nightwatch.js 常見問題解答 (FAQ)
Nightwatch.js 是一個功能強大且易於使用的 Web 應用程序和網站測試解決方案，它使用 Node.js 編寫。它簡化了設置持續集成和編寫自動化測試的過程。 Nightwatch.js 也可以用於編寫 Node.js 單元測試。它提供了一種簡潔的語法，允許您快速編寫測試，並且它具有內置的命令行測試運行器，使您可以按順序或併行運行測試，分組或獨立運行。
Nightwatch.js 由於其簡單易用而脫穎而出。它具有簡潔明了的語法，使編寫測試變得不那麼複雜。與其他測試框架不同，Nightwatch.js 自帶測試運行器，無需其他工具。它還支持 CSS 和 XPath 選擇器，使其在處理網頁上的不同類型的元素時更加通用。
是的，Nightwatch.js 是進行端到端測試的絕佳工具。它允許您編寫模擬用戶與 Web 應用程序交互的測試，確保所有組件都能按預期協同工作。使用 Nightwatch.js，您可以模擬各種場景，例如表單提交、頁面導航，甚至複雜的流程。
Nightwatch.js 使用簡單的回調機制處理異步測試。 Nightwatch.js 中的每個測試命令都是按照定義的順序異步運行的。測試運行器會在繼續執行下一個命令之前等待每個命令完成。這確保了所有命令都按正確的順序執行，即使它們是異步的。
是的，Nightwatch.js 可以與其他測試庫一起使用。它旨在與 Mocha、Jasmine 和 QUnit 等其他庫無縫協作。這使您可以利用多個測試庫的優勢來為您的 Web 應用程序創建全面的測試套件。
設置 Nightwatch.js 包括幾個步驟。首先，您需要在您的機器上安裝 Node.js 和 npm。然後，您可以使用 npm 安裝 Nightwatch.js。安裝完成後，您需要為 Nightwatch.js 創建一個配置文件，在其中指定您的測試設置和選項。之後，您可以開始編寫測試。
是的，Nightwatch.js 支持跨瀏覽器測試。它與 Selenium WebDriver（用於自動化瀏覽器的工具）無縫集成。這意味著您可以使用 Nightwatch.js 編寫可以在多個瀏覽器上運行的測試，確保您的 Web 應用程序在不同的平台上都能正常工作。
Nightwatch.js 提供了幾種調試測試的選項。您可以使用 Node.js 中的內置調試器，也可以使用 Chrome DevTools 等外部工具。 Nightwatch.js 還提供詳細的錯誤消息和堆棧跟踪，以便在測試失敗時更容易識別和修復問題。
雖然 Nightwatch.js 主要用於 Web 測試，但它也可以通過與 Appium（一個流行的移動測試框架）集成來用於移動測試。這允許您使用與 Web 測試相同的語法和工具來編寫移動應用程序的測試。
Nightwatch.js 原生支持並行測試執行。您可以在配置文件中指定要並行運行的測試。當您運行測試時，Nightwatch.js 將自動將測試分配到多個工作程序，從而加快整體測試執行時間。
The output maintains the original image formatting and placement. The text has been paraphrased and reorganized for improved flow and readability while preserving the original meaning.
以上是JavaScript功能測試與Nightwatch.js的詳細內容。更多資訊請關注PHP中文網其他相關文章！
