則)
OHIF Viewer Playwright 頁面對象Page Object體系指南fixture 注入、訪問慣例與擴展規(guī)則【免費下載鏈接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages項目地址: https://gitcode.com/GitHub_Trending/vi/Viewers導讀OHIF Viewer 的端到端測試不是普通的 Playwright 腳本而是一套建立在自定義 fixture 注入與頁面對象Page Object之上的體系。本指南以.agents/skills/ohif-test-agent/references/page-objects.md為骨架結合tests/pages/下的真實源碼系統(tǒng)講解如何發(fā)現(xiàn)頁面對象 API、六種 fixture 鍵的正確解構方式、視口包裝器與視口實例的區(qū)別、面板訪問三步慣例以及當控件未被覆蓋時如何擴展頁面對象而不是在 spec 里內聯(lián)裸選擇器。讀完你不僅能讀懂任何現(xiàn)有 spec還能以與既有代碼無差別的方式為 OHIF 測試套件新增頁面對象能力。一、這份文檔的定位只記錄源碼無法直接推導的穩(wěn)定規(guī)則page-objects.md 開篇就劃清了邊界它故意不列出任何類的方法清單只記錄那些僅讀單個源碼文件無法推導出來的結構性規(guī)則。原因很直白——類在持續(xù)演進任何靜態(tài)方法表都會在重構發(fā)生的那一刻過期而源碼不會。因此本文檔確立的第一原則是關于任何類當前的方法與屬性以tests/pages/下的源碼為唯一權威。頁面對象文件的命名與類名一一對應ViewportPageObject在 tests/pages/ViewportPageObject.tsMainToolbarPageObject在 tests/pages/MainToolbarPageObject.ts等等。所有這些類統(tǒng)一從 tests/pages/index.ts 的 barrel 導出。文檔只記錄四類穩(wěn)定規(guī)則本文接下來逐條展開fixture 鍵的拼寫區(qū)分大小寫哪些頁面對象通過 fixture 注入、哪些通過訪問器到達視口包裝器與視口實例、面板訪問順序、布局標識符、子工具下拉等訪問慣例控件未被覆蓋時的擴展約定。二、如何發(fā)現(xiàn)頁面對象的 API文檔給出了四條發(fā)現(xiàn)路徑是讀源碼方法論的具體化按類名定位文件在tests/pages/下找到對應類文件名與類名一致。從頭到尾通讀一遍大多數(shù)類只有幾百行一次讀完成本很低。留意組合子對象有些類會組合其他頁面對象。例如RightPanelPageObject內部持有measurementsPanel、contourSegmentationPanel、labelMapSegmentationPanel、tmtvPanel、microscopyPanel等子面板——這些子對象通常位于同一文件或tests/pages/的兄弟文件中。在 tests/pages/RightPanelPageObject.ts 中可以看到這些子面板全部通過類內的 getter 暴露并共享getPanelRowDataObject、getPanelRowByIdx、getPanelRowByText等私有行級方法。用真實調用驗證簽名grep tests/或在 patterns-by-feature.md 列出的種子 spec 中查看實際用法。真實用法永遠比手寫簽名可靠因為 spec 與 API 是協(xié)同演進的。這條方法論也呼應了整個 skill 的設計理念不要試圖從參考文件記憶方法面參考文件只負責把你導向正確的源碼文件。三、Fixture 注入的頁面對象鍵名區(qū)分大小寫3.1 六個 fixture 鍵這些頁面對象通過 tests/utils/fixture.ts 注入測試函數(shù)。測試函數(shù)的第一個參數(shù)對象形式解構它們即可——絕不能手動newtest(my test, async ({ page, viewportPageObject, mainToolbarPageObject, leftPanelPageObject, rightPanelPageObject, DOMOverlayPageObject, // 注意大寫 D notFoundStudyPageObject, }) { ... });六個鍵及注意事項Fixture 鍵注入的類viewportPageObjectViewportPageObjectmainToolbarPageObjectMainToolbarPageObjectleftPanelPageObjectLeftPanelPageObjectrightPanelPageObjectRightPanelPageObjectDOMOverlayPageObjectDOMOverlayPageObject大寫 DnotFoundStudyPageObjectNotFoundStudyPageObject3.2 為什么不能newfixture 負責接線fixture.ts的源碼揭示了原因。它基于playwright-test-coverage的test擴展出 fixture每個頁面對象在創(chuàng)建時被綁定到當前測試的pageviewportPageObject: async ({ page }, use) { await use(new ViewportPageObject(page)); }, DOMOverlayPageObject: async ({ page }, use) { await use(new DOMOverlayPageObject(page)); },手動new ViewportPageObject(page)會跳過這層接線導致某些子對象無法正確解析到正確的page。此外 fixture 還自動注入了_applyGlobalE2EOHIFBaselineauto: true在每次測試前通過addOHIFConfiguration應用全局 E2E 基線配置。3.3 大寫 D 的坑DOMOverlayPageObject的D 必須大寫。文檔特別提示解構出undefined且毫無報錯靜默失敗的情況幾乎總是這里的大小寫筆誤——因為 fixture 鍵不存在時解構只是得到undefinedTypeScript 不會在運行時幫你兜底。3.4 fixture 文件更新時如果 fixture 文件更新、新增了鍵它們會第一時間出現(xiàn)在fixture.ts的類型定義PageObjects中。文檔建議如果感覺有東西缺失先去查 fixture 文件而不是猜。四、非 fixture 注入的頁面對象通過訪問器到達有兩個頁面對象類不通過 fixture 注入而是經(jīng)由某個注入的 fixture 到達頁面對象到達路徑DicomTagBrowserPageObjectDOMOverlayPageObject.dialog.dicomTagBrowserDataOverlayPageObjectviewportPageObject.getById(viewportId).overlayMenu.dataOverlay源碼驗證在 tests/pages/DOMOverlayPageObject.ts 中dialoggetter 里直接return new DicomTagBrowserPageObject(page)在 tests/pages/ViewportPageObject.ts 的getOverlayMenu中dataOverlay通過new DataOverlayPageObject(this.page, await this.getViewportId(viewport))構造并把視口 ID 一并傳入——這正是DataOverlayPageObject的menu、toggle等方法需要用dataOverlayMenu-${viewportId}-btn這類帶 ID 的測試選擇器定位具體視口菜單的原因見 tests/pages/DataOverlayPageObject.ts。兩個類都可以手動構造如new DataOverlayPageObject(page)文檔也承認測試真的需要全新實例時可以這樣做但訪問器路徑才是慣用法——它保證視口 ID 接線正確。五、視口包裝器 vs 視口實例先取實例再調方法viewportPageObject是一個包裝器它本身不承載交互方法。幾乎所有用例的第一步都是從網(wǎng)格中取一個具體的視口實例await viewportPageObject.active; // 當前聚焦的視口 viewportPageObject.getAll(); // 網(wǎng)格中的所有視口 viewportPageObject.getNth(i); // 第 i 個視口從 0 開始 viewportPageObject.getById(cornerstoneViewportId); // 如 default、ctAXIAL從 ViewportPageObject.ts 源碼看active定位[data-cyviewport-pane][data-is-activetrue]getAll()通過getByTestId(viewport-pane).all()收集全部視口并逐個工廠化getNth(index)走getByTestId(viewport-pane).nth(index)getById(viewportId)使用[data-cyviewport-pane]:has(div[data-viewportid${viewportId}])精確匹配 Cornerstone 視口 ID。工廠方法viewportPageObjectFactory返回的實例才是攜帶交互能力的對象它包含交互clickAt、doubleClickAt、normalizedClickAt、normalizedDragAt、normalizedPathDragAt標注nthAnnotation(nth)返回含click、contextMenu.open、text.click的子對象文本overlayText.topLeft/topRight/bottomLeft/bottomRight每個含windowLevel、instanceNumber覆蓋層overlayMenu.dataOverlay、overlayMenu.orientation、overlayMenu.windowLevel其他orientationMarkers、navigationArrows、sliceNavigationtoSlice/toFirstSlice/toLastSlice/scrollBy、magnifyGlass、pane、svg以及hide/show*Text一組文本顯隱方法。其中sliceNavigation的實現(xiàn)值得一提t(yī)oSlice通過page.evaluate調用window.commandsManager的jumpToImage命令scrollBy則直接操作window.services.cornerstoneViewportService.getCornerstoneViewport(viewportId).scroll(delta)。源碼注釋明確提醒await 這些方法并不保證視口已渲染完成需要像素穩(wěn)定狀態(tài)時還得配合waitForViewportsRendered。文檔給出的核心建議是先取視口實例再在實例上調用方法——直接對包裝器調用交互方法是個常見誤區(qū)。六、面板訪問順序三步慣例rightPanelPageObject的每個子面板都遵循同一個三步慣例打開側邊面板toggle()選中子面板標簽頁.select()與.panel.*交互。文檔指出跳過前兩步是element not found類失敗最常見的原因。規(guī)范示例await rightPanelPageObject.toggle(); await rightPanelPageObject.measurementsPanel.select(); const count await rightPanelPageObject.measurementsPanel.panel.getMeasurementCount();從源碼看toggle()點擊side-panel-header-right打開右側面板measurementsPanel.select()點擊trackedMeasurements-btn隨后通過panel.getMeasurementCount()、panel.nthMeasurement(i)讀取測量行。行級子對象暴露actions.rename|delete|toggleLock|duplicate、title、lockIcon、toggleVisibility、click()跳轉到該測量等能力。各面板的行/操作方法各不相同——需要哪個就看對應源碼文件。子面板全貌RightPanelPageObject.tsmeasurementsPanel測量列表contourSegmentationPanel輪廓分割RTSTRUCT含tools.splineContour/livewireContour/freehandContour、config、combineContours、smoothContourslabelMapSegmentationPanel標簽圖分割SEG含tools.brush/eraser/threshold每個工具都帶setRadius與config透明度、邊框、非活動段透明度noToolsSegmentationPanel無工具的分割面板tmtvPanelTMTV 面板exportTmtvCsvReport、tools.brush、tools.rectangleROIThresholdmicroscopyPanel顯微鏡測量面板。七、布局標識符是 camelCase JS 屬性布局選擇通過mainToolbarPageObject.layoutSelection.layout.click()完成布局必須以camelCase 屬性名訪問await mainToolbarPageObject.layoutSelection.threeDFourUp.click(); await mainToolbarPageObject.layoutSelection.axialPrimary.click();不要用方括號轉義的 DICOM 風格字符串如[3DFourUp]。這是類暴露工具的方式所強制的約定。從 MainToolbarPageObject.ts 源碼看layoutSelection提供axialPrimaryAxial Primary、MPR、threeDFourUp3D four up、threeDMain3D main、threeDOnly3D only、threeDPrimary3D primary通用的grid(cols, rows)點擊Layout后按下Layout-${cols-1}-${rows-1}的測試選擇器實現(xiàn)任意網(wǎng)格布局底層的button與click()只打開布局菜單。每個具名布局的click()都封裝了先打開 Layout 菜單、再點具體布局兩步。八、子工具自動打開所屬下拉菜單嵌套在工具欄下拉菜單中的工具測量工具、更多工具、布局各自暴露的.click()會自動幫你打開父級菜單——幾乎不需要先手動展開菜單await mainToolbarPageObject.measurementTools.length.click(); // 展開 選中一步完成從源碼看measurementTools的每個子工具 getter 都遵循同一模式await measurementTools.click()點擊MeasurementTools-split-button-secondary展開下拉然后await button.click()點擊具體工具項。覆蓋的工具包括arrowAnnotate、bidirectional、circleROI、ellipticalROI、length、livewireContour、rectangleROI、splineROI、freehandROI以及顯微鏡專用的line.last()定位下拉中的菜單項而非分裂按鈕主區(qū)兩者共用同一>// spec 只描述意圖 await DOMOverlayPageObject.optionsMenu.settings.click(); await DOMOverlayPageObject.dialog.userPreferences.hotkey(Zoom).set(q); await mainToolbarPageObject.zoom.click(); // 在視口上拖拽并斷言縮放真實生效這與 SKILL.md 中斷言真實效果而非僅斷言data-active屬性的原則一脈相承按鈕點亮不等于縮放生效要在視口上拖拽并用視口級截圖或可度量的狀態(tài)變化來驗證。十、頁面對象地圖每個類負責什么下表用于幫助你選擇打開哪個文件而非枚舉方法任何具體方法的權威來源仍是.ts文件本身。類文件覆蓋范圍ViewportPageObjecttests/pages/ViewportPageObject.tsCornerstone 視口——點擊、拖拽、覆蓋層、標注、十字線MainToolbarPageObjecttests/pages/MainToolbarPageObject.ts頂部工具欄——測量工具、更多工具、布局、十字線、平移LeftPanelPageObjecttests/pages/LeftPanelPageObject.ts研究瀏覽器——縮略圖、按模態(tài)或描述加載系列RightPanelPageObjecttests/pages/RightPanelPageObject.ts側面板——測量、輪廓分割、標簽圖分割、TMTV、顯微鏡DOMOverlayPageObjecttests/pages/DOMOverlayPageObject.tsDOM 覆蓋層——對話框、hydration/跟蹤提示、右鍵菜單、標簽瀏覽器訪問器NotFoundStudyPageObjecttests/pages/NotFoundStudyPageObject.ts研究未找到錯誤頁DicomTagBrowserPageObjecttests/pages/DicomTagBrowserPageObject.ts標簽瀏覽器對話框非 fixture經(jīng)DOMOverlayPageObject.dialog到達DataOverlayPageObjecttests/pages/DataOverlayPageObject.ts數(shù)據(jù)覆蓋層菜單非 fixture經(jīng)viewport.overlayMenu到達如果目錄新增或重命名了文件那個 diff 是第一線索這張表是第二線索——以目錄為準。這與文檔開篇源碼永遠權威的立場完全一致表格的價值在于引導不在于充當靜態(tài)目錄。十一、實戰(zhàn)串聯(lián)讀透一個種子 spec把以上規(guī)則放到一個真實用例里驗證。tests/Length.spec.ts 是簡單測量工具的種子 spec幾乎用到了本文所有規(guī)則test.beforeEach(async ({ page }) { const studyInstanceUID 1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5; const mode viewer; await visitStudy(page, studyInstanceUID, mode, 2000); }); test(should display the length tool, async ({ page, DOMOverlayPageObject, // 大寫 D 的 fixture 鍵 mainToolbarPageObject, rightPanelPageObject, viewportPageObject, }) { await mainToolbarPageObject.measurementTools.length.click(); // 子工具自動展開下拉 const activeViewport await viewportPageObject.active; // 先取視口實例 await activeViewport.clickAt([ { x: 364, y: 234 }, { x: 544, y: 232 }, ]); await DOMOverlayPageObject.viewport.measurementTracking.confirm.click(); // 首次測量觸發(fā)跟蹤提示 await checkForViewportScreenshot({ page, viewport: activeViewport, screenshotPath: screenShotPaths.length.lengthDisplayedCorrectly, }); await rightPanelPageObject.measurementsPanel.select(); // 面板訪問select 后交互 // ... 通過 expectAnnotationStatsText 同時斷言面板統(tǒng)計與 SVG 文本 });對照規(guī)則逐條印證fixture 解構六個鍵從./utils導入的test中解構DOMOverlayPageObject大寫 D包裝器 → 實例viewportPageObject.active先取活動視口再在實例上clickAt子工具下拉measurementTools.length.click()一步完成展開與選中hydration/跟蹤提示首次測量后點擊measurementTracking.confirm面板三步measurementsPanel.select()后通過.panel斷言截圖對象形式 視口級范圍checkForViewportScreenshot捕獲視口自動隱藏覆蓋層文本路徑使用screenShotPaths.category.name鍵而非手寫字符串。這套規(guī)則同樣適用于更復雜的場景RTSTRUCT 輪廓用rightPanelPageObject.contourSegmentationPanel.panel.nthSegment(i)/.segmentByText(Small Sphere)SEG 標簽圖用labelMapSegmentationPanel.tools.brush.setRadius(n)3D/MPR 布局用layoutSelection.threeDFourUp.click()DICOM 標簽瀏覽器用mainToolbarPageObject.moreTools.tagBrowser.click()后經(jīng)DOMOverlayPageObject.dialog.dicomTagBrowser交互。每個功能區(qū)的種子 spec 索引都收錄在 patterns-by-feature.md 中編寫新測試前按圖索驥即可。結語OHIF 的頁面對象體系用一個原則貫穿始終源碼是權威spec 是活文檔參考文件只記錄規(guī)則。掌握 fixture 鍵的拼寫、包裝器與實例的區(qū)分、面板訪問三步慣例、camelCase 布局訪問與子工具自動下拉這些穩(wěn)定規(guī)則之后無論是閱讀現(xiàn)有測試還是為套件新增覆蓋你都能自然地落入既有模式——新增控件時擴展頁面對象、補充data-cy、鏡像既有形狀讓 spec 保持讀起來是步驟而不是選擇器的長期可維護性?！久赓M下載鏈接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages項目地址: https://gitcode.com/GitHub_Trending/vi/Viewers創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 OHIF Viewer Playwright 頁面對象（Page Object）體系指南：fixture 注入、訪問慣例與擴展規(guī)則
OHIF Viewer Playwright 頁面對象Page Object體系指南fixture 注入、訪問慣例與擴展規(guī)則【免費下載鏈接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages項目地址: https://gitcode.com/GitHub_Trending/vi/Viewers導讀OHIF Viewer 的端到端測試不是普通的 Playwright 腳本而是一套建立在自定義 fixture 注入與頁面對象Page Object之上的體系。本指南以.agents/skills/ohif-test-agent/references/page-objects.md為骨架結合tests/pages/下的真實源碼系統(tǒng)講解如何發(fā)現(xiàn)頁面對象 API、六種 fixture 鍵的正確解構方式、視口包裝器與視口實例的區(qū)別、面板訪問三步慣例以及當控件未被覆蓋時如何擴展頁面對象而不是在 spec 里內聯(lián)裸選擇器。讀完你不僅能讀懂任何現(xiàn)有 spec還能以與既有代碼無差別的方式為 OHIF 測試套件新增頁面對象能力。一、這份文檔的定位只記錄源碼無法直接推導的穩(wěn)定規(guī)則page-objects.md 開篇就劃清了邊界它故意不列出任何類的方法清單只記錄那些僅讀單個源碼文件無法推導出來的結構性規(guī)則。原因很直白——類在持續(xù)演進任何靜態(tài)方法表都會在重構發(fā)生的那一刻過期而源碼不會。因此本文檔確立的第一原則是關于任何類當前的方法與屬性以tests/pages/下的源碼為唯一權威。頁面對象文件的命名與類名一一對應ViewportPageObject在 tests/pages/ViewportPageObject.tsMainToolbarPageObject在 tests/pages/MainToolbarPageObject.ts等等。所有這些類統(tǒng)一從 tests/pages/index.ts 的 barrel 導出。文檔只記錄四類穩(wěn)定規(guī)則本文接下來逐條展開fixture 鍵的拼寫區(qū)分大小寫哪些頁面對象通過 fixture 注入、哪些通過訪問器到達視口包裝器與視口實例、面板訪問順序、布局標識符、子工具下拉等訪問慣例控件未被覆蓋時的擴展約定。二、如何發(fā)現(xiàn)頁面對象的 API文檔給出了四條發(fā)現(xiàn)路徑是讀源碼方法論的具體化按類名定位文件在tests/pages/下找到對應類文件名與類名一致。從頭到尾通讀一遍大多數(shù)類只有幾百行一次讀完成本很低。留意組合子對象有些類會組合其他頁面對象。例如RightPanelPageObject內部持有measurementsPanel、contourSegmentationPanel、labelMapSegmentationPanel、tmtvPanel、microscopyPanel等子面板——這些子對象通常位于同一文件或tests/pages/的兄弟文件中。在 tests/pages/RightPanelPageObject.ts 中可以看到這些子面板全部通過類內的 getter 暴露并共享getPanelRowDataObject、getPanelRowByIdx、getPanelRowByText等私有行級方法。用真實調用驗證簽名grep tests/或在 patterns-by-feature.md 列出的種子 spec 中查看實際用法。真實用法永遠比手寫簽名可靠因為 spec 與 API 是協(xié)同演進的。這條方法論也呼應了整個 skill 的設計理念不要試圖從參考文件記憶方法面參考文件只負責把你導向正確的源碼文件。三、Fixture 注入的頁面對象鍵名區(qū)分大小寫3.1 六個 fixture 鍵這些頁面對象通過 tests/utils/fixture.ts 注入測試函數(shù)。測試函數(shù)的第一個參數(shù)對象形式解構它們即可——絕不能手動newtest(my test, async ({ page, viewportPageObject, mainToolbarPageObject, leftPanelPageObject, rightPanelPageObject, DOMOverlayPageObject, // 注意大寫 D notFoundStudyPageObject, }) { ... });六個鍵及注意事項Fixture 鍵注入的類viewportPageObjectViewportPageObjectmainToolbarPageObjectMainToolbarPageObjectleftPanelPageObjectLeftPanelPageObjectrightPanelPageObjectRightPanelPageObjectDOMOverlayPageObjectDOMOverlayPageObject大寫 DnotFoundStudyPageObjectNotFoundStudyPageObject3.2 為什么不能newfixture 負責接線fixture.ts的源碼揭示了原因。它基于playwright-test-coverage的test擴展出 fixture每個頁面對象在創(chuàng)建時被綁定到當前測試的pageviewportPageObject: async ({ page }, use) { await use(new ViewportPageObject(page)); }, DOMOverlayPageObject: async ({ page }, use) { await use(new DOMOverlayPageObject(page)); },手動new ViewportPageObject(page)會跳過這層接線導致某些子對象無法正確解析到正確的page。此外 fixture 還自動注入了_applyGlobalE2EOHIFBaselineauto: true在每次測試前通過addOHIFConfiguration應用全局 E2E 基線配置。3.3 大寫 D 的坑DOMOverlayPageObject的D 必須大寫。文檔特別提示解構出undefined且毫無報錯靜默失敗的情況幾乎總是這里的大小寫筆誤——因為 fixture 鍵不存在時解構只是得到undefinedTypeScript 不會在運行時幫你兜底。3.4 fixture 文件更新時如果 fixture 文件更新、新增了鍵它們會第一時間出現(xiàn)在fixture.ts的類型定義PageObjects中。文檔建議如果感覺有東西缺失先去查 fixture 文件而不是猜。四、非 fixture 注入的頁面對象通過訪問器到達有兩個頁面對象類不通過 fixture 注入而是經(jīng)由某個注入的 fixture 到達頁面對象到達路徑DicomTagBrowserPageObjectDOMOverlayPageObject.dialog.dicomTagBrowserDataOverlayPageObjectviewportPageObject.getById(viewportId).overlayMenu.dataOverlay源碼驗證在 tests/pages/DOMOverlayPageObject.ts 中dialoggetter 里直接return new DicomTagBrowserPageObject(page)在 tests/pages/ViewportPageObject.ts 的getOverlayMenu中dataOverlay通過new DataOverlayPageObject(this.page, await this.getViewportId(viewport))構造并把視口 ID 一并傳入——這正是DataOverlayPageObject的menu、toggle等方法需要用dataOverlayMenu-${viewportId}-btn這類帶 ID 的測試選擇器定位具體視口菜單的原因見 tests/pages/DataOverlayPageObject.ts。兩個類都可以手動構造如new DataOverlayPageObject(page)文檔也承認測試真的需要全新實例時可以這樣做但訪問器路徑才是慣用法——它保證視口 ID 接線正確。五、視口包裝器 vs 視口實例先取實例再調方法viewportPageObject是一個包裝器它本身不承載交互方法。幾乎所有用例的第一步都是從網(wǎng)格中取一個具體的視口實例await viewportPageObject.active; // 當前聚焦的視口 viewportPageObject.getAll(); // 網(wǎng)格中的所有視口 viewportPageObject.getNth(i); // 第 i 個視口從 0 開始 viewportPageObject.getById(cornerstoneViewportId); // 如 default、ctAXIAL從 ViewportPageObject.ts 源碼看active定位[data-cyviewport-pane][data-is-activetrue]getAll()通過getByTestId(viewport-pane).all()收集全部視口并逐個工廠化getNth(index)走getByTestId(viewport-pane).nth(index)getById(viewportId)使用[data-cyviewport-pane]:has(div[data-viewportid${viewportId}])精確匹配 Cornerstone 視口 ID。工廠方法viewportPageObjectFactory返回的實例才是攜帶交互能力的對象它包含交互clickAt、doubleClickAt、normalizedClickAt、normalizedDragAt、normalizedPathDragAt標注nthAnnotation(nth)返回含click、contextMenu.open、text.click的子對象文本overlayText.topLeft/topRight/bottomLeft/bottomRight每個含windowLevel、instanceNumber覆蓋層overlayMenu.dataOverlay、overlayMenu.orientation、overlayMenu.windowLevel其他orientationMarkers、navigationArrows、sliceNavigationtoSlice/toFirstSlice/toLastSlice/scrollBy、magnifyGlass、pane、svg以及hide/show*Text一組文本顯隱方法。其中sliceNavigation的實現(xiàn)值得一提t(yī)oSlice通過page.evaluate調用window.commandsManager的jumpToImage命令scrollBy則直接操作window.services.cornerstoneViewportService.getCornerstoneViewport(viewportId).scroll(delta)。源碼注釋明確提醒await 這些方法并不保證視口已渲染完成需要像素穩(wěn)定狀態(tài)時還得配合waitForViewportsRendered。文檔給出的核心建議是先取視口實例再在實例上調用方法——直接對包裝器調用交互方法是個常見誤區(qū)。六、面板訪問順序三步慣例rightPanelPageObject的每個子面板都遵循同一個三步慣例打開側邊面板toggle()選中子面板標簽頁.select()與.panel.*交互。文檔指出跳過前兩步是element not found類失敗最常見的原因。規(guī)范示例await rightPanelPageObject.toggle(); await rightPanelPageObject.measurementsPanel.select(); const count await rightPanelPageObject.measurementsPanel.panel.getMeasurementCount();從源碼看toggle()點擊side-panel-header-right打開右側面板measurementsPanel.select()點擊trackedMeasurements-btn隨后通過panel.getMeasurementCount()、panel.nthMeasurement(i)讀取測量行。行級子對象暴露actions.rename|delete|toggleLock|duplicate、title、lockIcon、toggleVisibility、click()跳轉到該測量等能力。各面板的行/操作方法各不相同——需要哪個就看對應源碼文件。子面板全貌RightPanelPageObject.tsmeasurementsPanel測量列表contourSegmentationPanel輪廓分割RTSTRUCT含tools.splineContour/livewireContour/freehandContour、config、combineContours、smoothContourslabelMapSegmentationPanel標簽圖分割SEG含tools.brush/eraser/threshold每個工具都帶setRadius與config透明度、邊框、非活動段透明度noToolsSegmentationPanel無工具的分割面板tmtvPanelTMTV 面板exportTmtvCsvReport、tools.brush、tools.rectangleROIThresholdmicroscopyPanel顯微鏡測量面板。七、布局標識符是 camelCase JS 屬性布局選擇通過mainToolbarPageObject.layoutSelection.layout.click()完成布局必須以camelCase 屬性名訪問await mainToolbarPageObject.layoutSelection.threeDFourUp.click(); await mainToolbarPageObject.layoutSelection.axialPrimary.click();不要用方括號轉義的 DICOM 風格字符串如[3DFourUp]。這是類暴露工具的方式所強制的約定。從 MainToolbarPageObject.ts 源碼看layoutSelection提供axialPrimaryAxial Primary、MPR、threeDFourUp3D four up、threeDMain3D main、threeDOnly3D only、threeDPrimary3D primary通用的grid(cols, rows)點擊Layout后按下Layout-${cols-1}-${rows-1}的測試選擇器實現(xiàn)任意網(wǎng)格布局底層的button與click()只打開布局菜單。每個具名布局的click()都封裝了先打開 Layout 菜單、再點具體布局兩步。八、子工具自動打開所屬下拉菜單嵌套在工具欄下拉菜單中的工具測量工具、更多工具、布局各自暴露的.click()會自動幫你打開父級菜單——幾乎不需要先手動展開菜單await mainToolbarPageObject.measurementTools.length.click(); // 展開 選中一步完成從源碼看measurementTools的每個子工具 getter 都遵循同一模式await measurementTools.click()點擊MeasurementTools-split-button-secondary展開下拉然后await button.click()點擊具體工具項。覆蓋的工具包括arrowAnnotate、bidirectional、circleROI、ellipticalROI、length、livewireContour、rectangleROI、splineROI、freehandROI以及顯微鏡專用的line.last()定位下拉中的菜單項而非分裂按鈕主區(qū)兩者共用同一>// spec 只描述意圖 await DOMOverlayPageObject.optionsMenu.settings.click(); await DOMOverlayPageObject.dialog.userPreferences.hotkey(Zoom).set(q); await mainToolbarPageObject.zoom.click(); // 在視口上拖拽并斷言縮放真實生效這與 SKILL.md 中斷言真實效果而非僅斷言data-active屬性的原則一脈相承按鈕點亮不等于縮放生效要在視口上拖拽并用視口級截圖或可度量的狀態(tài)變化來驗證。十、頁面對象地圖每個類負責什么下表用于幫助你選擇打開哪個文件而非枚舉方法任何具體方法的權威來源仍是.ts文件本身。類文件覆蓋范圍ViewportPageObjecttests/pages/ViewportPageObject.tsCornerstone 視口——點擊、拖拽、覆蓋層、標注、十字線MainToolbarPageObjecttests/pages/MainToolbarPageObject.ts頂部工具欄——測量工具、更多工具、布局、十字線、平移LeftPanelPageObjecttests/pages/LeftPanelPageObject.ts研究瀏覽器——縮略圖、按模態(tài)或描述加載系列RightPanelPageObjecttests/pages/RightPanelPageObject.ts側面板——測量、輪廓分割、標簽圖分割、TMTV、顯微鏡DOMOverlayPageObjecttests/pages/DOMOverlayPageObject.tsDOM 覆蓋層——對話框、hydration/跟蹤提示、右鍵菜單、標簽瀏覽器訪問器NotFoundStudyPageObjecttests/pages/NotFoundStudyPageObject.ts研究未找到錯誤頁DicomTagBrowserPageObjecttests/pages/DicomTagBrowserPageObject.ts標簽瀏覽器對話框非 fixture經(jīng)DOMOverlayPageObject.dialog到達DataOverlayPageObjecttests/pages/DataOverlayPageObject.ts數(shù)據(jù)覆蓋層菜單非 fixture經(jīng)viewport.overlayMenu到達如果目錄新增或重命名了文件那個 diff 是第一線索這張表是第二線索——以目錄為準。這與文檔開篇源碼永遠權威的立場完全一致表格的價值在于引導不在于充當靜態(tài)目錄。十一、實戰(zhàn)串聯(lián)讀透一個種子 spec把以上規(guī)則放到一個真實用例里驗證。tests/Length.spec.ts 是簡單測量工具的種子 spec幾乎用到了本文所有規(guī)則test.beforeEach(async ({ page }) { const studyInstanceUID 1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5; const mode viewer; await visitStudy(page, studyInstanceUID, mode, 2000); }); test(should display the length tool, async ({ page, DOMOverlayPageObject, // 大寫 D 的 fixture 鍵 mainToolbarPageObject, rightPanelPageObject, viewportPageObject, }) { await mainToolbarPageObject.measurementTools.length.click(); // 子工具自動展開下拉 const activeViewport await viewportPageObject.active; // 先取視口實例 await activeViewport.clickAt([ { x: 364, y: 234 }, { x: 544, y: 232 }, ]); await DOMOverlayPageObject.viewport.measurementTracking.confirm.click(); // 首次測量觸發(fā)跟蹤提示 await checkForViewportScreenshot({ page, viewport: activeViewport, screenshotPath: screenShotPaths.length.lengthDisplayedCorrectly, }); await rightPanelPageObject.measurementsPanel.select(); // 面板訪問select 后交互 // ... 通過 expectAnnotationStatsText 同時斷言面板統(tǒng)計與 SVG 文本 });對照規(guī)則逐條印證fixture 解構六個鍵從./utils導入的test中解構DOMOverlayPageObject大寫 D包裝器 → 實例viewportPageObject.active先取活動視口再在實例上clickAt子工具下拉measurementTools.length.click()一步完成展開與選中hydration/跟蹤提示首次測量后點擊measurementTracking.confirm面板三步measurementsPanel.select()后通過.panel斷言截圖對象形式 視口級范圍checkForViewportScreenshot捕獲視口自動隱藏覆蓋層文本路徑使用screenShotPaths.category.name鍵而非手寫字符串。這套規(guī)則同樣適用于更復雜的場景RTSTRUCT 輪廓用rightPanelPageObject.contourSegmentationPanel.panel.nthSegment(i)/.segmentByText(Small Sphere)SEG 標簽圖用labelMapSegmentationPanel.tools.brush.setRadius(n)3D/MPR 布局用layoutSelection.threeDFourUp.click()DICOM 標簽瀏覽器用mainToolbarPageObject.moreTools.tagBrowser.click()后經(jīng)DOMOverlayPageObject.dialog.dicomTagBrowser交互。每個功能區(qū)的種子 spec 索引都收錄在 patterns-by-feature.md 中編寫新測試前按圖索驥即可。結語OHIF 的頁面對象體系用一個原則貫穿始終源碼是權威spec 是活文檔參考文件只記錄規(guī)則。掌握 fixture 鍵的拼寫、包裝器與實例的區(qū)分、面板訪問三步慣例、camelCase 布局訪問與子工具自動下拉這些穩(wěn)定規(guī)則之后無論是閱讀現(xiàn)有測試還是為套件新增覆蓋你都能自然地落入既有模式——新增控件時擴展頁面對象、補充data-cy、鏡像既有形狀讓 spec 保持讀起來是步驟而不是選擇器的長期可維護性?！久赓M下載鏈接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages項目地址: https://gitcode.com/GitHub_Trending/vi/Viewers創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考