Sentry 的瀏覽器 SDK 的集成測(cè)試在內(nèi)部使用 Playwright。這些測(cè)試在 Chromium、Firefox 和 Webkit 的最新穩(wěn)定版本上運(yùn)行。

https://playwright.dev/

結(jié)構(gòu)

測(cè)試按其范圍分組，例如 breadcrumbs 或 onunhandledrejection。在每組測(cè)試中，都有多個(gè)包含測(cè)試用例及其可選支持資源的文件夾。

每個(gè)用例組都有一個(gè)名為 template.hbs 的默認(rèn) HTML skeleton，以及一個(gè)名為 init.js 的默認(rèn)初始化腳本，其中包含 Sentry.init() 調(diào)用。當(dāng)特定的 template.hbs 或 init.js 未在用例文件夾中定義時(shí)，這些默認(rèn)值用作后備。

subject.js 包含設(shè)置要測(cè)試的環(huán)境的邏輯。它也可以在本地定義并作為組后備。與 template.hbs 和 init.js 不同，它不需要為組定義，因?yàn)榭赡艽嬖诓恍枰?subject 的情況，而是使用 utils/helpers.ts 中的 injectScriptAndGetEvents 注入邏輯。

每個(gè)測(cè)試用例都需要 test.ts，其中包含斷言(如果需要，還需要腳本注入邏輯)。對(duì)于每種情況，任何一組 init.js、template.hbs 和 subject.js 都可以在本地定義，并且它們中的每一個(gè)都將優(yōu)先于測(cè)試組的默認(rèn)定義。

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

編寫測(cè)試

Helpers

utils/helpers.ts 包含可以在斷言中使用的 helper(test.ts)。這些 helper 定義了一個(gè)方便可靠的 API 來(lái)與 Playwright 的原生 API 進(jìn)行交互。強(qiáng)烈建議在 helper 中定義所有常見(jiàn)的 Playwright 使用模式。

Fixtures

Fixtures 允許我們?cè)跀嘌越M(test.ts 文件)中定義全局和特定于測(cè)試的信息。在當(dāng)前狀態(tài)下，fixtures.ts 包含對(duì) Playwright 的 test() 函數(shù)的 pure 版本的擴(kuò)展。所有測(cè)試都應(yīng)該從 utils/fixtures.ts 而不是 @playwright/test 導(dǎo)入 sentryTest 函數(shù)，以便能夠訪問(wèn)額外的 fixtures。

??https://playwright.dev/docs/api/class-fixtures??

在本地運(yùn)行測(cè)試

可以使用最新版本的 Chromium 在本地運(yùn)行測(cè)試：

yarn test

要使用不同的瀏覽器(例如 firefox 或 webkit)運(yùn)行測(cè)試：

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

或者在所有三個(gè)瀏覽器上運(yùn)行：

yarn test --browser='all'

按 title 過(guò)濾測(cè)試：

yarn test -g "XMLHttpRequest without any handlers set"

您可以參考 Playwright 文檔了解其他 CLI 選項(xiàng)。

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

故障排除

除了特定于 Playwright 的問(wèn)題外，以下是為 Sentry Browser SDK 編寫測(cè)試時(shí)可能出現(xiàn)的常見(jiàn)問(wèn)題。

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

不穩(wěn)定的測(cè)試

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

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

構(gòu)建錯(cuò)誤

在運(yùn)行之前，每個(gè)測(cè)試用例的頁(yè)面都會(huì)在 dist 內(nèi)的 case 文件夾下構(gòu)建。如果頁(yè)面構(gòu)建失敗，建議檢查：

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

實(shí)戰(zhàn)

進(jìn)入 sentry-javascript 項(xiàng)目：

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

安裝依賴

cd sentry-javascript
yarn
yarn lerna bootstrap
yarn build

Playwright 運(yùn)行集成測(cè)試

進(jìn)入集成測(cè)試軟件包 sentry-javascript/packages/integration-tests：

cd packages/integration-tests

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