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

為少發表於2022-01-20

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

結構

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

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

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

每個測試用例都需要 test.ts,其中包含斷言(如果需要,還需要指令碼注入邏輯)。對於每種情況,任何一組 init.jstemplate.hbssubject.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 包含可以在斷言中使用的 helpertest.ts)。這些 helper 定義了一個方便可靠的 API 來與 Playwright 的原生 API 進行互動。強烈建議在 helper 中定義所有常見的 Playwright 使用模式。

Fixtures

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

在本地執行測試

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

yarn test

要使用不同的瀏覽器(例如 firefoxwebkit)執行測試:

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 ClosedTarget Closed 或類似錯誤,大多數情況下,原因是 subject 中定義的 page action 與 Sentry event/request 的偵聽器之間存在競爭條件。建議首先檢查 utils/helpers.ts 是否可以用其中一個 helper 替換非同步邏輯。如果不是,是否可以由 Promise.all 編排等待(或在某些情況下故意非等待)的 Playwright 方法。不建議手動定義等待邏輯,例如超時,並且在大多數情況下不需要。

  • 構建錯誤

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

    • 測試組是否定義了預設的 template.hbsinit.js
    • 測試用例是否定義了 subject.js
    • init.jssubject.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

更多

相關文章