行動版網頁測試 | 開發者指南 | Nightwatch.js 測試框架

概觀

Appium 是一個開放原始碼工具，用於自動化 iOS 行動裝置、Android 行動裝置和 Windows 桌面平台上的原生應用程式、行動版網頁和混合應用程式。本指南主要著重於在行動裝置上執行 Nightwatch 測試。

運作原理

Appium 是一個以 Node JS 為基礎的伺服器，它公開符合 Web 驅動程式協定的 REST API，該協定會包裝來自供應商 (UIAutomator2/Espresso、Apple XCUITest/UIAutomation) 的自動化程式庫。

在端對端情境中，Nightwatch 會向 Appium 伺服器發出請求，伺服器會使用不同的平台驅動程式與原生框架通訊以執行命令，最後將 HTTP 回應傳回 Nightwatch。

appium-nightwatch

安裝 Appium

第一步是下載並設定 Appium。

組態

我們可以在 Nightwatch 中新增組態，以在本機針對 Appium 伺服器執行的行動裝置上執行測試

nightwatch.conf.js

appium_ios: {
  selenium: {
    host: 'localhost',
    port: 4723
  },
  disable_error_log: true,
  webdriver: {
    timeout_options: {
      timeout: 150000,
      retry_attempts: 3
    },
    keep_alive: false,
    start_process: false
  },
  desiredCapabilities: {
    browserName: 'Safari', //not required incase using app
    javascriptEnabled: true,
    platformName: 'iOS', //android or iOS
    platformVersion: '15.0',
    deviceName: 'iPhone 13'
    // "app": APP_PATH + "ios/PieDrive.app", // path for the ios app you want to test
  }
}

您可以在Appium 文件中找到關於功能和的更多詳細資訊

編寫基本測試

這是一個示範測試，在Rijks 博物館網站上搜尋字詞「Night Watch」。

tests/sampleTest.js

describe('Nightwatch Website tests', function() {
    

    it('Searching the Rijksmuseum ', async function(){
    browser.navigateTo('https://www.rijksmuseum.nl/en');
    const cookieDialogVisible = await browser.isVisible({
      selector: '.cookie-consent-bar-wrap',
      suppressNotFoundErrors: true
    });
    

    if (cookieDialogVisible) {
      browser.click('.cookie-consent-bar-wrap button.link');
    }
    browser.pause(1000).click('a[aria-label="Search"]');
    

    return browser.setValue('input.search-bar-input[type=text]', ['night watch'])
      .click('button.button.search-bar-button')
      .pause(1000)
      .assert.containsText('.search-results', 'The Night Watch, Rembrandt van Rijn, 1642');
  });
});

若要執行測試，請使用命令 appium 在本機執行 Appium 伺服器，並針對 appium_ios 環境執行測試。

使用手勢

與行動裝置互動時廣泛使用手勢。在行動裝置上產生手勢有兩種方法。

1) 使用 Appium 的非標準 API

這些 API 是特定於平台的。您可以在Appium 文件上參考更多關於這方面的資訊。若要在 iOS 裝置上產生滑動手勢，命令會如下所示

browser.execute('mobile: swipe', args);

2) 使用 Actions API

Actions API 非常通用且獨立於平台。它依賴輸入來源（按鍵、指標、滾輪）的概念。下列程式碼使用 Actions API 產生滑動和雙指縮放手勢

tests/sampleTest.js

describe('W3C Actions API', function() {
  it('swipe down and zoom in the page - w3c actions api ', async function(){
    //Scroll down the page
    await  browser.perform(function(){
      const actions = this.actions();
      

      return actions.move({x: 100, y: 100}).press().move({origin: 'pointer', y: -300, duration: 50}).release();
    });
    

    await browser.pause(2000);
    

    //Pinch zoom
    await browser.perform(function(){
      const actions= this.actions();
      const pointer1 = new Device('finger-1', 'touch');
      const pointer2 = new Device('finger-2', 'touch');
      actions.insert(pointer1, pointer1.move({duration: 0, x: 100, y: 70}), pointer1.press(), {type: 'pause', duration: 500}, pointer1.move({duration: 1000, origin: 'pointer', x: 0, y: -20}), pointer1.release());
      actions.insert(pointer2, pointer2.move({duration: 0, x: 100, y: 100}), pointer2.press(), {type: 'pause', duration: 500}, pointer2.move({duration: 1000, origin: 'pointer', x: 0, y: 20}), pointer2.release());
      

      return actions; 
    });
  });
});