使用瀏覽器 Script (測試版)

瀏覽器測試會透過瀏覽器播放 Node.js 型測試 Script ，來模擬使用者在 Web 應用程式中可能採用的路徑，以監視及測量使用者網站的效能。

Instana Synthetic 瀏覽器測試支援 Selenium型 API ，並使用超過 30 個瀏覽器測試 API來擴充瀏覽器測試功能。

此外， Instana Synthetic 還引進一組廣域變數及 API ，讓瀏覽器測試更容易、可維護及安全。

透過使用此特性， Script 開發人員可以主要聚焦於其測試邏輯，而不是安裝瀏覽器及驅動程式、開啟及關閉瀏覽器，以及釋放資源。

必要條件
支援的運行環境及功能
瀏覽器 Script 測試類型
- 瀏覽器 Script
  - 瀏覽器 Script: 單一瀏覽器測試 Script
  - 瀏覽器 Script: 隨機版瀏覽器測試 Script
- Selenium IDE Script
瀏覽器 Script 範例
瀏覽器 Script 測試和除錯

必要條件

虛構 PoP Helm Chart 1.0.15 或更新版本支援 Instana 瀏覽器測試 (測試版)。

會使用新的播放引擎來執行這些測試。您必須將虛構 PoP 版本升級至 1.0.15 或更新版本，以啟用瀏覽器播放引擎。

若要檢查虛構 PoP Helm 圖表的版本，請執行下列指令:

helm list -n <namespace>

若要檢查是否已啟用用於瀏覽器測試的新播放引擎，請執行下列指令:

kubectl get pod -n <namespace> | grep browserscript
synthetic-pop-browserscript-playback-engine-8589bb6cbf-dh7sb   1/1     Running   0          13m

支援的運行環境及功能

Instana Synthetic 瀏覽器測試支援 Chromium、 Mozilla Firefox及 Node.js 執行時期。
- Mozilla Firefox 115.4.0esr
- 鉻 118.0.5993.0
- Node.js v16.20.2
- selenium-webdriver 4.1.2
Instana Synthetic 瀏覽器測試支援 Selenium型 API 及超過 30 個瀏覽器測試 API。
Instana Synthetic 瀏覽器測試支援分析及收集度量值，例如回應時間及回應大小。
Instana Synthetic 瀏覽器測試支援測試結果中的記錄、擷取畫面、瀏覽器日誌、主控台日誌及 HTTP 保存檔格式 (HAR)。

瀏覽器 Script 測試類型

使用 Instana Synthetic ，您可以建立下列瀏覽器 Script 測試:

瀏覽器 Script

瀏覽器 Script 以 Node.js 為基礎，並同時包含單一及組合 Script。

瀏覽器 Script: 單一瀏覽器測試 Script

您可以在單一 Script 中撰寫所有內容。通常，這樣可以滿足大部分使用者的需求。請參閱下列範例：

(async function () {
  console.log("Access IBM website");
  await $browser.get("https://www.ibm.com/us-en");

  console.log("Accept all cookies");
  const cookies = await $browser.waitForAndFindElement(
    $driver.By.id(`truste-consent-button`),
    30000
  );
  await cookies.click();
})();

瀏覽器 Script: 隨機版瀏覽器測試 Script

如果商業邏輯很複雜，請勿在單一 Script 中包含所有內容。在 GitHub中使用多個 Script 檔，以取得更好的維護、程式碼重複使用及版本控制。

您可以在壓縮檔中使用組合 Script。

使用共用程式庫撰寫多個 Script。請參閱下列範例：

// bundled/mytest.js
const assert = require("assert").strict;
let { testIBM } = require("./lib/myscript.js");
console.log("Start to test");
testIBM();

// bundled/lib/myscript.js
async function testIBM() {
  console.log("Access IBM website");
  await $browser.get("https://www.ibm.com/us-en");
  
  console.log("Accept all cookies");
  const cookies = await $browser.waitForAndFindElement($driver.By.id(`truste-consent-button`), 30000);
  await cookies.click();
};
module.exports = {
  testIBM
};

將多個 Script 包裝成 .zip 檔。請參閱下列範例：

將 Script 壓縮成 .zip 檔案，其中包含頂端資料夾 bundled 及主要檔案 bundled/mytest.js。
```
zip -r bundledtest.zip bundled
```
或者，將所有 Script 與主要檔 mytest.js一起包裝成 .zip 檔。
```
zip -r bundledtest.zip * 
```

Selenium IDE Script

Selenium IDE Script 是 Selenium IDE 記錄的 Script。

瀏覽器 Script 範例

Instana Synthetic 提供許多範例，可協助您快速開始使用或撰寫您自己的瀏覽器測試。

若要開始使用，請參閱下列範例:

瀏覽器 Script 測試和除錯

Instana Synthetic 提供 Node.js 指令行應用程式 synthetic-browser-script，以協助使用者在本端開發、測試或除錯瀏覽器測試 Script。

synthetic-browser-script 應用程式現在可在 GitHub 及 npmjs 網站中找到。

它是 Instana Synthetic 的本端執行程式，可協助您進行 Synthetic 瀏覽器測試。
它隨附許多範例，可協助您快速撰寫自己的瀏覽器測試。將新增更多範例。

在下列情況下，您可以使用 synthetic-browser-script 本端執行程式:

您需要本端執行程式，才能使用 CLI 來測試及除錯瀏覽器 Script。
您需要提供所有 Instana Synthetic 瀏覽器測試 API 的 npm 套件。
對於所有瀏覽器測試 API ，您需要 VS Code 中的「程式碼完成」或「程式碼提示」。
您需要開啟完整瀏覽器來完成測試動作，並證明 Script 的品質。
您需要在本端重新產生測試失敗，以協助除錯主要原因。
您需要從瀏覽器測試 API 的範例中學習，然後根據這些範例撰寫您自己的瀏覽器測試。