為網站或網頁應用程式撰寫測試

概述

Nightwatch 提供簡單且全面的 API，用於與網頁元素互動，並執行各種操作和斷言。在 Nightwatch v3 中，引入了全新的元素 API，使測試撰寫更加簡單和簡潔。

Nightwatch inspector 使撰寫測試更加容易，因為它提供了在長期內持久的選擇器建議。

如果您幾乎不懂或完全不懂程式碼，您也可以使用我們的 Chrome 錄製器擴充功能 來錄製測試，並使用 Nightwatch 執行它們。

尋找元素

在您可以與元素互動或執行斷言之前，您必須使用選擇器從 DOM 樹中找到元素。Nightwatch 支援各種選擇器，使尋找元素變得輕而易舉。您可以使用 .find() 和 .findAll() 相關的指令來執行此操作

  1. CSS 選擇器 :
    browser.element.find('css selector');
browser.element.findAll('css selector');
  2. xPath 選擇器 :
    browser.element.find(by.xpath(('xpath string'));
browser.element.findAll(by.xpath(('xpath string'));
  3. 依角色 :
    browser.element.findByRole('role');
browser.element.findAllByRole('role');
  4. 依文字 :
    browser.element.findByText('text');
browser.element.findAllByText('text');
  5. 依佔位符文字 :
    browser.element.findByPlaceholderText('placeholder text');
browser.element.findAllByPlaceholderText('placeholder text');
  6. 依標籤文字 :
    browser.element.findByLabelText('label text');
browser.element.findAllByLabelText('label text');
  7. 依替代文字 :
    browser.element.findByAltText('alt text');
browser.element.findAllByAltText('alt text');

除了尋找指令之外，Nightwatch 還提供便利的方法，有助於在更複雜的場景中尋找方法

  1. 從元素陣列中尋找第 nth 個元素 .nth(index)
  2. 尋找元素陣列的 count .count()

尋找巢狀元素

除了這組強大的選擇器之外，Nightwatch 還支援選擇器鏈

browser.element.find('CSS selector').findByText('text').click();
// or
browser.element.findAll('CSS selector').nth(2).findByText('text').click();

有關選擇器的更詳細指南和範例，請參閱此指南。

指令

找到元素後，您可以使用指令與它們互動

互動指令

  1. 點擊 :
    browser.element.find('selector').click();
  2. 雙擊 : 
    browser.element.find('selector').doubleClick();
  3. 右鍵點擊 : 
    browser.element.find('selector').rightClick();
  4. 在輸入框中輸入 : 
    browser.element.find('selector').sendKeys('text');
  5. 設定值 : 
    browser.element.find('selector').setValue();
  6. 清除 : 
    browser.element.find('selector').clear();
除了 .find() 之外，您也可以使用其他尋找相關的方法，例如 .findByText()、.findByRole()，然後再使用指令

取得元素詳細資訊

  1. 取得文字 :
    browser.element.find('selector').getText();
  2. 取得值 :
    browser.element.find('selector').getValue();
  3. 取得標籤名稱 :
    browser.element.find('selector').getTagName();
  4. 取得屬性 :
    browser.element.find('selector').getAttribute();
  5. 取得 CSS 屬性 :
    browser.element.find('selector').getCssProperty();
  6. 取得 ID :
    browser.element.find('selector').getId();
  7. 取得輔助功能名稱 :
    browser.element.find('selector').getAccessibilityName();
  8. 取得 rect :
    browser.element.find('selector').getRect();

更新元素詳細資訊

  1. 設定文字 :
    browser.element.find('selector').setText('text');
  2. 設定屬性 :
    browser.element.find('selector').setAttributes('attribute', 'attribute value');

設定瀏覽器內容

  1. 設定地理位置 : 
    browser.setGeolocation({latitude: , longitude: , accuracy: 100});

有關詳細範例，請參閱此指南。

您也可以使用 Nightwatch 撰寫自訂指令。立即試用

斷言

撰寫自動化測試的主要目的是設定斷言以通過。使用 Nightwatch 進行斷言有 2 種方式

您可以使用內建的斷言

  1. 文字相等 :
    browser.element.find('selector').getText().assert.equals('text');
  2. 文字包含 :
    browser.element.find('selector').getText().assert.contains('text');
  3. 文字符合 :
    browser.element.find('selector').getText().assert.matches('regex');
  4. 值相等 :
    browser.element.find('selector').getValue().assert.equals('text');
  5. 值包含 :
    browser.element.find('selector').getValue().assert.contains('text');
  6. 值符合 :
    browser.element.find('selector').getValue().assert.matches('regex');
  7. URL 相等 :
    browser.assert.urlEquals('text');
  8. URL 包含 :
    browser.assert.urlContains('text');
  9. URL 符合 :
    browser.assert.urlMatches('regex');
  10. 可見 :
    browser.element.find('selector').assert.visible();
如果這些斷言不足，您可以撰寫自己的自訂斷言。了解如何

Chai expects

如果您喜歡 Chai 風格的斷言，您也可以使用 expect() 來執行斷言

  1. 文字相等 :
    expect(element).text.to.equal();
  2. 文字包含 :
    expect(element).text.to.contain();
  3. 文字相等 :
    expect(element).text.to.match();
  4. 值相等 :
    expect(element).value.to.equal();
  5. 值包含 :
    expect(element).value.to.contain();
  6. 值相等 :
    expect(element).value.to.match();
  7. URL 相等 :
    expect(brower.url()).to.equal();
  8. URL 包含 :
    expect(brower.url()).to.contain();
  9. URL 符合 :
    expect(brower.url()).to.match();
  10. 可見 :
    expect(element).to.be.visible();

有關斷言的詳細範例，請參閱此文章

使用 Nightwatch inspector

Nightwatch inspector 是一種點擊式工具，旨在節省您撰寫測試的時間，並幫助您撰寫更持久的測試。它也允許您從開發人員工具本身嘗試 Nightwatch 指令。了解更多。

使用 Chrome 開發人員工具錄製

或者，Nightwatch 提供工具來幫助您開始，方法是在螢幕上錄製您的測試操作，並自動產生 Nightwatch 測試腳本，而無需撰寫任何程式碼。探索使用 Google Chrome 開發人員工具錄製器建立 Nightwatch 測試以了解更多資訊。

既然您了解了為行動應用程式撰寫測試的基本知識，現在是時候更詳細地了解選擇器、指令和斷言

選擇器
指令
斷言