Sentry 開發者貢獻指南 - 瀏覽器 SDK 整合測試

為少發表於2022-01-20
瀏覽器

Sentry 的瀏覽器 SDK 的整合測試在內部使用 Playwright。這些測試在 Chromium、Firefox 和 Webkit 的最新穩定版本上執行。

結構

測試按其範圍分組，例如 breadcrumbs 或 onunhandledrejection。在每組測試中，都有多個包含測試用例及其可選支援資源的資料夾。

每個用例組都有一個名為 template.hbs 的預設 HTML skeleton，以及一個名為 init.js 的預設初始化指令碼，其中包含 Sentry.init() 呼叫。當特定的 template.hbs 或 init.js 未在用例資料夾中定義時，這些預設值用作後備。

subject.js 包含設定要測試的環境的邏輯。它也可以在本地定義並作為組後備。與 template.hbs 和 init.js 不同，它不需要為組定義，因為可能存在不需要 subject 的情況，而是使用 utils/helpers.ts 中的 injectScriptAndGetEvents 注入邏輯。

每個測試用例都需要 test.ts，其中包含斷言（如果需要，還需要指令碼注入邏輯）。對於每種情況，任何一組 init.js、template.hbs 和 subject.js 都可以在本地定義，並且它們中的每一個都將優先於測試組的預設定義。

suites/
|---- breadcrumbs/
      |---- template.hbs [麵包屑測試的 fallback 模板]
      |---- init.js [麵包屑測試的 fallback init]
      |---- subject.js [麵包屑測試的可選 fallback subject]
      |---- click_event_tree/
            |---- template.hbs [可選用例特定模板]
            |---- init.js [可選的特定於用例的 init]
            |---- subject.js [可選案例特定 subject]
            |---- test.ts [斷言]

編寫測試

Helpers

utils/helpers.ts 包含可以在斷言中使用的 helper（test.ts）。這些 helper 定義了一個方便可靠的 API 來與 Playwright 的原生 API 進行互動。強烈建議在 helper 中定義所有常見的 Playwright 使用模式。

Fixtures

Fixtures 允許我們在斷言組（test.ts 檔案）中定義全域性和特定於測試的資訊。在當前狀態下，fixtures.ts 包含對 Playwright 的 test() 函式的 pure 版本的擴充套件。所有測試都應該從 utils/fixtures.ts 而不是 @playwright/test 匯入 sentryTest 函式，以便能夠訪問額外的 fixtures。

在本地執行測試

可以使用最新版本的 Chromium 在本地執行測試：

yarn test

要使用不同的瀏覽器（例如 firefox 或 webkit）執行測試：

yarn test --browser='firefox'
yarn test --browser='webkit'

或者在所有三個瀏覽器上執行：

yarn test --browser='all'

按 title 過濾測試：

yarn test -g "XMLHttpRequest without any handlers set"

您可以參考 Playwright 文件瞭解其他 CLI 選項。

故障排除

除了特定於 Playwright 的問題外，以下是為 Sentry Browser SDK 編寫測試時可能出現的常見問題。

  • 不穩定的測試

    如果測試隨機失敗，給出 Page Closed、Target Closed 或類似錯誤，大多數情況下，原因是 subject 中定義的 page action 與 Sentry event/request 的偵聽器之間存在競爭條件。建議首先檢查 utils/helpers.ts 是否可以用其中一個 helper 替換非同步邏輯。如果不是，是否可以由 Promise.all 編排等待（或在某些情況下故意非等待）的 Playwright 方法。不建議手動定義等待邏輯，例如超時，並且在大多數情況下不需要。

  • 構建錯誤

    在執行之前，每個測試用例的頁面都會在 dist 內的 case 資料夾下構建。如果頁面構建失敗，建議檢查：

    • 測試組是否定義了預設的 template.hbs 和 init.js。
    • 測試用例是否定義了 subject.js。
    • init.js 或 subject.js 中的任何一個是否包含非瀏覽器程式碼。
    • webpack 配置是否有效。

實戰

進入 sentry-javascript 專案：

安裝依賴

cd sentry-javascript
yarn
yarn lerna bootstrap
yarn build

Playwright 執行整合測試

進入整合測試軟體包 sentry-javascript/packages/integration-tests：

cd packages/integration-tests

# PWDEBUG=1 yarn test -> 開啟 Playwright Inspector
yarn test

更多

相關文章