自動化測試

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

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

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來編寫.