設定你自己的測試自動化環境

在本文中，我們將教你如何安裝自己的自動化環境，並使用 Selenium/WebDriver 和一個測試庫（例如 Node 的 selenium-webdriver）執行自己的測試。我們還將探討如何將本地測試環境與上一篇文章中討論的商業工具整合。

預備知識	熟悉核心的 HTML、CSS 和 JavaScript 語言；瞭解跨瀏覽器測試和自動化測試的高階原則。
目標	展示如何在本地設定 Selenium 測試環境並執行測試，以及如何將其與 LambdaTest、Sauce Labs 和 BrowserStack 等工具整合。

Selenium

Selenium 是最流行的瀏覽器自動化工具。雖然還有其他方法，但使用 Selenium 的最佳方式是透過 WebDriver，這是一個功能強大的 API，它建立在 Selenium 之上，並呼叫瀏覽器進行自動化操作，執行諸如“開啟此網頁”、“將滑鼠懸停在此頁面元素上”、“點選此連結”、“檢視此連結是否開啟此 URL”等操作。這對於執行自動化測試非常理想。

如何安裝和使用 WebDriver 取決於你希望使用哪種程式設計環境來編寫和執行測試。大多數流行的環境都提供了包或框架，用於安裝 WebDriver 以及使用該語言（例如 Java、C#、Ruby、Python、JavaScript (Node) 等）與 WebDriver 通訊所需的繫結。有關不同語言的 Selenium 設定的更多詳細資訊，請參閱設定 Selenium-WebDriver 專案。

不同的瀏覽器需要不同的驅動程式，以允許 WebDriver 與它們通訊並控制它們。有關從何處獲取瀏覽器驅動程式等的更多資訊，請參閱Selenium 支援的平臺。

我們將介紹如何使用 Node.js 編寫和執行 Selenium 測試，因為它啟動快速簡便，並且對於前端開發人員來說是一個更熟悉的環境。

注意：如果你想了解如何在其他伺服器端環境中使用 WebDriver，還可以檢視Selenium 支援的平臺以獲取一些有用的連結。

在 Node 中設定 Selenium

首先，按照上一章中設定 Node 和 npm 中討論的方法，設定一個新的 npm 專案。給它起一個不同的名字，例如 selenium-test。
接下來，我們需要安裝一個框架，以便我們可以在 Node 中使用 Selenium。我們將選擇 Selenium 官方的 selenium-webdriver，因為其文件似乎相當新且維護良好。如果你想要其他選項，webdriver.io 和 nightwatch.js 也是不錯的選擇。要安裝 selenium-webdriver，請執行以下命令，確保你位於專案資料夾內：
bash
```
npm install selenium-webdriver
```

注意：即使你之前安裝過 selenium-webdriver 並下載了瀏覽器驅動程式，也最好遵循這些步驟。你應該確保所有內容都是最新的。

接下來，你需要下載相關的驅動程式，以允許 WebDriver 控制你想要測試的瀏覽器。你可以在 selenium-webdriver 頁面上找到獲取它們的詳細資訊（參見第一部分的表格）。顯然，某些瀏覽器是特定於作業系統的，但我們將堅持使用 Firefox 和 Chrome，因為它們在所有主要作業系統上都可用。

下載最新的 GeckoDriver（用於 Firefox）和 ChromeDriver 驅動程式。
將它們解壓到易於導航的地方，例如你的主使用者目錄的根目錄。
將 chromedriver 和 geckodriver 驅動程式的位置新增到你的系統 PATH 變數中。這應該是從硬碟根目錄到包含驅動程式的目錄的絕對路徑。例如，如果我們在 macOS 機器上，使用者名稱為 bob，並且我們將驅動程式放在主資料夾的根目錄中，則路徑將是 /Users/bob。

注意：再次強調，你新增到 PATH 的路徑需要是包含驅動程式的目錄的路徑，而不是驅動程式本身的路徑！這是一個常見的錯誤。

在 macOS 系統和大多數 Linux 系統上設定 PATH 變數

開啟你的 .zprofile（如果你的系統使用 bash shell，則為 .bash_profile）檔案。

注意：如果你看不到隱藏檔案，你需要顯示它們，請參閱在 macOS 中快速顯示/隱藏隱藏檔案或在 Ubuntu 中顯示隱藏資料夾）。
將以下內容貼上到檔案底部（根據你機器上的實際路徑更新路徑）
bash
```
# Add WebDriver browser drivers to PATH
export PATH=$PATH:/Users/bob
```
儲存並關閉此檔案，然後重新啟動你的終端/命令提示符以重新應用你的 Bash 配置。
透過在終端中輸入以下內容，檢查你的新路徑是否在 PATH 變數中
bash
```
echo $PATH
```
你會在終端中看到它被打印出來。

注意：要在 Windows 上設定 PATH 變數，請按照如何將新資料夾新增到我的系統路徑？中的說明操作。

讓我們做一個快速測試，以確保一切正常。

在你的專案目錄中建立一個名為 duck_test.js 的新檔案。

給它以下內容，然後儲存

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

(async function example() {
  const driver = await new Builder().forBrowser(Browser.FIREFOX).build();
  try {
    await driver.get("https://duckduckgo.com/");
    await driver.findElement(By.name("q")).sendKeys("webdriver", Key.RETURN);
    await driver.wait(until.titleIs("webdriver at DuckDuckGo"), 1000);
    console.log("Test passed!");
  } catch (e) {
    console.log(`Error: ${e}`);
  } finally {
    await driver.sleep(2000); // Delay long enough to see search page!
    await driver.quit();
  }
})();

注意：此函式是一個 IIFE（立即執行函式表示式）。

在終端中，確保你位於專案資料夾內，然後輸入以下命令：
bash
```
node duck_test
```

你應該會看到一個 Firefox 例項自動開啟！DuckDuckGo 將自動在一個標籤頁中載入，“webdriver”將被輸入到搜尋框中，並點選搜尋按鈕。WebDriver 將然後等待 1 秒；然後訪問文件標題，如果它是“webdriver at DuckDuckGo”，我們將返回一條訊息，表明測試透過。

然後我們等待 2 秒，之後 WebDriver 將關閉 Firefox 例項並停止。

同時在多個瀏覽器中測試

沒有什麼能阻止你同時在多個瀏覽器上執行測試。讓我們試試這個！

在你的專案目錄中建立另一個名為 duck_test_multiple.js 的新檔案。你可以隨意更改對我們新增的其他一些瀏覽器的引用、刪除它們等，具體取決於你的作業系統上有哪些可用的瀏覽器進行測試。你需要確保你的系統上已設定正確的瀏覽器驅動程式。至於在 .forBrowser() 方法中用於其他瀏覽器的字串，請參閱 Browser enum 參考頁面。

給你的檔案以下內容，然後儲存

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

const driver_fx = new Builder().forBrowser(Browser.FIREFOX).build();
const driver_chr = new Builder().forBrowser(Browser.CHROME).build();

async function searchTest(driver) {
  try {
    await driver.get("https://duckduckgo.com/");
    await driver.findElement(By.name("q")).sendKeys("webdriver", Key.RETURN);
    await driver.sleep(2000);
    const title = await driver.getTitle();
    if (title === "webdriver at DuckDuckGo") {
      console.log("Test passed");
    } else {
      console.log("Test failed");
    }
  } finally {
    driver.quit();
  }
}

searchTest(driver_fx);
searchTest(driver_chr);

在終端中，確保你位於專案資料夾內，然後輸入以下命令：
bash
```
node duck_test_multiple
```

注意：如果你使用 Mac 並決定測試 Safari，你可能會收到類似“無法建立會話：你必須在 Safari 的開發選單中啟用‘允許遠端自動化’選項，才能透過 WebDriver 控制 Safari。”的錯誤訊息。如果遇到此問題，請按照給定的說明操作，然後重試。

你可能會收到一條訊息，說你無法開啟驅動程式應用程式，因為它不是從經過驗證的來源下載的。如果你收到此訊息，你可以僅為該驅動程式應用程式覆蓋該安全設定。例如，在 Mac 上，按 Ctrl + 點選應用程式，選擇“開啟”，然後從彈出的對話方塊中再次選擇“開啟”。

所以這裡我們像以前一樣進行了測試，只不過這次我們把它封裝在一個函式 searchTest() 中。我們為多個瀏覽器建立了新的瀏覽器例項，然後將每個例項傳遞給函式，以便在所有瀏覽器上執行測試。

讓我們繼續，更詳細地瞭解 WebDriver 語法的基本知識。

WebDriver 語法速成班

讓我們來看看 WebDriver 語法的一些關鍵特性。有關更完整的詳細資訊，你應該查閱 selenium-webdriver JavaScript API 參考以獲取詳細參考，以及 Selenium 主文件的 Selenium WebDriver，其中包含用不同語言編寫的多個示例可供學習。

開始新測試

要啟動新測試，你需要包含 selenium-webdriver 模組，匯入 Builder 建構函式和 Browser 介面：

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

你使用 Builder() 建構函式建立驅動程式的新例項，透過連結 forBrowser() 方法來指定你要用此構建器測試哪個瀏覽器。build() 方法在最後連結，以實際構建驅動程式例項（有關這些功能的詳細資訊，請參閱 Builder 類參考）。

let driver = new Builder().forBrowser(Browser.FIREFOX).build();

請注意，可以為要測試的瀏覽器設定特定的配置選項，例如你可以在 forBrowser() 方法中設定特定的版本和作業系統進行測試：

let driver = new Builder().forBrowser(Browser.FIREFOX, "130", "MAC").build();

你也可以使用環境變數設定這些選項，例如：

bash

SELENIUM_BROWSER=firefox:130:MAC

讓我們建立一個新的測試，以便在我們討論程式碼時進行探索。在你的 Selenium 測試專案目錄中，建立一個名為 quick_test.js 的新檔案，並向其中新增以下程式碼：

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

(async function example() {
  const driver = await new Builder().forBrowser(Browser.FIREFOX).build();
})();

你可以透過在終端中輸入以下命令來測試該示例：

bash

node quick_test

獲取要測試的文件

要載入你實際要測試的頁面，你使用你之前建立的驅動程式例項的 get() 方法，例如：

driver.get("http://www.google.com");

注意：有關本節及以下功能的詳細資訊，請參閱 WebDriver 類參考。

你可以使用任何 URL 指向你的資源，包括 file:// URL 來測試本地文件。

driver.get("file:///Users/bob/git/examples/test_file.html");

driver.get("https://:8888/test_file.html");

但最好使用遠端伺服器位置，這樣程式碼更靈活——當你開始使用遠端伺服器執行測試時（參見後文），如果你嘗試使用本地路徑，你的程式碼將中斷。

如下更新你的 example() 函式，用你計算機上 HTML 檔案的真實本地路徑替換佔位符路徑，然後嘗試執行它：

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

(async function example() {
  const driver = await new Builder().forBrowser(Browser.FIREFOX).build();
  driver.get("file:///Users/bob/git/examples/test_file.html");
})();

與文件互動

現在我們有一個文件要測試，我們需要以某種方式與它互動，這通常涉及首先選擇一個特定的元素來測試一些東西。在 WebDriver 中，你可以透過多種方式選擇 UI 元素，包括透過 ID、類、元素名稱等。實際選擇由 findElement() 方法完成，該方法接受一個選擇方法作為引數。例如，透過 ID 選擇元素：

const element = driver.findElement(By.id("myElementId"));

透過 CSS 查詢元素最有用的一種方法是使用 By.css() 方法，它允許你使用 CSS 選擇器選擇元素。

現在，如下更新你的 example() 函式，然後執行示例：

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

(async function example() {
  const driver = await new Builder().forBrowser(Browser.FIREFOX).build();
  driver.get(
    "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html",
  );
  const button = driver.findElement(By.css("button:nth-of-type(1)"));
})();

測試你的元素

有很多方法可以與你的 Web 文件及其內部元素進行互動。你可以從 WebDriver 文件上的獲取文字值開始檢視有用的常見示例。

如果我們想獲取按鈕內的文字，我們可以這樣做：

button.getText().then((text) => {
  console.log(`Button text is '${text}'`);
});

現在如下所示將其新增到 example() 函式的底部：

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

(async function example() {
  const driver = await new Builder().forBrowser(Browser.FIREFOX).build();

  driver.get(
    "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html",
  );

  const button = driver.findElement(By.css("button:nth-of-type(1)"));

  button.getText().then((text) => {
    console.log(`Button text is '${text}'`);
  });
})();

像以前一樣使用 node 執行示例。你應該會在控制檯中看到按鈕的文字標籤。

讓我們做一些更有用的事情。將之前的程式碼替換為 button.click();，如下所示：

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

(async function example() {
  const driver = await new Builder().forBrowser(Browser.FIREFOX).build();
  driver.get(
    "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html",
  );

  const button = driver.findElement(By.css("button:nth-of-type(1)"));

  button.click();
})();

再次嘗試執行你的測試；按鈕將被點選，並會出現一個 alert() 彈出視窗。至少我們知道按鈕正在工作！

你也可以與彈窗互動。如下更新 example() 函式，然後再次嘗試測試它：

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

(async function example() {
  const driver = await new Builder().forBrowser(Browser.FIREFOX).build();

  driver.get(
    "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html",
  );

  const button = driver.findElement(By.css("button:nth-of-type(1)"));

  button.click();

  await driver.wait(until.alertIsPresent());

  const alert = driver.switchTo().alert();

  alert.getText().then((text) => {
    console.log(`Alert text is '${text}'`);
  });

  alert.accept();
})();

接下來，讓我們嘗試在表單元素中輸入一些文字。如下更新 example() 函式，然後再次嘗試執行你的測試：

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

(async function example() {
  const driver = await new Builder().forBrowser(Browser.FIREFOX).build();
  driver.get(
    "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html",
  );

  const input = driver.findElement(By.id("name"));
  input.sendKeys("Bob Smith");

  input.sendKeys(Key.TAB);

  const input2 = driver.findElement(By.id("age"));
  input2.sendKeys("65");
})();

你可以使用 Key 物件的屬性提交無法用普通字元表示的按鍵。例如，上面我們使用以下方法在表單輸入之間進行切換：

input.sendKeys(Key.TAB);

等待某事完成

有些時候你會希望讓 WebDriver 等待某件事情完成後再繼續。例如，如果你載入一個新頁面，你會希望等待頁面的 DOM 完成載入，然後才嘗試與其任何元素互動，否則測試很可能會失敗。

例如，在我們的 duck_test_multiple.js 測試中，我們包含了這一行：

await driver.sleep(2000);

sleep() 方法接受一個值，該值指定等待的時間（以毫秒為單位）——該方法返回一個 Promise，該 Promise 在該時間結束時解析。我們使用 await 關鍵字暫停封閉函式，直到 Promise 解析，之後執行該方法之後的程式碼。

我們也可以在 quick_test.js 測試中新增一個 sleep() 方法——嘗試像這樣更新你的 example() 函式：

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

(async function example() {
  const driver = await new Builder().forBrowser(Browser.FIREFOX).build();
  driver.get(
    "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html",
  );

  const input = driver.findElement(By.id("name"));
  input.sendKeys("Bob Smith");

  driver.sleep(1000).then(() => {
    input.getAttribute("value").then((value) => {
      if (value !== "") {
        console.log("Form input filled out");
      } else {
        console.log("Text could not be entered");
      }
    });
  });
})();

嘗試執行更新後的程式碼。WebDriver 現在將填寫第一個表單欄位，等待一秒鐘，然後透過使用 getAttribute() 檢索其 value 屬性值來測試其值是否已填寫（即不為空）。然後它會向控制檯列印一條訊息以報告成功/失敗。

注意：還有一個方法叫做 wait()，它會重複測試一個條件一段時間，然後繼續執行程式碼。這也利用了 util 庫，該庫定義了與 wait() 一起使用的常見條件。

使用後關閉驅動程式

執行完測試後，你應該使用 driver.quit() 方法關閉所有已開啟的驅動程式例項，以確保它們不會不必要地繼續佔用資源。如下更新 quick_test.js：

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

(async function example() {
  const driver = await new Builder().forBrowser(Browser.FIREFOX).build();
  driver.get(
    "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html",
  );

  const input = driver.findElement(By.id("name"));
  input.sendKeys("Bob Smith");

  driver.sleep(1000).then(() => {
    input
      .getAttribute("value")
      .then((value) => {
        if (value !== "") {
          console.log("Form input filled out");
        } else {
          console.log("Text could not be entered");
        }
      })
      .finally(() => {
        driver.quit();
      });
  });
})();

現在當你執行它時，你應該會看到測試執行，並且在測試完成後瀏覽器例項再次關閉。

測試最佳實踐

關於編寫測試的最佳實踐已經有很多論述。你可以在測試實踐中找到一些不錯的背景資訊。通常，你應該確保你的測試是：

使用好的定位策略：當您與文件互動時，請確保您使用不太可能更改的定位器和頁面物件——如果您有一個可測試的元素要執行測試，請確保它具有穩定的 ID，或頁面上可以使用 CSS 選擇器選擇的位置，該位置不會隨著下一個站點迭代而更改。您希望您的測試儘可能不脆弱，即它們不會在某些內容更改時輕易中斷。
編寫原子測試：每個測試只測試一件事，以便輕鬆跟蹤哪個測試檔案正在測試哪個標準。我們上面看的 duck_test.js 測試相當好，因為它只測試一件事——搜尋結果頁面的標題是否設定正確。我們可以努力給它一個更好的名字，以便在新增更多測試時更容易理解它做什麼。也許 results_page_title_set_correctly.js 會稍微好一點？
編寫自主測試：每個測試都應該獨立工作，不依賴於其他測試才能工作。

此外，我們應該提到測試結果/報告——我們在上面的示例中使用簡單的 console.log() 語句報告結果，但這都是在 JavaScript 中完成的，因此你可以使用任何你想要的測試執行和報告系統，無論是 Mocha、Chai 還是其他工具。讓我們快速過一個示例：

在您的專案目錄中建立我們的 mocha_test.js 示例的本地副本。將其放在名為 test 的子資料夾中。此示例使用一個長的 Promise 鏈來執行我們測試中所需的所有步驟——WebDriver 使用的基於 Promise 的方法需要解析才能正常工作。
透過在你的專案目錄中執行以下命令來安裝 mocha 測試工具：
bash
```
npm install --save-dev mocha
```
你現在可以使用以下命令執行測試（以及你放置在 test 目錄中的任何其他測試）：
bash
```
npx mocha --no-timeouts
```
你應該包含 --no-timeouts 標誌，以確保你的測試不會因為 Mocha 的任意超時（3 秒）而失敗。

注意：saucelabs-sample-test-frameworks 包含幾個有用的示例，展示瞭如何設定不同組合的測試/斷言工具。

執行遠端測試

事實證明，在遠端伺服器上執行測試並不比在本地執行測試困難多少。你只需要建立你的驅動程式例項，但要指定更多的特性，包括你想要測試的瀏覽器的功能、伺服器的地址以及訪問它所需的（如果有的話）使用者憑據。

BrowserStack

讓我們建立一個示例，演示如何在 BrowserStack 上遠端執行 Selenium 測試。

在你的專案目錄中，建立一個名為 bstack_duck_test.js 的新檔案。

給它以下內容：

const { Builder, By, Key } = require("selenium-webdriver");

// Input capabilities
const capabilities = {
  "bstack:options": {
    os: "OS X",
    osVersion: "Sonoma",
    browserVersion: "17.0",
    local: "false",
    seleniumVersion: "3.14.0",
    userName: "YOUR-USER-NAME",
    accessKey: "YOUR-ACCESS-KEY",
  },
  browserName: "Safari",
};

const driver = new Builder()
  .usingServer("http://hub-cloud.browserstack.com/wd/hub")
  .withCapabilities(capabilities)
  .build();

(async function bStackGoogleTest() {
  try {
    await driver.get("https://duckduckgo.com/");
    await driver.findElement(By.name("q")).sendKeys("webdriver", Key.RETURN);
    await driver.sleep(2000);
    const title = await driver.getTitle();
    if (title === "webdriver at DuckDuckGo") {
      console.log("Test passed");
    } else {
      console.log("Test failed");
    }
  } finally {
    await driver.sleep(4000); // Delay long enough to see search page!
    await driver.quit();
  }
})();

從你的 BrowserStack 賬戶和個人資料詳細資訊頁面中，獲取你的使用者名稱和訪問金鑰（參見“使用者名稱和訪問金鑰”）。
將程式碼中的 YOUR-USER-NAME 和 YOUR-ACCESS-KEY 佔位符替換為你的實際使用者名稱和訪問金鑰值（並確保它們安全）。
使用以下命令執行你的測試：
bash
```
node bstack_google_test
```
測試將傳送到 BrowserStack，測試結果將返回到你的控制檯。這顯示了包含某種結果報告機制的重要性！
現在，如果你回到 BrowserStack 自動化儀表板，你將看到你的測試已列出，其中包含詳細資訊，包括測試的影片錄製以及與其相關的多個詳細資訊日誌：

注意：Browserstack 自動化儀表板上的“資源”選單選項包含大量有關使用它執行自動化測試的有用資訊。有關 Node specific 資訊，請參閱 NodeJS 上的 Selenium。

以程式設計方式填寫 BrowserStack 測試詳情

你可以使用 BrowserStack REST API 和其他一些功能來為你的測試新增更多細節，例如它是否透過，為什麼透過，測試屬於哪個專案等。BrowserStack 預設不瞭解這些細節。

讓我們更新我們的 bstack_duck_test.js 演示，展示這些功能是如何工作的：

透過在你的專案目錄中執行以下命令來安裝 axios 模組：
bash
```
npm install axios
```
匯入 axios 模組，以便我們可以使用它向 BrowserStack REST API 傳送請求。在程式碼的最頂部新增以下行：
js
```
const axios = require("axios");
```
現在我們將更新我們的 capabilities 物件，以包含一個專案名稱——在右括號之前新增以下行，請記住在上一行的末尾新增一個逗號（你可以更改構建和專案名稱，以在 BrowserStack 自動化儀表板中以不同視窗組織測試）：
js
```
const capabilities = {
  // …
  project: "DuckDuckGo test 2",
};
```

接下來，我們將檢索當前會話的 sessionId，並使用它（以及您的 userName 和 accessKey）來組裝傳送請求的 URL，以更新 BrowserStack 資料。在建立 driver 物件的塊下方（以 const driver = new Builder() 開頭）包含以下行：

let sessionId;
let bstackURL;

driver.session_.then((sessionData) => {
  sessionId = sessionData.id_;
  bstackURL = `https://${capabilities["bstack:options"].userName}:${capabilities["bstack:options"].accessKey}@www.browserstack.com/automate/sessions/${sessionId}.json`;
});

最後，更新程式碼底部附近的 if...else 塊，根據測試透過或失敗向 BrowserStack 傳送適當的 API 呼叫：

if (title === "webdriver at DuckDuckGo") {
  console.log("Test passed");
  axios.put(bstackURL, {
    status: "passed",
    reason: "DuckDuckGo results showed correct title",
  });
} else {
  console.log("Test failed");
  axios.put(bstackURL, {
    status: "failed",
    reason: "DuckDuckGo results showed wrong title",
  });
}

測試完成後，我們會向 BrowserStack 傳送 API 呼叫，以更新測試並透過或失敗狀態以及結果原因。

如果你現在回到 BrowserStack 自動化儀表板，你應該會看到你的測試會話和以前一樣，但附加了你的自定義資料。它顯示狀態為“透過”，以及 REST API 報告的透過原因：

BrowserStack Custom Results

Sauce Labs

讓我們看一個示例，演示如何在 Sauce Labs 上遠端執行 Selenium 測試：

在您的專案目錄中，建立一個名為 sauce_google_test.js 的新檔案。

給它以下內容：

const { Builder, By, Key } = require("selenium-webdriver");

const username = "YOUR-USER-NAME";
const accessKey = "YOUR-ACCESS-KEY";

const driver = new Builder()
  .withCapabilities({
    browserName: "chrome",
    platform: "Windows XP",
    version: "43.0",
    username,
    accessKey,
  })
  .usingServer(
    `https://${username}:${accessKey}@ondemand.saucelabs.com:443/wd/hub`,
  )
  .build();

driver.get("http://www.google.com");

driver.findElement(By.name("q")).sendKeys("webdriver");

driver.sleep(1000).then(() => {
  driver.findElement(By.name("q")).sendKeys(Key.TAB);
});

driver.findElement(By.name("btnK")).click();

driver.sleep(2000).then(() => {
  driver.getTitle().then((title) => {
    if (title === "webdriver - Google Search") {
      console.log("Test passed");
    } else {
      console.log("Test failed");
    }
  });
});

driver.quit();

從你的 Sauce Labs 使用者設定中，獲取你的使用者名稱和訪問金鑰。將程式碼中的 YOUR-USER-NAME 和 YOUR-ACCESS-KEY 佔位符替換為你的實際使用者名稱和訪問金鑰值（並確保它們安全）。
使用以下命令執行你的測試：
bash
```
node sauce_google_test
```
測試將傳送到 Sauce Labs，測試結果將返回到你的控制檯。這表明包含某種結果報告機制的重要性！
現在，如果您轉到您的 Sauce Labs 自動化測試儀表板頁面，您將看到您的測試已列出；從這裡您將能夠看到影片、螢幕截圖和其他此類資料。

注意：Sauce Labs 的平臺配置器是一個有用的工具，可以根據您想要測試的瀏覽器/作業系統，為您的驅動程式例項生成功能物件。

注意：有關使用 Sauce Labs 和 Selenium 進行測試的更多有用詳細資訊，請檢視 Selenium 自動化網站測試入門和即時 Selenium Node.js 測試。

以程式設計方式填寫 Sauce Labs 測試詳情

你可以使用 Sauce Labs API 為你的測試新增更多細節，例如它是否透過，測試名稱等。Sauce Labs 預設不知道這些細節！

要做到這一點，你需要：

使用以下命令安裝 Node Sauce Labs 包裝器（如果你還沒有為該專案安裝）：
bash
```
npm install saucelabs --save-dev
```
引入 saucelabs —— 將此行放在 sauce_google_test.js 檔案的頂部，緊隨之前的變數宣告之後：
js
```
const SauceLabs = require("saucelabs");
```
透過在下面新增以下內容來建立 SauceLabs 的新例項：
js
```
const saucelabs = new SauceLabs({
  username: "YOUR-USER-NAME",
  password: "YOUR-ACCESS-KEY",
});
```
同樣，將程式碼中的 YOUR-USER-NAME 和 YOUR-ACCESS-KEY 佔位符替換為您的實際使用者名稱和訪問金鑰值（請注意，saucelabs npm 包令人困惑地使用 password，而不是 accessKey）。由於您現在要使用它們兩次，因此您可能希望建立幾個輔助變數來儲存它們。
在您定義 driver 變數的塊下方（緊隨 build() 行之後），新增以下塊——這會獲取我們寫入作業資料所需的正確驅動程式 sessionID（您可以在下一個程式碼塊中看到它的作用）：
js
```
driver.getSession().then((sessionid) => {
  driver.sessionID = sessionid.id_;
});
```

最後，將程式碼底部附近的 driver.sleep(2000) 塊替換為以下內容：

driver.sleep(2000).then(() => {
  driver.getTitle().then((title) => {
    let testPassed = false;
    if (title === "webdriver - Google Search") {
      console.log("Test passed");
      testPassed = true;
    } else {
      console.error("Test failed");
    }

    saucelabs.updateJob(driver.sessionID, {
      name: "Google search results page title test",
      passed: testPassed,
    });
  });
});

在這裡，我們根據測試透過或失敗將 testPassed 變數設定為 true 或 false，然後我們使用 saucelabs.updateJob() 方法更新詳細資訊。

如果您現在回到 Sauce Labs 自動化測試儀表板頁面，您應該會看到您的新作業現在已附加了更新的資料。

Sauce Labs Updated Job info

你自己的遠端伺服器

如果你不想使用 Sauce Labs 或 BrowserStack 等服務，你總是可以設定自己的遠端測試伺服器。讓我們看看如何做到這一點。

Selenium 遠端伺服器需要 Java 才能執行。從 Java SE 下載頁面下載適用於您平臺的最新 JDK。下載後安裝它。
接下來，下載最新的 Selenium 獨立伺服器 ——它充當你的指令碼和瀏覽器驅動程式之間的代理。選擇最新的穩定版本號（即，不是 Beta 版本），然後從列表中選擇以“selenium-server-standalone”開頭的檔案。下載後，將其放在一個合適的位置，例如你的主目錄。如果你尚未將該位置新增到你的 PATH 中，請立即新增（請參閱在 Node 中設定 Selenium 部分）。
透過在伺服器計算機的終端中輸入以下內容來執行獨立伺服器：
bash
```
java -jar selenium-server-standalone-3.0.0.jar
```
（更新 .jar 檔名）使其與您擁有的檔案完全匹配。
伺服器將在 https://:4444/wd/hub 上執行——現在嘗試訪問它以檢視您會得到什麼。

現在伺服器正在執行，讓我們建立一個將在遠端 Selenium 伺服器上執行的演示測試。

複製你的 google_test.js 檔案，並將其命名為 google_test_remote.js；將其放在你的專案目錄中。

更新程式碼行（以 const driver = … 開頭），如下所示：

const driver = new Builder()
  .forBrowser(Browser.FIREFOX)
  .usingServer("https://:4444/wd/hub")
  .build();

執行你的測試，你應該會看到它按預期執行；然而這次你將在獨立伺服器上執行它。
bash
```
node google_test_remote.js
```

所以這很酷。我們已經在本地測試了它，但你可以在任何伺服器上設定它以及相關的瀏覽器驅動程式，然後使用你選擇的 URL 將你的指令碼連線到它。

將 Selenium 與 CI 工具整合

另一點是，還可以將 Selenium 和 LambdaTest、Sauce Labs 等相關工具與持續整合 (CI) 工具整合——這很有用，因為它意味著你可以透過 CI 工具執行測試，並且只有在測試透過時才將新更改提交到程式碼倉庫。

本文範圍之外，無法詳細探討這個領域，但我們建議從 Travis CI 開始——這可能是最容易上手的 CI 工具，並且與 GitHub 和 Node 等 Web 工具整合良好。

例如，要開始，請參閱：

注意：如果您希望使用無程式碼自動化執行持續測試，那麼您可以使用 Endtest 或 TestingBot。

總結

這個模組應該很有趣，並且應該為您提供了足夠的編寫和執行自動化測試的見解，讓您開始編寫自己的自動化測試。

幫助改進 MDN

瞭解如何貢獻

本頁面最後修改於 2025 年 10 月 9 日，由 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容問題