利用Selenium進行End-to-end自動化測試

有很多不同的軟體測試方法，除了手動測試之外，我們這裡介紹如何進行自動化測試。功能性自動化有兩大類，一種是單元測試，單元測試通常會以同樣的語言進行測試，每個單元都可以有對應的測試程式，可以去執行單元測試去測試剛剛寫好的程式碼。有些公司會要求先寫好單元測試再去寫程式，這樣的做法通常稱之為Test Driven Development (TDD)。另一類的功能性測試是End-to-End (E2E)的測試，是把系統功能當黑箱去測試，不管系統用哪種開發工具開發都可以測試。Selenium是以網頁做為測試的標的，所以，是針對網頁去測試，而不是針對程式碼去測試，所以，可以利用python去寫測試碼測試React的程式。接下來我們先介紹E2E自動化測試。

環境設定

首先，設定好測試環境:

• 可以透過不同語言開發Selenium的測試腳本，我們以javascript為例。
• 我們透過selenium來進行網頁測試，所以，也需要透過npm安裝selenium套件，安裝selenium:

先開一個空的資料夾，在資料夾裡安裝

npm install selenium-webdriver

撰寫測試腳本

我們來寫一個最基本的測試腳本，打開一個網頁，看看網頁的內容是否存在。我們利用Selenium提供的範例來進行最基本的測試，網頁:

點選Submit後，會看到這畫面:

根據Selenium提供的範例我們來試一下 (完整程式):

const {By, Builder, Browser} = require('selenium-webdriver');
const assert = require("assert");

(async function firstTest() {
  let driver;
  
  try {
    driver = await new Builder().forBrowser(Browser.CHROME).build();
    await driver.get('<https://www.selenium.dev/selenium/web/web-form.html>');
  
    let title = await driver.getTitle();
    assert.equal("Web form", title);
  
    await driver.manage().setTimeouts({implicit: 500});
  
    let textBox = await driver.findElement(By.name('my-text'));
    let submitButton = await driver.findElement(By.css('button'));
  
    await textBox.sendKeys('Selenium');
    await submitButton.click();
  
    let message = await driver.findElement(By.id('message'));
    let value = await message.getText();
    assert.equal("Received!", value);
  } catch (e) {
    console.log(e)
  } finally {
    await driver.quit();
  }
}())

接下來，我們執行這個程式。

node first_script.js

我們可以看到Selenium打開網頁，輸入內容後，點選Submit按鈕後，瀏覽器會跳到結果頁面。

如果覺得執行太快，可以加上一個等候3秒的程式: