自動化測試簡介

在本模組中，我們詳細介紹了許多測試網站和應用程式的不同方法，並解釋了跨瀏覽器測試工作應包含的範圍，例如要測試的瀏覽器、可訪問性考慮因素等等。聽起來很費勁，是嗎？

我們同意 - 手動測試我們在前面文章中介紹的所有內容可能很痛苦。幸運的是，有一些工具可以幫助我們自動化一些繁瑣的工作。我們可以透過兩種主要方法來自動化我們在本模組中一直在討論的測試。

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

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

正如我們上面所說，您可以透過使用任務執行器在構建過程的某個特定時間點自動執行所有需要執行的程式，從而大幅加快諸如程式碼 linting 和 minifying 等常見任務的速度。例如，這可以是每次儲存檔案時，或在其他某個時間點。在本節中，我們將介紹如何使用 Node 和 Gulp 自動化任務執行，這是一種適合初學者的選擇。

如今，大多數工具都基於 Node.js，因此您需要從 nodejs.org 安裝它。

1. 從上述網站下載適合您系統的安裝程式。（如果您已經安裝了 Node 和 npm，請跳至第 4 步）。
2. 像安裝任何其他程式一樣安裝它。請注意，Node 附帶了 Node Package Manager (npm)，它允許您輕鬆安裝軟體包、與他人共享自己的軟體包以及在專案上執行有用的指令碼。
3. 安裝完成後，在終端中輸入以下命令測試 node 是否已安裝，它將返回已安裝的 Node 和 npm 版本
   bash

   node -v
   npm -v
   

4. 如果您已經安裝了 Node/npm，您應該將其更新到最新版本。要更新 Node，最可靠的方法是從其網站（參見上面的連結）下載並安裝更新的安裝程式包。要更新 npm，請在終端中使用以下命令
   bash

   npm install npm@latest -g
   

要開始在專案上使用基於 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 檔案。

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

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

有了它，您就可以繼續下一步了。

讓我們看看如何設定 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.html、main.js 和 style.css 檔案。如果您願意，可以嘗試使用您自己的測試內容，但請記住，此類工具不適用於內部 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 正在工作很有用。每個 gulp 任務都以相同的基本格式匯出 - exports.taskName = taskFunction。每個函式都接受一個引數 - 當任務完成時要執行的回撥。
6. 您可以使用以下命令執行 gulp 的預設任務 - 現在請嘗試一下
   bash

   gulp
   

要向 Gulp 新增一些真實的任務，我們需要考慮我們想要做什麼。對我們的專案執行的一組合理的基本功能如下

• html-tidy、css-lint 和 js-hint 用於 lint 並報告/修復常見的 HTML/CSS/JS 錯誤（參見 gulp-htmltidy、gulp-csslint、gulp-jshint）。
• Autoprefixer 用於掃描我們的 CSS 並在需要的地方新增供應商字首（參見 gulp-autoprefixer）。
• babel 用於將任何新的 JavaScript 語法功能轉譯為在舊版瀏覽器中有效的傳統語法（參見 gulp-babel）。

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

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

html-tidy

1. 使用以下命令安裝
   bash

   npm install --save-dev gulp-htmltidy
   

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

2. 在 gulpfile.js 中新增以下依賴項
   js

   import htmltidy from "gulp-htmltidy";
   

3. 在 gulpfile.js 的底部新增以下測試
   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 在建立輸出檔案時已刪除了它。

Autoprefixer 和 css-lint

1. 使用以下命令安裝
   bash

   npm install --save-dev gulp-autoprefixer
   npm install --save-dev gulp-csslint
   

2. 在 gulpfile.js 中新增以下依賴項
   js

   import autoprefixer from "gulp-autoprefixer";
   import csslint from "gulp-csslint";
   

3. 在 gulpfile.js 的底部新增以下測試
   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.js 中新增以下依賴項
   js

   import babel from "gulp-babel";
   import jshint from "gulp-jshint";
   

3. 在 gulpfile.js 的底部新增以下測試
   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 命令，您應該會看到類似於這樣的輸出

然後，您可以透過檢視 build 目錄中的檔案並載入 build/index.html 在 Web 瀏覽器中，嘗試執行自動化任務輸出的檔案。

如果您遇到錯誤，請檢查是否已新增所有依賴項和測試，如上所示；還可以嘗試註釋掉 HTML/CSS/JavaScript 程式碼部分，然後重新執行 gulp，看看是否可以隔離問題所在。

Gulp 帶有一個 watch() 函式，您可以使用它來監視您的檔案並在您儲存檔案時執行測試。例如，嘗試將以下內容新增到 gulpfile.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 做更多的事情。 Gulp 外掛目錄 有數千個外掛可供搜尋。

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

• Grunt 的工作方式與 Gulp 非常相似，除了它依賴於配置檔案中指定的任務，而不是使用編寫的 JavaScript。請參閱 Grunt 入門，瞭解更多詳情。
• 你也可以使用位於你的package.json檔案中的 npm 指令碼直接執行任務，而無需安裝任何額外的任務執行器系統。這是基於這樣的前提：像 Gulp 外掛這樣的東西基本上是命令列工具的包裝器。因此，如果你能弄清楚如何使用命令列執行這些工具，你就可以使用 npm 指令碼執行它們。它有點難以使用，但對於那些精通命令列技能的人來說，它可能會帶來回報。為什麼使用 npm 指令碼？ 提供了良好的介紹，並提供了大量進一步的資訊。

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

這些應用程式的基本前提是，執行每個應用程式的公司擁有一個大型伺服器場，可以執行許多不同的測試。當你使用這項服務時，你需要提供要測試的頁面的 URL 以及一些資訊，例如你希望在哪些瀏覽器中進行測試。然後，該應用程式會使用你指定的 OS 和瀏覽器配置一個新的虛擬機器，並將測試結果以螢幕截圖、影片、日誌檔案、文字等形式返回。

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

LambdaTest 入門

1. 讓我們從 LambdaTest 免費註冊 開始。
2. 登入。這應該在您驗證您的電子郵件地址後自動發生。

基礎知識：手動測試

登入 LambdaTest 後，您將被路由到 LambdaTest 儀表板。儀表板將提供與您消耗了多少分鐘、有多少個併發會話正在執行、您迄今為止的測試總數等相關資訊。

1. 要開始手動測試，您需要從左側導航選單中選擇**“即時測試”**選項卡。
2. 單擊**即時測試**後，您將被定向到一個螢幕，您可以在其中選擇瀏覽器配置、瀏覽器版本、作業系統和螢幕解析度，您希望使用這些解析度測試您的網站。
3. 單擊“開始”按鈕後，將出現一個載入螢幕，為您提供基於您的配置的虛擬機器（虛擬機器）。載入完成後，您可以使用網站執行即時互動式跨瀏覽器測試。 如果您注意到 UI 中存在問題，則可以透過使用螢幕截圖按鈕捕獲您的 VM 的螢幕截圖來與您的同事分享。您還可以透過點選測試會話中的錄製按鈕來錄製測試會話的影片。
4. 使用內建的影像編輯器，在將螢幕截圖推送到同事之前突出顯示螢幕截圖。
5. 使用“標記為錯誤”按鈕，您可以將錯誤推送到許多第三方工具，例如 Jira、Asana、Trello 等。這樣，您可以直接從 LambdaTest 上的測試會話將錯誤記錄到您的專案管理例項中。檢視所有 第三方 LambdaTest 整合。

Sauce Labs 入門

讓我們從 Sauce Labs 試用開始。

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

基礎知識：手動測試

Sauce Labs 儀表板 提供了許多可用選項。現在，請確保您位於手動測試選項卡上。

1. 點選開始一個新的手動會話。
2. 在下一個螢幕中，輸入您要測試的頁面的 URL（例如，使用 https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html），然後透過使用不同的按鈕和列表選擇您要測試的瀏覽器/作業系統組合。您會看到，有很多選擇！
3. 單擊“開始會話”後，將出現一個載入螢幕，它會啟動一個執行您選擇的組合的虛擬機器。
4. 載入完成後，您可以開始遠端測試在所選瀏覽器中執行的網站。
5. 從這裡，您可以看到佈局，就像它在您正在測試的瀏覽器中顯示的那樣，移動滑鼠並嘗試單擊按鈕等。頂部選單允許您
   • 停止會話
   • 向其他人提供一個 URL，以便他們可以遠端觀察測試。
   • 將文字/筆記複製到遠端剪貼簿。
   • 擷取螢幕截圖。
   • 以全屏模式測試。

停止會話後，您將返回到“手動測試”選項卡，您將看到您之前啟動的每個手動會話的條目。單擊其中一個條目將顯示該會話的更多資料。在這裡，您可以下載您擷取的任何螢幕截圖，觀看會話的影片，檢視資料日誌等。

高階：Sauce Labs API

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

它提供了一些客戶端，允許您使用您喜歡的環境（無論是 PHP、Java、Node.js 等）對 API 進行呼叫。

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

1. 首先，設定一個新的 npm 專案來測試這一點，如 設定 Node 和 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 測試。

BrowserStack 入門

讓我們從 BrowserStack 試用開始。

1. 建立一個 BrowserStack 試用帳戶。
2. 登入。這應該在您驗證您的電子郵件地址後自動發生。
3. 首次登入時，您應該位於即時測試頁面；如果不是，請點選頂部導航選單中的即時連結。
4. 如果您使用的是 Firefox 或 Chrome，系統將提示您在名為“啟用本地測試”的對話方塊中安裝瀏覽器擴充套件 - 點選安裝按鈕繼續。在其他瀏覽器上，您仍然可以使用某些功能（通常透過 Flash），但您可能無法獲得完整的體驗。

基礎知識：手動測試

BrowserStack 即時儀表板允許您選擇要在其上進行測試的裝置和瀏覽器 - 左側列中的平臺，右側的裝置。將滑鼠懸停或點選每個裝置時，您將獲得該裝置上可用的瀏覽器選擇。

點選其中一個瀏覽器圖示將載入您選擇的平臺/裝置/瀏覽器 - 現在選擇一個，並試用一下。

您會發現您可以將 URL 輸入位址列，並像在真實裝置上一樣使用其他控制元件。您甚至可以執行諸如從裝置複製和貼上到剪貼簿、透過拖動滑鼠上下滾動或在支援裝置（例如 MacBook）的觸控板上使用適當的手勢（例如捏/縮放、用兩個手指滾動）之類的操作。請注意，並非所有功能都在所有裝置上可用。

您還會看到一個選單，允許您控制會話。

此處的功能如下

• 切換 - 更改為另一個平臺/裝置/瀏覽器組合。
• 方向（看起來像一個重新載入圖示） - 在縱向和橫向之間切換方向。
• 全屏顯示（看起來像全屏圖示） - 儘可能用裝置填充測試區域。
• 捕獲錯誤（看起來像相機） - 拍攝螢幕截圖，然後允許你進行註釋並儲存。
• 問題追蹤器（看起來像一副牌） - 檢視之前捕獲的錯誤/螢幕截圖。
• 設定（齒輪圖示） - 允許你更改會話的通用設定。
• 幫助（問號） - 訪問幫助/支援功能。
• 開發者工具 - 允許你使用瀏覽器的開發者工具直接除錯或操作測試瀏覽器中顯示的頁面。目前僅適用於在 iOS 裝置上測試 Safari 瀏覽器。
• 裝置資訊 - 顯示有關測試裝置的資訊。
• 功能 - 顯示當前配置支援的功能，例如複製到剪貼簿、手勢支援等。
• 停止 - 結束會話。

其他基本功能

如果你返回到 BrowserStack 主頁，你會在“更多”選單選項下找到一些其他有用的基本功能。

• 響應式：輸入一個 URL 並按下“生成”，BrowserStack 將在多個具有不同視窗大小的裝置上載入該 URL。在每個裝置中，你可以進一步調整監視器大小等設定，以瞭解你的網站佈局如何在不同的外形尺寸下工作。
• 螢幕截圖：輸入一個 URL，選擇你感興趣的瀏覽器/裝置/平臺，然後按下“生成螢幕截圖” - BrowserStack 將在所有這些不同的瀏覽器中拍攝你網站的螢幕截圖，然後使你能夠檢視和下載它們。

高階：BrowserStack API

BrowserStack 還提供了一個 RESTful API，允許你以程式設計方式檢索帳戶計劃、會話、構建等的詳細資訊。

它提供了一些客戶端，允許您使用您喜歡的環境（無論是 PHP、Java、Node.js 等）對 API 進行呼叫。

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

1. 首先，按照 設定 Node 和 npm 中的說明設定一個新的 npm 專案來測試它。使用與之前不同的目錄名稱，例如 bstack-test。
2. 在專案根目錄中建立一個名為 call_bstack.js 的新檔案。將以下內容複製到該檔案：
   js

   const request = require("request");
   
   const bsUser = "BROWSERSTACK_USERNAME";
   const bsKey = "BROWSERSTACK_ACCESS_KEY";
   const baseUrl = `https://${bsUser}:${bsKey}@www.browserstack.com/automate/`;
   
   function getPlanDetails() {
     request({ uri: `${baseUrl}plan.json` }, (err, res, body) => {
       console.log(JSON.parse(body));
     });
     /* Response:
       {
         automate_plan: <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 使用者名稱和 API 金鑰。這些可以在 BrowserStack 帳戶和個人資料詳細資訊 中的“身份驗證和安全”部分找到。現在填寫這些資訊。
4. 確保一切已儲存，然後像這樣執行您的檔案
   bash

   node call_bstack
   

下面我們還提供了一些其他現成的函式，你可能會發現它們在使用 BrowserStack RESTful API 時很有用。

function getBuilds() {
  request({ uri: `${baseUrl}builds.json` }, (err, res, body) => {
    console.log(JSON.parse(body));
  });
  /* Response:
  [
    {
      automation_build: {
        name: <string>,
        duration: <int>,
        status: <string>,
        hashed_id: <string>
      }
    },
    {
      automation_build: {
        name: <string>,
        duration: <int>,
        status: <string>,
        hashed_id: <string>
      }
    },
    // …
  ]
  */
}

function getSessionsInBuild(build) {
  const buildId = build.automation_build.hashed_id;
  request(
    { uri: `${baseUrl}builds/${buildId}/sessions.json` },
    (err, res, body) => {
      console.log(JSON.parse(body));
    },
  );
  /* 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>,
        video_url: <string>,
        browser_console_logs_url: <string>,
        har_logs_url: <string>
      }
    },
    {
      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>,
        video_url: <string>,
        browser_console_logs_url: <string>,
        har_logs_url: <string>
      }
    },
    // …
  ]
  */
}

function getSessionDetails(session) {
  const sessionId = session.automation_session.hashed_id;
  request({ uri: `${baseUrl}sessions/${sessionId}.json` }, (err, res, body) => {
    console.log(JSON.parse(body));
  });
  /* 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>,
      video_url: <string>,
      browser_console_logs_url: <string>,
      har_logs_url: <string>
    }
  }
  */
}

高階：自動化測試

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

開始使用 TestingBot

讓我們開始使用 TestingBot 試用版。

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

基礎知識：手動測試

TestingBot 儀表盤 列出了你可以選擇的各種選項。現在，請確保你位於“即時 Web 測試”選項卡上。

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

當你停止會話後，你將返回到“即時 Web 測試”頁面，在那裡你將看到之前啟動的每個手動會話的條目。點選其中一個條目會顯示該會話的更多資料。在這裡，你可以下載拍攝的任何螢幕截圖、觀看測試影片以及檢視會話日誌。

高階：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(function (err, tests) {
     console.log(tests);
   });
   

4. 你需要在指定的位置填寫你的 TestingBot 金鑰和秘密。你可以在 TestingBot 儀表盤 中找到它們。
5. 確保儲存所有內容，然後執行該檔案
   bash

   node tb.js
   

高階：自動化測試

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

這真是一個漫長的旅程，但我相信你已經開始看到使用自動化工具來完成測試中的一些繁重工作的優勢了。

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

• 上一步
• 概述：跨瀏覽器測試
• 下一步