使用 Jest 作為測試執行器

概述

Jest 是一個 javascript 測試框架，用於輕鬆編寫單元測試，而 Nightwatch.js 是一個整合的測試框架，用於在所有主要瀏覽器上執行 Web 應用程式和網站的自動化端對端測試。

因此，為了同時使用 Jest 和 Nightwatch 功能，Nightwatch 引入了一個新的相依性 jest-environment-nightwatch。

API

global.browser

Nightwatch 瀏覽器 API 物件。當 autoStartSession 關閉時不可用。

global.jestNightwatch

Jest 環境使用 Nightwatch 程式化 API 建立 Nightwatch 實例並匯出瀏覽器 API。

可用屬性/方法

  • .element(<locator>) - 使用 Nightwatch .element() API 在頁面中尋找元素；

  • .updateCapabilities({ capabilities }) - 當 autoStartSession 關閉時使用，以便在執行階段更新功能；

  • .launchBrowser() - 當 autoStartSession 關閉時使用，以便啟動 Session 並開啟瀏覽器；

  • .settings - Nightwatch 設定物件；

  • .nightwatch_client - Nightwatch（內部）實例。

範例組態設定

步驟 0：安裝 Nightwatch

按照指南或觀看影片從頭開始安裝 Nightwatch。

步驟 1：安裝 Jest

npm i jest --save-dev

並確保您已在 package.json 檔案中包含以下指令碼，以便執行 Jest 測試。

{
 "scripts": {
   "test": "jest"
 }
}

步驟 2：安裝並設定 jest-environment-nightwatch 套件

為了將 Nightwatch 與 Jest 搭配使用，您需要安裝 jest-environment-nightwatch。安裝 Jest 和其他測試所需的相依性。

npm i jest-environment-nightwatch --save-dev

Nightwatch Jest 環境帶有預設設定。但是，如果需要，您可以調整Jest 組態

jest.config.js 
{
  testEnvironment: 'jest-environment-nightwatch',
  testEnvironmentOptions: {
    // Nightwatch related options
    headless: true,
    browserName: 'chrome',
    baseUrl: '',
    verbose: false,  
    output: true,
    env: null, 
    parallel: false,
    devtools: false,
    debug: false,
    autoStartSession: true,
    persistGlobals: true,
    configFile: './nightwatch.conf.js',
    globals: {}, 
    webdriver: {},
    timeout: null,
    enableGlobalApis: false,
    alwaysAsync: true,
    desiredCapabilities: {},
    async setup(browser) {},
    async teardown(browser) {},
  },
  

  testMatch: [
      "**/tests/*.[jt]s?(x)"
   ],
}

您可以在 testMatch 中設定您的測試資料夾目錄。

Nightwatch 選項

可以透過提供以下任何組態選項來修改 Nightwatch 的預設行為。以下是可用選項及其預設值的清單。

名稱 類型 說明 預設
headless 布林值 在無頭模式下執行 Nightwatch（適用於 Firefox、Chrome、Edge） true
browserName 字串 要使用的瀏覽器名稱；可用選項為：chrome、firefox、edge、safari 無
baseUrl 字串 使用相對網址時，要用於 .navigateTo() 的基本網址。進行元件測試時，需要將其設定為執行 Vite 開發伺服器的網址。 https://127.0.0.1:3000
verbose 布林值 啟用完整的 Nightwatch http 記錄。 false
output 布林值 顯示 Nightwatch 輸出 true
env 字串 要使用的 Nightwatch 測試環境，來自 nightwatch.conf.js。在 Nightwatch 文件中瞭解有關測試環境的更多資訊。 無
parallel 布林值 在平行執行測試時將其設定為 true false
devtools 布林值 僅限 Chrome：自動開啟 Chrome 開發人員工具 false
debug 布林值 僅限元件測試：在呈現元件後暫停測試執行 false
autoStartSession 布林值 自動啟動 Nightwatch Session。如果停用此選項，您需要在測試中呼叫 jestNightwatch.launchBrowser()。 true
persistGlobals 布林值 在執行之間保留相同的全域物件，或讓每個測試都有一個（深層）副本。在 Nightwatch 文件中瞭解有關測試全域變數的更多資訊。 true
configFile 字串 要使用的 Nightwatch 設定檔。預設會自動產生設定檔，但這可讓您變更該設定檔。在 Nightwatch 文件中瞭解有關 Nightwatch 設定的更多資訊。 ./nightwatch.conf.js
globals 物件 Nightwatch 中要使用的全域變數清單。全域變數可在 browser.globals 上使用。在 Nightwatch 文件中瞭解有關 Nightwatch 測試全域變數的更多資訊。 無
webdriver 物件 用於設定 Nightwatch Webdriver 服務的 Webdriver 相關設定清單。在 Nightwatch 文件中瞭解有關 Nightwatch webdriver 設定的更多資訊。Nightwatch 文件中 Nightwatch webdriver 設定。 無
timeout 數字 設定斷言失敗前斷言重試的全域逾時時間。 5000
enableGlobalApis 布林值 Nightwatch 全域 API (element()、expect()) 預設會停用。 false
desiredCapabilities 物件 為目前的 Session 定義自訂 Selenium 功能。在 Nightwatch 文件中瞭解有關所使用特定瀏覽器驅動程式的更多資訊。 無
setup() 函式 在 Nightwatch 啟動後執行的額外設定 Hook。 無
teardown() 函式 使用 Nightwatch api 物件執行的額外拆解 Hook。 無

步驟 3：執行範例測試

請考慮以下範例測試

describe('duckduckgo example', function() {
  it('Search Nightwatch.js and check results', function(browser) {
    browser
      .navigateTo('https://duckduckgo.com')
      .waitForElementVisible('#search_form_input_homepage')
      .sendKeys('#search_form_input_homepage', ['Nightwatch.js'])
      .click('#search_button_homepage')
      .assert.visible('.results--main')
      .assert.textContains('.results--main', 'Nightwatch.js');
  }); 
});

注意：Jest 對於 Hook 有不同的命名慣例，因此您應該確認您的測試遵循本指南。*

步驟 4：檢視 Jest 測試執行器的結果