撰寫複雜使用者操作

概觀

Nightwatch 2 支援使用 Selenium WebDriver 中較新的 Actions API 來執行複雜的使用者手勢。

Actions API 提供精細的控制，可精確控制指定的輸入裝置可以執行哪些操作。Selenium 提供 3 種輸入來源的介面

  • 鍵盤裝置的按鍵輸入
  • 滑鼠、筆或觸控裝置的指標輸入
  • 滾輪裝置的滾輪輸入 (在 Selenium 4.2 中引入)

更多資訊請參閱 W3C Webdriver 規格頁面。

範例

新的 API 可透過現有的 .perform() 指令在 Nightwatch 中使用。perform() 指令的先前功能仍然存在，並且與之前的方式相同。

tests/sampleTest.js 
describe('user actions api', function() {
  

  it('demo test', function() {
    browser
      .navigateTo('https://nightwatch.dev.org.tw')
      .perform(function() {
        const actions = this.actions({async: true});
        

        return actions
         .keyDown(Keys.SHIFT)
         .keyUp(Keys.SHIFT);
      });
  })
})

可用的操作

.clear()

釋放所有按鍵、指標，並清除內部狀態。

參數

無

.click([element])

用於執行簡單滑鼠左鍵單擊 (按下/放開) 的簡寫。

參數
名稱 類型 描述
element
選用		 WebElement 如果指定，滑鼠將在執行點擊之前先移動到元素的中心。

.contextClick([element])

用於執行簡單滑鼠右鍵單擊 (按下/放開) 的簡寫。

參數
名稱 類型 描述
element
選用		 WebElement 如果指定，滑鼠將在執行點擊之前先移動到元素的中心。

.doubleClick([element])

用於執行滑鼠雙擊左鍵的簡寫。

參數
名稱 類型 描述
element
選用		 WebElement 如果指定，滑鼠將在執行點擊之前先移動到元素的中心。

.dragAndDrop(from, to)

設定包含下列步驟的拖放操作
  1. 移動到 from 元素 (要拖曳的元素) 的中心。
  2. 按下滑鼠左鍵。
  3. 如果 to 目標是 WebElement，則將滑鼠移動到其中心。否則，將滑鼠移動指定的偏移量。
  4. 放開滑鼠左鍵。
參數
名稱 類型 描述
from WebElement 按下滑鼠左鍵以開始拖曳的元素
to WebElement 或
{x: 數字, y: 數字}		 另一個要拖曳到的元素 (將拖曳到元素的中心)，或是指定拖曳偏移量 (以像素為單位) 的物件。

.insert(device, ...actions)

將操作附加到給定 device 的目前序列的末尾。如果已啟用裝置同步，則在插入操作後，將為所有其他裝置插入暫停，以確保所有操作序列的長度相同。

參數
名稱 類型 描述
device 裝置 要更新的裝置
actions ...Action 要插入的操作。

.keyDown(key)

插入按下單個按鍵的操作。

參數
名稱 類型 描述
key 字串 | 數字 要按下的按鍵。此按鍵可以指定為 Key 值、特定的 Unicode 字碼點，或包含單個 Unicode 字碼點的字串。

.keyUp(key)

插入釋放單個按鍵的操作。

參數
名稱 類型 描述
key 字串 | 數字 要釋放的按鍵。此按鍵可以指定為 Key 值、特定的 Unicode 字碼點，或包含單個 Unicode 字碼點的字串。

.keyboard()

參數

無

傳回
類型 描述
Keyboard 鍵盤裝置控制代碼。

.mouse()

參數

無

傳回
類型 描述
指標 滑鼠指標裝置控制代碼。

.move([options])

插入一個操作，將滑鼠移動相對於指定 origin 的 x 和 y 像素。原點可以定義為滑鼠的目前位置、可視區域，或特定 WebElement 的中心。

可以使用 duration 參數 (預設為 100 毫秒) 調整瀏覽器驅動程式執行移動所需的時間長度 (以毫秒為單位)。

參數
名稱 類型 描述
options
選用 		物件 移動選項。預設為在 100 毫秒內將滑鼠移動到可視區域的左上角。

可用的值為
{
  duration: {Number|undefined}, 
  origin: (Origin|WebElement|undefined), 
  x: {Number|undefined}, 
  y: {Number|undefined}
}

.pause(duration, ...devices)

為指定的裝置插入暫停操作，確保每個裝置在一個刻度內處於閒置狀態。暫停的長度 (以毫秒為單位) 可以指定為此方法的第一個參數 (預設為 0)。否則，您只需指定應該暫停的個別裝置。

如果未指定任何裝置，則會為每個裝置建立暫停操作 (使用相同的持續時間)。

參數
名稱 類型 描述
duration
選用 		數字 | 裝置 要插入的暫停長度 (以毫秒為單位)。或者，可以省略持續時間 (產生預設 0 毫秒暫停)，並且可以指定要暫停的第一個裝置。
devices ...裝置 要插入暫停的裝置。如果未指定任何裝置，則會為所有裝置插入暫停。

.press([button])

插入在滑鼠目前位置按下滑鼠按鈕的操作。

參數
名稱 類型 描述
button
選用 		按鈕 要按下的按鈕; 預設為 LEFT。

.release([button])

插入在滑鼠目前位置釋放滑鼠按鈕的操作。

參數
名稱 類型 描述
button
選用 		按鈕 要釋放的按鈕; 預設為 LEFT。

.sendKeys(...keys)

插入一系列操作，以鍵入提供的按鍵序列。對於每個按鍵，這將記錄一對 keyDown 和 keyUp 操作。

參數
名稱 類型 描述
keys ...字串 | 數字 要鍵入的按鍵。

.synchronize(...devices)

確保此操作序列中引用的每個裝置的操作序列長度相同。對於序列過短的裝置，這將插入暫停，以便每個裝置在每個刻度都有明確定義的操作。

參數
名稱 類型 描述
devices ...裝置 要同步的特定裝置。如果未指定，則會同步每個裝置的操作序列。

使用操作刻度

操作序列會分成一系列的「刻度」。在每個刻度，瀏覽器驅動程式將為操作序列中包含的每個裝置執行單一操作。在刻度 0，驅動程式將執行為每個裝置定義的第一個操作，在刻度 1，執行每個裝置的第二個操作，依此類推，直到所有操作都已執行。如果個別裝置在特定刻度沒有定義操作，它會自動暫停。

依預設，操作序列將會同步，因此每個刻度只有一個裝置具有定義的操作。考慮下列程式碼範例

tests/sampleTest.js 
describe('user actions api', function() {
  

  it('demo test', function() {
    browser
      .perform(function() {
        const actions = this.actions({async: true});
        

        return actions
          .keyDown(Keys.SHIFT)
          .move({origin: el})
          .press()
          .release()
          .keyUp(Keys.SHIFT);
      });
    })
})

這會產生下列刻度序列

裝置 刻度 1 刻度 2 刻度 3 刻度 4 刻度 5
Keyboard keyDown(SHIFT) pause() pause() pause() keyUp(SHIFT)
滑鼠 pause() move({origin: el}) press() release() pause()

建議內容