自動化測驗

在軟體開發程序中, 測驗是功能驗收的必要程序, 這個程序往往有測驗人員參與, 提前撰寫測驗用例, 然后再手動對測驗用例進行測驗, 測驗用例都通過之后則可以認為該功能通過驗收. 但是軟體中多個功能之間往往存在關聯或依賴關系, 某一個功能的新增或修改可能或影響到其它的功能, 這時就需要測驗人員對個軟體的相關或所有功能進行回歸測驗, 以便確認系統運行正常, 但是給測驗人員增加了很大的作業量.

自動化測驗是把以人為驅動的測驗行為轉化為機器執行的一種程序, 可以解決傳統手工測驗中回歸測驗作業量大的問題.

Selenium

Web應用自動化即是對Web應用的自動化測驗, 而Selenium是一個用于Web應用的自動化測驗框架, 包含一系列工具和類別庫來支持Web應用在瀏覽器上運行的自動化, 用Selenium官網上的說法:"Selenium automates browsers. That's it!". 簡潔明了.

Selenium包含以下幾個主要組件:

• Library: 用于支持不同語言的類別庫, 包含各種language bindings, 如Java, Python, JavaScript等等.
• Driver: 用于瀏覽器的直接操作, 類似于真實用戶; 不同的瀏覽器有不同的驅動.
• WebDriver: Library和Driver的統稱, 包含了language bindings和對瀏覽器操作的封裝實作.
• Selenium IDE: 用于錄制測驗腳本, 用于輔助用戶快速創建測驗.

各組件之間關系如下圖:

Understanding the components

作業原理

Selenium的作業原理如下圖:

How does selenium interact with the Web browser

具體流程如下:

• 開發者根據Selenium提供的不同的language bindings選擇一種, 撰寫代碼
• Selenium將開發者撰寫的代碼轉成統一的操作指令
• Selenium按照JSON格式將操作指令進行封裝, 并通過HTTP協議將請求發送到Browser Driver
• Browser Driver決議指令后驅動瀏覽器進行相應的操作

安裝

如上所提到的原理, 要讓Selenium作業需要安裝兩個組件:

• Library: 由于我們使用的是JavaScript, 所以我們只需要安裝相應的組件即可
• Driver: 我們就拿Chrome為例 Selenium Installation

1. 安裝Library

npm install selenium-webdriver

需要提前安裝Node.js和npm.

2. 安裝Driver

選擇目標瀏覽器和具體的版本號進行下載, 并按照不同平臺的配置步驟進行配置:

Quick reference

基本使用

瀏覽器導航操作

const { Builder } = require('selenium-webdriver');

(async function myFunction() {
  let driver = await new Builder().forBrowser('chrome').build();

  // 導航到某個網站
  await driver.get('https://baidu.com');
  // 回傳
  await driver.navigate().back();
  // 往前
  await driver.navigate().forward();
  // 重繪
  await driver.navigate().refresh();

  await driver.quit();
})();

元素定位

const { Builder } = require('selenium-webdriver');

(async function myFunction() {
  let driver = await new Builder().forBrowser('chrome').build();

  // by id
  const cheese = driver.findElement(By.id('cheese'));
  // by css
  const cheddar = driver.findElement(By.css('#cheese #cheddar'));
  // by xpath
  const cheddar = driver.findElement(By.xpath('//title[@lang='eng']'));
  
  await driver.quit();
})();

具體支持的定位方式還有很多種, 如下表:

Locating elements

XPath 語法

元素操作

const { Builder } = require('selenium-webdriver');

(async function myFunction() {
  let driver = await new Builder().forBrowser('chrome').build();

  // 輸入文字
  await driver.findElement(By.name('name')).sendKeys(name);
  // 點擊
  await driver.findElement(By.css("input[type='submit']")).click();
  // 拖動元素到目標位置
  const actions = driver.actions({ bridge: true });
  const source = driver.findElement(By.id('source'));
  const target = driver.findElement(By.id('target'));
  await actions.dragAndDrop(source, target).perform();

  await driver.quit();
})();

Performing actions

其它操作

const { Builder } = require('selenium-webdriver');

(async function myFunction() {
  let driver = await new Builder().forBrowser('chrome').build();

  // 回傳當前URL
  await driver.getCurrentUrl();
  // 截圖(回傳base64編碼的字串)
  let encodedString = driver.takeScreenshot();

  await driver.quit();
})();

實體

下面我們使用百度來進行簡單的演示, 具體流程如下:

1. 使用瀏覽器打開百度首頁
2. 搜索"selenium"
3. 在結果串列中選擇百度百科
4. 打開百度百科

效果如下:

代碼如下:

const { Builder, By, until } = require('selenium-webdriver');

(async function myFunction() {
  // 創建一個driver實體
  let driver = await new Builder().forBrowser('chrome').build();
  try {
    // 1. 跳轉到百度
    await driver.get('https://baidu.com');

    // 2. 搜索
    let searchText = 'selenium';
    // 定位到搜索框, 并輸入關鍵字
    await driver.findElement(By.id('kw')).sendKeys(searchText);
    await new Promise(res => setTimeout(res, 1000));
    // 定位到搜索按鈕, 并點擊
    await driver.findElement(By.id('su')).click();

    // 3. 從結果串列中選擇百度百科
    let containers = await driver.wait(until.elementsLocated(By.className('c-container')), 2000);
    let targetElement = null;
    for (let container of containers) {
      let element = await container.findElement(By.css('h3>a'));
      let title = await element.getText();
      if (title.indexOf('百度百科') > -1) {
        targetElement = element;
        break;
      }
    }
    if (targetElement) {
      // 4. 打開百度百科
      await targetElement.click();
      // 切換window handle
      let windows = await driver.getAllWindowHandles();
      await driver.switchTo().window(windows[1]);

      await driver.wait(until.elementLocated(By.className('main-content')), 5000);
      await new Promise(res => setTimeout(res, 2000));
    }
  } catch (error) {
    console.error(error);
  } finally {
    // 關閉瀏覽器
    await driver.quit();
  }
})();

當然上例演示的只是Selenium強大功能的冰山一角, 僅為展示基本的運行情況.

總結

本文介紹了自動化測驗以及Web應用自動化測驗的一種方案: JavaScript+Selenium, 并用實體來展示了Selenium的部分功能. Selenium可以做的還有很多, 以后慢慢再探索.

需要注意的是,在實際專案中采用該方案時, 應配合mocha來撰寫，