自動化測試簡介

每天在多個瀏覽器和裝置上手動執行測試多次,可能會變得繁瑣且耗時。為了高效地處理這個問題,您應該熟悉自動化工具。在本文中,我們將探討可用的工具,如何使用任務執行器,以及如何使用商業瀏覽器測試自動化應用程式(如 Sauce Labs、BrowserStack 和 TestingBot)的基礎知識。

預備知識 熟悉核心 HTMLCSSJavaScript 語言;對跨瀏覽器測試的高階原則有所瞭解。
目標 旨在提供對自動化測試的理解,瞭解它如何讓您的工作更輕鬆,以及如何利用一些能簡化工作的商業產品。

自動化讓事情變得簡單

在本模組中,我們詳細介紹了測試您的網站和應用程式的多種不同方法,並解釋了您的跨瀏覽器測試工作在要測試的瀏覽器、可訪問性考慮等方面應具備的範圍。聽起來工作量很大,不是嗎?

我們同意——手動測試我們在前幾篇文章中討論過的所有內容確實很痛苦。幸運的是,有一些工具可以幫助我們自動化這些痛苦。在本模組中,我們可以透過兩種主要方式自動化我們一直在討論的測試:

  1. 使用任務執行器,例如 GruntGulp,或者 npm 指令碼,在構建過程中執行測試和清理程式碼。這是一種很好的方式來執行諸如程式碼 Linting 和壓縮、新增 CSS 字首或轉譯新興 JavaScript 功能以實現最大的跨瀏覽器覆蓋等任務。
  2. 使用像 Selenium 這樣的瀏覽器自動化系統,在已安裝的瀏覽器上執行特定測試並返回結果,在瀏覽器出現故障時提醒您。像 Sauce LabsBrowserStack 這樣的商業跨瀏覽器測試應用程式都基於 Selenium,但允許您使用介面遠端訪問它們的設定,省去了您自己設定測試系統的麻煩。

我們將在下一篇文章中介紹如何設定自己的基於 Selenium 的測試系統。在本文中,我們將介紹如何設定任務執行器,並使用上述商業系統的基本功能。

注意:以上兩類並非互斥。可以設定任務執行器,透過 API 訪問 Sauce Labs 或 LambdaTest 等服務,執行跨瀏覽器測試並返回結果。我們將在下面也討論這一點。

使用任務執行器自動化測試工具

如上所述,您可以使用任務執行器在構建過程中的特定時刻自動執行所有需要執行的任務,從而大大加快常見的任務,例如程式碼 Linting 和壓縮。例如,這可以是每次儲存檔案時,或在其他某個時刻。在本節中,我們將介紹如何使用 Node 和 Gulp(一種對初學者友好的選項)自動化任務執行。

設定 Node 和 npm

如今,大多數工具都基於 Node.js,因此您需要安裝它及其配套的包管理器 npm

  1. 安裝和更新 Node.js 和 npm 最簡單的方法是透過 Node 版本管理器:請按照 安裝 Node 中的說明進行操作。
  2. 在繼續之前,請務必測試您的安裝是否成功
  3. 如果您之前安裝過 Node.js/npm,則應將其更新到最新版本。這可以透過使用節點版本管理器安裝最新的 LTS 版本來完成(再次參考上面連結的說明)。

要開始在專案中使用基於 Node/npm 的包,您需要將專案目錄設定為 npm 專案。這很容易做到。

例如,讓我們首先建立一個測試目錄,以便我們可以在不擔心破壞任何東西的情況下進行操作。

  1. 使用檔案管理器 UI 在某個合適的位置建立新目錄,或者在命令列上,導航到所需位置並執行以下命令

    bash
    mkdir node-test
    
  2. 要使此目錄成為 npm 專案,您只需進入您的測試目錄並使用以下命令對其進行初始化:

    bash
    cd node-test
    npm init
    
  3. 第二個命令會問您很多問題,以獲取設定專案所需的資訊;您現在可以只選擇預設值。

  4. 所有問題回答完畢後,它會詢問您輸入的資訊是否正確。輸入 yes 並按 Enter/Return,npm 將在您的目錄中生成一個 package.json 檔案。

此檔案基本上是專案的配置檔案。您可以稍後自定義它,但現在它看起來像這樣

json
{
  "name": "node-test",
  "version": "1.0.0",
  "description": "Test for npm projects",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "author": "Chris Mills",
  "license": "MIT"
}

有了這個,您就可以繼續了。

設定 Gulp 自動化

讓我們來看看如何設定 Gulp 並使用它來自動化一些測試工具。

  1. 首先,使用上一節底部詳述的程式建立一個測試 npm 專案。另外,使用行:"type": "module" 更新 package.json 檔案,使其看起來像這樣

    json
    {
      "name": "node-test",
      "version": "1.0.0",
      "description": "Test for npm projects",
      "main": "index.js",
      "scripts": {
        "test": "test"
      },
      "author": "Chris Mills",
      "license": "MIT",
      "type": "module"
    }
    
  2. 接下來,您需要一些示例 HTML、CSS 和 JavaScript 內容來測試您的系統 — 在您的專案資料夾中名為 src 的子資料夾中複製我們的示例 index.htmlmain.jsstyle.css 檔案。如果您願意,可以嘗試自己的測試內容,但請記住,此類工具不適用於 HTML 檔案中內聯的 JS/CSS — 您需要單獨的檔案。

  3. 使用以下命令全域性安裝 gulp(這意味著它將適用於所有專案)

    bash
    npm install --global gulp-cli
    
  4. 接下來,在您的 npm 專案目錄根目錄中執行以下命令,將 gulp 設定為專案的依賴項

    bash
    npm install --save-dev gulp
    
  5. 現在在您的專案目錄中建立一個名為 gulpfile.mjs 的新檔案。這個檔案將執行我們所有的任務。在這個檔案中,放入以下內容

    js
    import gulp from "gulp";
    
    export default function (cb) {
      console.log("Gulp running");
      cb();
    }
    

    這需要我們之前安裝的 gulp 模組,然後匯出一個預設任務,除了向終端列印一條訊息外,什麼也不做——這對於讓我們知道 Gulp 正在工作很有用。在接下來的幾節中,我們將把這個 export default 語句更改為更有用的內容。

    每個 Gulp 任務都以相同的基本格式匯出 — exports function taskName(cb) {...}。每個函式都帶有一個引數 — 一個在任務完成時執行的回撥。

  6. 您可以使用以下命令執行 gulp 的預設任務 — 現在試試看

    bash
    gulp
    

向 Gulp 新增一些實際任務

現在我們準備向 Gulp 檔案新增更多工。每次新增可能都需要您按以下方式修改 gulpfile.mjs 檔案

  • 當我們要求您新增一些 import 語句時,請將它們新增到現有 import 語句下方。
  • 當我們要求您新增新的 export function ... 語句時,請將其新增到檔案的末尾。
  • 當我們要求您更改預設匯出時,請按照我們指定的方式更改 export default 語句。

所以你的 gulpfile.mjs 檔案會這樣增長

js
import gulp from "gulp";
// Add any new imports here

// Our latest default export
// export default ...

// Add any new task exports here
// export function ...
// export function ...

為了向 Gulp 新增一些實際任務,我們需要考慮我們想要做什麼。以下是專案要執行的一組合理的基本功能:

  • html-tidy, css-lint 和 js-hint 用於 Linting 並報告/修復常見的 HTML/CSS/JS 錯誤(參見 gulp-htmltidy, gulp-csslint, gulp-jshint)。
  • Autoprefixer 用於掃描我們的 CSS 並僅在需要時新增供應商字首(參見 gulp-autoprefixer)。
  • babel 用於將任何新的 JavaScript 語法功能轉譯為可在舊瀏覽器中執行的傳統語法(參見 gulp-babel)。

有關我們正在使用的不同 gulp 包的完整說明,請參閱上面的連結。

要使用每個外掛,您需要先透過 npm 安裝它,然後在 gulpfile.mjs 檔案頂部匯入所有依賴項,然後將您的測試新增到檔案底部,最後匯出任務名稱以透過 gulp 的命令使用。

html-tidy

  1. 使用以下命令安裝

    bash
    npm install --save-dev gulp-htmltidy
    

    注意:--save-dev 將包作為依賴項新增到您的專案中。如果您檢視專案的 package.json 檔案,您將在 devDependencies 屬性中看到它的條目。

  2. 將以下依賴項新增到 gulpfile.mjs

    js
    import htmltidy from "gulp-htmltidy";
    
  3. 將以下測試新增到 gulpfile.mjs 的底部

    js
    export function html() {
      return gulp
        .src("src/index.html")
        .pipe(htmltidy())
        .pipe(gulp.dest("build"));
    }
    
  4. 將預設匯出更改為

    js
    export default html;
    

這裡我們使用 gulp.src() 獲取我們的開發 index.html 檔案,這允許我們獲取原始檔來做一些事情。

接下來,我們使用 pipe() 函式將該源傳遞給另一個命令以進行其他操作。我們可以根據需要將任意多個這些操作連結在一起。我們首先對原始檔執行 htmltidy(),它會遍歷並修復檔案中的錯誤。第二個 pipe() 函式將輸出的 HTML 檔案寫入 build 目錄。

在檔案的輸入版本中,您可能已經注意到我們放了一個空的 <p> 元素;htmltidy 在輸出檔案建立時已經將其刪除。

自動字首和 CSS Lint

  1. 使用以下行安裝

    bash
    npm install --save-dev gulp-autoprefixer
    npm install --save-dev gulp-csslint
    
  2. 將以下依賴項新增到 gulpfile.mjs

    js
    import autoprefixer from "gulp-autoprefixer";
    import csslint from "gulp-csslint";
    
  3. 將以下測試新增到 gulpfile.mjs 的底部

    js
    export function css() {
      return gulp
        .src("src/style.css")
        .pipe(csslint())
        .pipe(csslint.formatter("compact"))
        .pipe(
          autoprefixer({
            cascade: false,
          }),
        )
        .pipe(gulp.dest("build"));
    }
    
  4. 將以下屬性新增到 package.json

    json
    {
      "browserslist": ["last 5 versions"]
    }
    
  5. 將預設任務更改為

    js
    export default gulp.series(html, css);
    

在這裡,我們抓取 style.css 檔案,對其執行 csslint(它將 CSS 中的任何錯誤列表輸出到終端),然後透過 autoprefixer 執行它,以新增任何必要的字首,使新興的 CSS 功能在舊瀏覽器中執行。在管道鏈的末尾,我們將修改後的字首 CSS 輸出到 build 目錄。請注意,這僅在 csslint 沒有發現任何錯誤時才有效——嘗試從 CSS 檔案中刪除一個花括號並重新執行 gulp,看看您會得到什麼輸出!

js-hint 和 babel

  1. 使用以下行安裝

    bash
    npm install --save-dev gulp-babel @babel/preset-env
    npm install --save-dev @babel/core
    npm install jshint gulp-jshint --save-dev
    
  2. 將以下依賴項新增到 gulpfile.mjs

    js
    import babel from "gulp-babel";
    import jshint from "gulp-jshint";
    
  3. 將以下測試新增到 gulpfile.mjs 的底部

    js
    export function js() {
      return gulp
        .src("src/main.js")
        .pipe(jshint())
        .pipe(jshint.reporter("default"))
        .pipe(
          babel({
            presets: ["@babel/env"],
          }),
        )
        .pipe(gulp.dest("build"));
    }
    
  4. 將預設任務更改為

    js
    export default gulp.series(html, css, js);
    

在這裡,我們抓取 main.js 檔案,對其執行 jshint,並使用 jshint.reporter 將結果輸出到終端;然後我們將檔案傳遞給 babel,它將其轉換為舊式語法,並將結果輸出到 build 目錄。我們的原始程式碼包含一個 胖箭頭函式,babel 已將其修改為舊式函式。

更多想法

設定好這一切之後,您可以在專案目錄中執行 gulp 命令,您應該會得到如下輸出

Output in a code editor where lines show the time tasks start or finish, the task name, and the duration of 'Finished' tasks.

然後,您可以透過檢視 build 目錄中的檔案,並在網路瀏覽器中載入 build/index.html 來試用自動化任務輸出的檔案。

如果出現錯誤,請檢查您是否已按上述方式添加了所有依賴項和測試;還可以嘗試註釋掉 HTML/CSS/JavaScript 程式碼段,然後重新執行 gulp,看看是否可以找出問題所在。

Gulp 附帶一個 watch() 函式,您可以使用它來監視檔案並在每次儲存檔案時執行測試。例如,嘗試將以下內容新增到 gulpfile.mjs 的底部

js
export function watch() {
  gulp.watch("src/*.html", html);
  gulp.watch("src/*.css", css);
  gulp.watch("src/*.js", js);
}

現在嘗試在終端中輸入 gulp watch 命令。Gulp 將現在監視您的目錄,並在您儲存對 HTML、CSS 或 JavaScript 檔案所做的更改時執行相應的任務。

注意: * 字元是萬用字元——這裡我們說的是“當這些型別中的任何檔案被儲存時執行這些任務”。您也可以在主要任務中使用萬用字元,例如 gulp.src('src/*.css') 將獲取所有 CSS 檔案,然後對它們執行管道任務。

Gulp 還有很多功能。 Gulp 外掛目錄 中有數千個外掛可供搜尋。

其他任務執行器

還有許多其他任務執行器可用。我們當然不是說 Gulp 是最好的解決方案,但它對我們來說很有效,而且對於初學者來說也很容易上手。您也可以嘗試使用其他解決方案:

  • Grunt 的工作方式與 Gulp 非常相似,不同之處在於它依賴於配置檔案中指定的任務,而不是使用編寫的 JavaScript。有關更多詳細資訊,請參閱 Grunt 入門
  • 您還可以直接使用 package.json 檔案中的 npm 指令碼執行任務,而無需安裝任何額外的任務執行器系統。這是基於 Gulp 外掛之類的東西基本上是命令列工具的包裝器的前提。因此,如果您能弄清楚如何使用命令列執行這些工具,那麼您就可以使用 npm 指令碼執行它們。它使用起來有點棘手,但對於那些擅長命令列技能的人來說可能會有回報。為什麼選擇 npm 指令碼? 提供了一個很好的介紹和大量進一步的資訊。

使用商業測試服務加速瀏覽器測試

現在讓我們來看看商業第三方瀏覽器測試服務以及它們能為我們做什麼。

當您使用這類服務時,您需要提供要測試頁面的 URL 以及其他資訊,例如您希望在哪些瀏覽器中進行測試。然後,應用程式會配置一個帶有您指定作業系統和瀏覽器的新虛擬機器,並以螢幕截圖、影片、日誌檔案、文字等形式返回測試結果。這非常有用,並且比您自己設定所有作業系統/瀏覽器組合方便得多。

然後,您可以更進一步,使用 API 以程式設計方式訪問功能,這意味著這些應用程式可以與任務執行器(例如您自己的本地 Selenium 環境和其他)結合使用,以建立自動化測試。

注意:還有其他可用的商業瀏覽器測試系統,但在本文中,我們將重點關注 BrowserStack、Sauce Labs 和 TestingBot。我們並不是說這些一定是最好的工具,但它們是很好的工具,初學者可以輕鬆上手。

瀏覽器堆疊

BrowserStack 入門

開始

  1. 建立 BrowserStack 試用賬戶
  2. 登入。驗證您的電子郵件地址後,這應該會自動發生。
  3. 單擊頂部導航選單中的即時連結,進入即時手動測試。

基礎知識:手動測試

BrowserStack Live 儀表板允許您選擇要測試的平臺、裝置和瀏覽器。對於桌面測試,您可以直接選擇作業系統和瀏覽器。對於移動裝置,您選擇移動作業系統、裝置,然後可以為您的裝置-瀏覽器組合選擇一個瀏覽器。

Test Choices

點選其中一個瀏覽器圖示將載入您選擇的平臺、裝置和瀏覽器——現在選擇一個並試一試。

Test Devices

您可以在位址列中輸入 URL,透過滑鼠拖動上下滾動,並在支援的裝置(如 MacBooks)的觸控板上使用適當的手勢(例如,捏合/縮放,雙指滾動)。

可用功能因載入的瀏覽器而異,可能包括以下控制元件:

  • 顯示當前瀏覽器資訊
  • 切換到其他瀏覽器
  • 測試本地主機 URL
  • 設定縮放級別並切換方向
  • 儲存和載入書籤
  • 捕獲/註釋螢幕截圖並提交錯誤報告
  • 訪問瀏覽器開發工具
  • 更改報告位置
  • 限制網路
  • 訪問螢幕閱讀器

Test Menu

有關更多資訊,請參閱 BrowserStack Live 文件。

高階:BrowserStack API

BrowserStack 還提供 RESTful API,允許您以程式設計方式檢索賬戶計劃、會話、構建等詳細資訊。

讓我們簡要了解一下如何使用 Node.js 訪問 API。

  1. 首先,按照設定 Node 和 npm 中詳述的步驟,設定一個新的 npm 專案來測試它。使用與之前不同的目錄名稱,例如 bstack-test

  2. 在專案根目錄中建立一個新檔案 call_bstack.js,併為其指定以下內容:

    js
    const axios = require("axios");
    
    const bsUser = "BROWSERSTACK_USERNAME";
    const bsKey = "BROWSERSTACK_ACCESS_KEY";
    const baseUrl = `https://${bsUser}:${bsKey}@www.browserstack.com/automate/`;
    
    function getPlanDetails() {
      axios.get(`${baseUrl}plan.json`).then((response) => {
        console.log(response.data);
      });
      /* Response:
        {
          automate_plan: <string>,
          terminal_access: <string>.
          parallel_sessions_running: <int>,
          team_parallel_sessions_max_allowed: <int>,
          parallel_sessions_max_allowed: <int>,
          queued_sessions: <int>,
          queued_sessions_max_allowed: <int>
        }
        */
    }
    
    getPlanDetails();
    
  3. 將 BrowserStack 使用者名稱和訪問金鑰的佔位符替換為您的實際值。這些可以從您的 BrowserStack 賬戶和個人資料詳細資訊的“身份驗證和安全”部分檢索。

  4. 透過在終端中執行以下命令,安裝我們用於處理傳送 HTTP 請求的 axios 模組(我們選擇 axios 是因為它簡單、流行且受良好支援):

    bash
    npm install axios
    
  5. 確保您的 JavaScript 檔案已儲存,並透過在終端中執行以下命令來執行它。您應該會看到一個物件列印到終端,其中包含您的 BrowserStack 計劃詳細資訊。

    bash
    node call_bstack
    

下面我們還提供了一些其他現成的函式,您在處理 BrowserStack RESTful API 時可能會覺得有用。

此函式返回所有以前建立的自動化構建的摘要詳細資訊(有關 BrowserStack 自動化測試詳細資訊,請參見下一篇文章)

js
function getBuilds() {
  axios.get(`${baseUrl}builds.json`).then((response) => {
    console.log(response.data);
  });

  /* Response:
  [
    {
      automation_build: {
        name: <string>,
        hashed_id: <string>,
        duration: <int>,
        status: <string>,
        build_tag: <string>,
        public_url: <string>
      }
    },
    {
      automation_build: {
        name: <string>,
        hashed_id: <string>,
        duration: <int>,
        status: <string>,
        build_tag: <string>,
        public_url: <string>
      }
    },
    // …
  ]
  */
}

此函式返回特定構建的特定會話的詳細資訊

js
function getSessionsInBuild(build) {
  const buildId = build.automation_build.hashed_id;
  axios.get(`${baseUrl}builds/${buildId}/sessions.json`).then((response) => {
    console.log(response.data);
  });
  /* Response:
  [
    {
      automation_session: {
        name: <string>,
        duration: <int>,
        os: <string>,
        os_version: <string>,
        browser_version: <string>,
        browser: <string>,
        device: <string>,
        status: <string>,
        hashed_id: <string>,
        reason: <string>,
        build_name: <string>,
        project_name: <string>,
        logs: <string>,
        browser_url: <string>,
        public_url: <string>,
        appium_logs_url: <string>,
        video_url: <string>,
        browser_console_logs_url: <string>,
        har_logs_url: <string>,
        selenium_logs_url: <string>
      }
    },
    {
      automation_session: {
        // …
      }
    },
    // …
  ]
  */
}

以下函式返回一個特定會話的詳細資訊

js
function getSessionDetails(session) {
  const sessionId = session.automation_session.hashed_id;
  axios.get(`${baseUrl}sessions/${sessionId}.json`).then((response) => {
    console.log(response.data);
  });
  /* Response:
  {
    automation_session: {
      name: <string>,
      duration: <int>,
      os: <string>,
      os_version: <string>,
      browser_version: <string>,
      browser: <string>,
      device: <string>,
      status: <string>,
      hashed_id: <string>,
      reason: <string>,
      build_name: <string>,
      project_name: <string>,
      logs: <string>,
      browser_url: <string>,
      public_url: <string>,
      appium_logs_url: <string>,
      video_url: <string>,
      browser_console_logs_url: <string>,
      har_logs_url: <string>,
      selenium_logs_url: <string>
    }
  }
  */
}

高階:自動化測試

我們將在下一篇文章中介紹執行自動化的 BrowserStack 測試

醬實驗室

Sauce Labs 入門

讓我們從 Sauce Labs 試用開始吧。

  1. 建立 Sauce Labs 試用帳戶。
  2. 登入。驗證您的電子郵件地址後,這應該會自動發生。

基礎知識:手動測試

Sauce Labs 儀表板上有許多可用的選項。登入後,請遵循頁面左上角的“開始入門”指南

  1. 在“執行您的第一個測試”中,單擊桌面瀏覽器
  2. 在下一個螢幕中,輸入您要測試的頁面 URL(例如此頁面),然後使用不同的按鈕和列表選擇要測試的瀏覽器/作業系統組合。您會發現有很多可供選擇! 選擇醬料手動會話
  3. 當您開始測試時,將出現一個載入螢幕,並啟動一個執行您選擇的裝置/瀏覽器組合的環境。然後您可以開始遠端測試在所選瀏覽器中執行的網站。

此時您可以做很多事情,例如共享測試 URL,以便其他人可以遠端觀察測試,將文字/註釋複製到遠端剪貼簿,截圖,在全屏模式下測試等等。

一旦您停止會話,您將返回到即時選項卡,在那裡您會看到您啟動的每個先前手動會話的條目。點選其中一個條目會顯示更多會話資料。在這裡,您可以下載您拍攝的任何螢幕截圖,觀看會話影片,檢視資料日誌等等。這已經非常有用,比您自己設定多個模擬器和虛擬機器方便得多。

有關更多資訊,請參閱 Sauce Labs 文件

高階:Sauce Labs API

Sauce Labs 有一個 RESTful API,允許您以程式設計方式檢索您的賬戶和現有測試的詳細資訊,並用更多細節註釋測試,例如它們的透過/失敗狀態,這無法僅透過手動測試記錄。例如,您可能希望使用 Sauce Labs 遠端執行您自己的 Selenium 測試,以測試特定的瀏覽器/作業系統組合,然後將測試結果傳回 Sauce Labs。

它有幾個可用的客戶端,允許您使用您喜歡的環境(無論是 PHP、Java、Node.js 等)呼叫 API。

讓我們簡要了解一下如何使用 Node.js 和 node-saucelabs 訪問 API。

  1. 首先,按照設定 Node 和 npm 中詳述的步驟,設定一個新的 npm 專案來測試它。使用與之前不同的目錄名稱,例如 sauce-test

  2. 使用以下命令安裝 Node Sauce Labs 封裝器:

    bash
    npm install saucelabs
    
  3. 在您的專案根目錄中建立一個名為 call_sauce.js 的新檔案。給它以下內容:

    js
    const SauceLabs = require("saucelabs").default;
    
    (async () => {
      const myAccount = new SauceLabs({
        username: "your-sauce-username",
        password: "your-sauce-api-key",
      });
    
      // Get full WebDriver URL from the client depending on region:
      console.log(myAccount.webdriverEndpoint);
    
      // Get job details of last run job
      const jobs = await myAccount.listJobs("your-sauce-username", {
        limit: 1,
        full: true,
      });
    
      console.log(jobs);
    })();
    
  4. 您需要將您的 Sauce Labs 使用者名稱和 API 金鑰填入指定位置。這些可以從您的 使用者設定 頁面獲取。現在填寫這些資訊。

  5. 確保所有內容都已儲存,然後按如下方式執行檔案

    bash
    node call_sauce
    

高階:自動化測試

我們將在下一篇文章中介紹實際執行自動化的 Sauce Lab 測試。

測試機器人

TestingBot 入門

讓我們從 TestingBot 試用開始。

  1. 建立一個 TestingBot 試用賬戶
  2. 登入。驗證您的電子郵件地址後,這應該會自動發生。

基礎知識:手動測試

TestingBot 儀表板 列出了您可以選擇的各種選項。目前,請確保您在即時網頁測試選項卡上。

  1. 輸入您要測試的頁面 URL。
  2. 透過在網格中選擇組合來選擇您要測試的瀏覽器/作業系統組合。 測試選項
  3. 當您點選啟動瀏覽器時,將出現一個載入螢幕,啟動一個執行您所選組合的虛擬機器。
  4. 載入完成後,您就可以開始遠端測試在所選瀏覽器中執行的網站了。
  5. 從這裡您可以看到它在您正在測試的瀏覽器中可能呈現的佈局,移動滑鼠並嘗試點選按鈕等。側面選單允許您:
    • 停止會話
    • 更改螢幕解析度
    • 將文字/註釋複製到遠端剪貼簿
    • 擷取、編輯和下載螢幕截圖
    • 在全屏模式下測試。

一旦您停止會話,您將返回到即時網頁測試頁面,在那裡您會看到您啟動的每個先前手動會話的條目。點選其中一個條目會顯示更多會話資料。在這裡,您可以下載您拍攝的任何螢幕截圖,觀看測試影片,並檢視會話日誌。

高階:TestingBot API

TestingBot 有一個 RESTful API,允許您以程式設計方式檢索您的賬戶和現有測試的詳細資訊,並用更多細節註釋測試,例如它們的透過/失敗狀態,這無法僅透過手動測試記錄。

TestingBot 有多個 API 客戶端可供您用來與 API 互動,包括用於 NodeJS、Python、Ruby、Java 和 PHP 的客戶端。

下面是一個示例,展示如何使用 NodeJS 客戶端 testingbot-api 與 TestingBot API 互動。

  1. 首先,按照設定 Node 和 npm 中詳述的步驟,設定一個新的 npm 專案來測試它。使用與之前不同的目錄名稱,例如 tb-test

  2. 使用以下命令安裝 Node TestingBot 封裝器

    bash
    npm install testingbot-api
    
  3. 在您的專案根目錄中建立一個名為 tb.js 的新檔案。為其指定以下內容:

    js
    const TestingBot = require("testingbot-api");
    
    let tb = new TestingBot({
      api_key: "your-tb-key",
      api_secret: "your-tb-secret",
    });
    
    tb.getTests((err, tests) => {
      console.log(tests);
    });
    
  4. 您需要將您的 TestingBot 金鑰和秘密填入指定位置。您可以在 TestingBot 儀表板中找到它們。

  5. 確保所有內容都已儲存,然後執行檔案

    bash
    node tb.js
    

高階:自動化測試

我們將在下一篇文章中介紹實際執行自動化的 TestingBot 測試。

總結

這真是一段旅程,但我相信您已經開始看到使用自動化工具來完成測試中的繁重工作所帶來的好處。

在下一篇文章中,我們將介紹如何使用 Selenium 設定我們自己的本地自動化系統,以及如何將其與 Sauce Labs、BrowserStack 和 TestingBot 等服務結合使用。