尋找 & 與 DOM 元素互動

概觀

在頁面上尋找元素是端對端測試中最常見且最關鍵的功能之一。Nightwatch 提供了幾種定位元素的方法，以及一個可擴充的斷言框架來對它們執行驗證。

元素是從文件根目錄開始搜尋，使用 CSS 選擇器或 XPath 選擇器。您也可以使用其他定位策略。請查看 Webdriver 文件 以取得更多資訊。

元素在內部使用唯一的網頁元素參考 ID 來識別。與元素互動時，Nightwatch 會在內部管理識別 ID 的這個步驟，並使用其自動重試機制來定位元素，然後才與其互動或執行任何斷言。

元素重試
與元素互動時，Nightwatch 在嘗試尋找任何元素時，會以可設定的持續時間輪詢 DOM。如果找不到元素，則會擲回 NoSuchElementError 錯誤。

範例

在以下範例中，setValue 命令會在內部執行元素查詢，然後呼叫 setValue 命令中設定的元素。

tests/sampleTest.js 
module.exports = {
  'Demo test ecosia.org': function (browser) {
    browser
      .url('https://www.ecosia.org/')
      .setValue('input[type=search]', 'nightwatch')
      .click('button[type=submit]')
      .assert.containsText('.mainline-results', 'Nightwatch.js')
      .end();
  }
};

import {NightwatchTests} from 'nightwatch';


const ecosiaTest: NightwatchTests = {
'Demo test ecosia.org': () => {
  browser
    .url('https://www.ecosia.org/')
    .setValue('input[type=search]', 'nightwatch')
    .click('button[type=submit]')
    .assert.containsText('.mainline-results', 'Nightwatch.js')
    .end();
},


export default ecosiaTest;

相對定位器

當不容易為所需的元素建構定位器，但很容易描述元素在空間上相對於另一個具有容易建構的定位器的元素的位置時，這些定位器會很有用。

如果您想找到位於 username 欄位下方的 password 欄位，您可以使用以下範例

module.exports = {
  'Demo test ecosia.org': function (browser) {
    const passwordElement = locateWith(By.tagName('input')).below(By.css('input[type=email]'));
    

    browser
      .navigateTo('https://archive.org/account/login')
      .setValue(passwordElement, 'password')
      .assert.valueEquals('input[type=password]', 'password');
  }
};

import {NightwatchTests} from 'nightwatch';


const ecosiaTest: NightwatchTests = {
'Demo test ecosia.org': () => {
  const passwordElement = locateWith(By.tagName('input')).below(By.css('input[type=email]'));
  

  browser
    .navigateTo('https://archive.org/account/login')
    .setValue(passwordElement, 'password')
    .assert.valueEquals('input[type=password]', 'password');
},


export default ecosiaTest;

除了範例中的命令之外，您還可以使用以下命令

  • above
  • below
  • toRightOf
  • toLeftOf
  • near
串聯相對定位器

對於某些複雜的版面配置，例如，元素可能存在於起始元素的上方和右側，您可以串聯相對定位器，如以下範例程式碼片段所示

locateWith(By.tagName('button'))
  .below(By.id('email')
  .toRightOf(By.css('#cancel')));

元素屬性

如果需要更大的彈性來定位和與元素互動，也可以將元素指定為物件。物件定義必須至少包含 selector 屬性。除了 selector 屬性之外，您可以使用以下任何屬性

  • selector - 元素選擇器名稱 (例如：'#input-element')
  • locateStrategy - 例如 'css selector'
  • index - 用於在查詢結果傳回多個元素時，鎖定特定元素。通常，只會使用第一個元素 (索引 = 0)，但使用 index 屬性，您可以指定結果中的任何元素。
  • abortOnFailure - 用於在使用 waitForElement* 命令時覆寫此設定
  • timeout - 用於在使用 waitForElement* 命令或斷言時覆寫預設逾時
  • retryInterval - 用於在使用 waitForElement* 命令或斷言時覆寫預設重試間隔
  • suppressNotFoundErrors - 如果找不到元素，某些元素命令 (例如 .click() 或 .getText()) 會擲回 NoSuchElement 錯誤，導致測試失敗。如果此選項設定為 true，則會忽略此錯誤。

在先前的範例中，input[type=search] 元素選擇器會傳回 3 個元素。如果您想使用第二個元素，請參閱以下範例程式碼片段


module.exports = {
  'Demo test ecosia.org': function (browser) {
    browser.setValue({selector: 'input[type=search]', index: 1}, 'nightwatch')
  }
};
import {NightwatchTests} from 'nightwatch';

const ecosiaTest: NightwatchTests = {
'Demo test ecosia.org': () => {
  browser.setValue({selector: 'input[type=search]', index: 1}, 'nightwatch');
},

建議內容