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

https://playwright.dev/

結構

測試按其范圍分組，例如 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。

??https://playwright.dev/docs/api/class-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 選項。

• ??https://playwright.dev/docs/test-cli??

故障排除

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

??https://playwright.dev/docs/troubleshooting??

不穩定的測試

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

??http://mdn.io/promise.all??

構建錯誤

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

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

實戰

進入 sentry-javascript 項目：

??https://github.com/getsentry/sentry-javascript.git??

安裝依賴

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