解析：從 Fixture 組件到 Playwright 自動(dòng)化驗(yàn)證)
Material UI 端到端測試架構(gòu)解析從 Fixture 組件到 Playwright 自動(dòng)化驗(yàn)證【免費(fèi)下載鏈接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ma/material-ui導(dǎo)讀本篇技術(shù)指南基于 Material UI 倉庫的 test/e2e/README.md系統(tǒng)講解該倉庫如何組織瀏覽器級(jí)端到端測試。E2Eend-to-end測試以真實(shí)瀏覽器 真實(shí)組件 真實(shí)用戶交互的方式驗(yàn)證鍵盤焦點(diǎn)管理FocusTrap、指針事件Select 拖拽、懸浮層Popover等僅靠單元測試難以覆蓋的用戶場景。讀完本文你將理解 Material UI 的Fixture渲染夾具 Instrumentation行為編排兩層測試模式學(xué)會(huì)如何為任意組件新增一條可獨(dú)立運(yùn)行的 e2e 用例并掌握 test/e2e 目錄下的全部命令與調(diào)試技巧。一、測試設(shè)計(jì)的兩層架構(gòu)Material UI 的端到端測試被刻意拆分為兩個(gè)相互獨(dú)立的組成部分這一劃分貫穿整個(gè) test/e2e 目錄的設(shè)計(jì)Rendered UIfixture負(fù)責(zé)渲染什么——一個(gè)獨(dú)立的 React 組件文件展示被測組件在特定交互場景下的最小 UIInstrumentation測試代碼負(fù)責(zé)如何操作——使用 Playwright 在真實(shí)瀏覽器中回放用戶動(dòng)作并對渲染結(jié)果做斷言。這種職責(zé)分離帶來兩個(gè)直接收益fixture 只關(guān)心 UI 狀態(tài)天然接近真實(shí)使用場景肉眼即可在瀏覽器中人工核對測試代碼只關(guān)心交互與斷言與組件實(shí)現(xiàn)細(xì)節(jié)解耦組件重構(gòu)時(shí)無需改動(dòng)測試描述。README 同時(shí)給出了明確的工程約定新增測試時(shí)優(yōu)先新建組件文件而不是修改已有文件因?yàn)楦膭?dòng)既有 fixture 可能在無意識(shí)中改變其他測試的前提條件。全部 Fixture 的自動(dòng)匯聚fixture 的物理存放位置在 test/e2e/fixtures每個(gè)被測組件對應(yīng)一個(gè)子目錄。目錄內(nèi)的聚合邏輯位于 test/e2e/index.jsconst fixtures []; const importFixtures import.meta.glob(./fixtures/**/*.{js,ts,tsx}); Object.keys(importFixtures).forEach((path) { const [suite, name] path .replace(./fixtures/, ) .replace(/\.\w$/, ) .split(/); fixtures.push({ path, suite: e2e/${suite}, name, Component: React.lazy(importFixtures[path]), }); });關(guān)鍵點(diǎn)在于借助 Vite 的import.meta.glob以文件系統(tǒng)約定代替手工注冊fixture 目錄中新增任何*.js/ts/tsx文件都會(huì)被自動(dòng)收集無需改聚合代碼采用兩層目錄命名約定一級(jí)目錄名即套件名suite去掉擴(kuò)展名的文件名即夾具名name最終拼出形如e2e/FocusTrap/OpenFocusTrap的穩(wěn)定標(biāo)識(shí)符這個(gè)標(biāo)識(shí)符正是測試中傳給renderFixture()的參數(shù)每個(gè) fixture 通過React.lazy做代碼分割按需加載保證該應(yīng)用在開發(fā)模式下也能保持輕量。單 Fixture 一個(gè)路由聚合完成后test/e2e/index.js 使用react-router為每個(gè) fixture 注冊一條獨(dú)立路由并用 TestViewer 統(tǒng)一包裹渲染。每條路由的 URL 形如http://localhost:5001/e2e/FocusTrap/OpenFocusTrap。也就是說每個(gè) fixture 都是可通過 URL 直達(dá)、可獨(dú)立驗(yàn)證的頁面。TestViewer 的就緒信號(hào)TestViewer.js 是整個(gè)夾具宿主的關(guān)鍵一環(huán)。它用一個(gè)useEffect把ready置為true模擬act()中被動(dòng)副作用已被刷新的語義然后輸出div aria-busy{!ready}>async function renderFixture(fixturePath: string) { await page.goto(${BASE_URL}/e2e/${fixturePath}#no-dev); await page.waitForSelector([data-testidtestcase]:not([aria-busytrue])); }它做兩件事攜帶#no-dev哈希導(dǎo)航到對應(yīng) fixture 的 URL等待testcase容器出現(xiàn)且aria-busy不再是true。后者就是與 TestViewer.js 約定的同步點(diǎn)——只有副作用沖刷完成測試才會(huì)執(zhí)行keyboard.press、mouse.move等用戶動(dòng)作。實(shí)際調(diào)用形如await renderFixture(FocusTrap/OpenFocusTrap);服務(wù)可用性探測與重試由于開發(fā)服務(wù)器與測試進(jìn)程常常同時(shí)被啟動(dòng)見根目錄命令pnpm test:e2e的實(shí)現(xiàn)index.test.ts 提供了attemptGoto最多重試 10 次、每次間隔 250ms 嘗試訪問http://localhost:5001。beforeAll階段若多次嘗試仍失敗會(huì)拋出帶提示的錯(cuò)誤信息明確提醒開發(fā)者先啟動(dòng)pnpm test:e2e:dev見 index.test.ts。Playwright 匹配器的斷言生態(tài)斷言大量使用語義化 Playwright 斷言例如驗(yàn)證焦點(diǎn)位置await page.keyboard.press(Tab); await expect(page.getByText(confirm)).toBeFocused(); await page.keyboard.press(ShiftTab); await expect(page.getByText(ok)).toBeFocused();測試文件開頭還導(dǎo)入了mui/internal-test-utils/initPlaywrightMatchersindex.test.ts為瀏覽器側(cè)提供與倉庫內(nèi)部測試工具一致的匹配器能力并配合 Vitest 配置中的deps.inline: [mui/internal-test-utils]使用見 test/e2e/vitest.config.ts。三、命令速查與運(yùn)行方式以倉庫根目錄的 package.json 為入口e2e 相關(guān)命令全部代理到獨(dú)立的mui-internal/test-e2e包該包自身的腳本定義在 test/e2e/package.json命令作用pnpm test:e2e完整執(zhí)行先構(gòu)建 fixture 應(yīng)用、再啟動(dòng) preview 服務(wù)器、最后跑全部測試根 package.json 中定義為pnpm -F ./test/e2e startpnpm test:e2e:dev啟動(dòng) Vite 開發(fā)服務(wù)器為 fixture 應(yīng)用提供熱更新端口固定為5001對應(yīng)vite --port 5001pnpm -F ./test/e2e test --watch以 watch 模式對運(yùn)行中的開發(fā)服務(wù)器執(zhí)行 e2e 測試對應(yīng)vitest run的監(jiān)聽變體pnpm -F ./test/e2e build使用 Vite 構(gòu)建 fixture 應(yīng)用的產(chǎn)物vite buildpnpm -F ./test/e2e server用 Vite preview 在5001端口伺服已構(gòu)建產(chǎn)物vite preview --port 5001推薦的開發(fā)工作流README 明確給出了并行開發(fā)姿勢在一個(gè)終端運(yùn)行pnpm test:e2e:dev在另一個(gè)終端運(yùn)行pnpm -F ./test/e2e test --watch。前者的熱更新與后者的監(jiān)聽配合可實(shí)現(xiàn)改動(dòng) fixture 或測試代碼 → 自動(dòng)重跑的快速迭代閉環(huán)無需反復(fù)執(zhí)行全量構(gòu)建。一鍵 CI 式全量執(zhí)行需要與 CI 行為一致的完整鏈路時(shí)可直接使用根命令pnpm test:e2e它實(shí)際展開為pnpm -F ./test/e2e start而 start 腳本test/e2e/package.json的實(shí)現(xiàn)為cross-env NODE_ENVproduction pnpm build concurrently --success first --kill-others pnpm run test pnpm run server即先以生產(chǎn)模式構(gòu)建 fixture 應(yīng)用隨后并發(fā)啟動(dòng)測試進(jìn)程與 preview 服務(wù)器——這正是attemptGoto重試機(jī)制要應(yīng)對的啟動(dòng)競態(tài)二者誰先就緒都不影響最終結(jié)果任一進(jìn)程先成功退出--success first即終止另一進(jìn)程。四、瀏覽器級(jí)測試的四種典型場景深入閱讀 index.test.ts 可以發(fā)現(xiàn)這套基礎(chǔ)設(shè)施覆蓋了單元測試很難模擬的真實(shí)交互維度。下面以倉庫中實(shí)際用例為例分類說明方便你在新增測試時(shí)對照取型。1. 鍵盤導(dǎo)航與焦點(diǎn)陷阱FocusTrapFocusTrap 需要驗(yàn)證Tab 鍵在陷阱內(nèi)循環(huán)、焦點(diǎn)永不逃逸。對應(yīng) fixture OpenFocusTrap.tsx 渲染了initial-focus按鈕與一個(gè)包含confirm/cancel/ok三個(gè)按鈕的FocusTrap容器。測試index.test.ts連續(xù)按 Tab 驗(yàn)證焦點(diǎn)依次落在confirm → cancel → ok → confirm循環(huán)回起點(diǎn)再用ShiftTab驗(yàn)證反向循環(huán)。同目錄還提供PositiveTabIndexFocusTrap、ClosedFocusTrap、DefaultOpenLazyFocusTrap、DisableEnforceFocusFocusTrap等變體分別覆蓋tabIndex排序、關(guān)閉態(tài)穿透、懶聚焦與disableEnforceFocus時(shí)的行為。2. 純指針事件Select / Autocomplete / TextField部分缺陷只在真實(shí)鼠標(biāo)事件下復(fù)現(xiàn)。例如 SelectPointerFlow.tsx 渲染一個(gè)有 12 個(gè)選項(xiàng)的受控Select菜單關(guān)閉過渡設(shè)為 0 以消除時(shí)序抖動(dòng)對應(yīng)測試index.test.ts使用page.setViewportSize制造翻轉(zhuǎn)菜單或拖拽釋放兩種幾何條件并用boundingBox()計(jì)算觸發(fā)點(diǎn)與選項(xiàng)中心的精確坐標(biāo)驗(yàn)證普通點(diǎn)擊不應(yīng)誤選、而按住拖拽到選項(xiàng)上釋放則應(yīng)當(dāng)選中值為 20。同理HoverMaterialAutocomplete.tsx 用于驗(yàn)證鼠標(biāo)懸停后再按方向鍵時(shí)的高亮行為OutlinedTextFieldOnClick.tsx 用于驗(yàn)證點(diǎn)擊聚焦后的 label 區(qū)域能正確觸發(fā)onClick并進(jìn)入錯(cuò)誤態(tài)。3. 鍵盤與鼠標(biāo)的焦點(diǎn)可見性差異Select.Mui-focusVisible是否出現(xiàn)取決于打開菜單的是鼠標(biāo)還是鍵盤。兩個(gè)測試index.test.ts加載同一個(gè) SelectFocusVisible.tsx fixture分別以trigger.click()與keyboard.press(Tab → Enter)打開菜單隨后讀取roleoption元素的 classList斷言鼠標(biāo)路徑不含Mui-focusVisible而鍵盤路徑包含。同一 fixture、不同交互路徑得出相反結(jié)論正是 fixture 與 instrumentation 解耦后帶來的復(fù)用性。4. 回歸場景與異步魯棒性TextareaAutosize / RatingSuspense 回歸針對歷史 issue測試index.test.ts在加載 TextareaAutosizeSuspense.tsx 后監(jiān)聽pageerror點(diǎn)擊按鈕切換顯示/隱藏并等待防抖166ms觸發(fā)后斷言頁面零錯(cuò)誤真實(shí)拖拽縮放測試index.test.ts模擬按住 textarea 右下角 resize handle 拖動(dòng) 50px斷言元素 style.height 確實(shí)增大方向鍵循環(huán)BasicRating.tsx 配合ArrowLeft驗(yàn)證評(píng)分在值域邊界正確回繞1 → 空 → 5。五、如何新增一個(gè) e2e 用例分步指南結(jié)合上文架構(gòu)為一個(gè)新組件場景添加 e2e 測試只需四步。第 1 步編寫 fixture。在 test/e2e/fixtures 下新建套件名/夾具名.tsx組件默認(rèn)導(dǎo)出直接使用mui/material下的真實(shí)組件可參考 SelectPointerFlow.tsx 的寫法并通過data-testid暴露需要定位的關(guān)鍵節(jié)點(diǎn)。注意不要修改已有 fixture。第 2 步在測試文件中新增 describe/it。在 index.test.ts 中加入用例通過await renderFixture(Suite/Fixture)加載隨后用page.getByRole/getByText/getByTestId定位、page.keyboard/page.mouse交互、await expect(...).toBeFocused()/toHaveText(...)斷言。需要驗(yàn)證真實(shí)位置關(guān)系時(shí)可參照坐標(biāo)計(jì)算模式使用boundingBox()與document.elementFromPoint。第 3 步本地快速迭代。終端 A 執(zhí)行pnpm test:e2e:dev終端 B 執(zhí)行pnpm -F ./test/e2e test --watch保存代碼即自動(dòng)重跑。第 4 步人工核對 全量回歸。瀏覽器打開http://localhost:5001即可看到全部 fixture 的導(dǎo)航列表在地址欄追加#dev可啟用導(dǎo)航面板與提示、追加#no-dev可隱藏該機(jī)制由 test/e2e/index.js 中的 hash 監(jiān)聽實(shí)現(xiàn)非生產(chǎn)構(gòu)建默認(rèn)不顯示 dev 面板。確認(rèn)無誤后執(zhí)行pnpm test:e2e走完整構(gòu)建測試鏈路。六、構(gòu)建與運(yùn)行的關(guān)鍵配置Vite 配置中的JS 即 JSX技巧由于倉庫部分早期代碼以.js后綴書寫 JSX 語法test/e2e/vite.config.mts 在transform階段通過transformWithOxc(code, id, { lang: tsx, ... })把項(xiàng)目內(nèi).js文件按 TSX 解析并對依賴預(yù)構(gòu)建聲明moduleTypes: { .js: tsx }同時(shí)通過根目錄 vitest.shared.mts 導(dǎo)出的alias把mui/*等包指向倉庫內(nèi)源碼使 fixture 直接以源碼而非構(gòu)建產(chǎn)物運(yùn)行保證熱更新與源碼級(jí)調(diào)試體驗(yàn)。Vitest 配置test/e2e/vitest.config.ts 開啟了globals: true并顯式 inline 了mui/internal-test-utils保證 Playwright matchers 在瀏覽器測試上下文中正常注冊。測試基地址BASE_URL被固定為http://localhost:5001index.test.ts與 dev/preview 服務(wù)器的端口約定嚴(yán)格一致。結(jié)語從 test/e2e/README.md 出發(fā)可以看到Material UI 把端到端測試做成了一套低成本、可復(fù)用的組件級(jí)驗(yàn)證設(shè)施文件系統(tǒng)約定讓每個(gè) fixture 自動(dòng)獲得可直達(dá)的 URL 與穩(wěn)定的測試標(biāo)識(shí)renderFixture與TestViewer的aria-busy協(xié)議消除了真實(shí)渲染的時(shí)序不確定性Playwright 則提供了與單元測試互補(bǔ)的真實(shí)瀏覽器交互能力。理解這套模式后你既可以遵循同樣的分目錄結(jié)構(gòu)為自己維護(hù)的組件庫搭建 e2e 骨架也可以直接閱讀 test/e2e/index.test.ts 與 test/e2e/fixtures 中的真實(shí)用例把其中驗(yàn)證鍵盤焦點(diǎn)、拖拽坐標(biāo)與異步穩(wěn)定性的手法遷移到自己的項(xiàng)目中去?！久赓M(fèi)下載鏈接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ma/material-ui創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Material UI 端到端測試架構(gòu)解析：從 Fixture 組件到 Playwright 自動(dòng)化驗(yàn)證
Material UI 端到端測試架構(gòu)解析從 Fixture 組件到 Playwright 自動(dòng)化驗(yàn)證【免費(fèi)下載鏈接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ma/material-ui導(dǎo)讀本篇技術(shù)指南基于 Material UI 倉庫的 test/e2e/README.md系統(tǒng)講解該倉庫如何組織瀏覽器級(jí)端到端測試。E2Eend-to-end測試以真實(shí)瀏覽器 真實(shí)組件 真實(shí)用戶交互的方式驗(yàn)證鍵盤焦點(diǎn)管理FocusTrap、指針事件Select 拖拽、懸浮層Popover等僅靠單元測試難以覆蓋的用戶場景。讀完本文你將理解 Material UI 的Fixture渲染夾具 Instrumentation行為編排兩層測試模式學(xué)會(huì)如何為任意組件新增一條可獨(dú)立運(yùn)行的 e2e 用例并掌握 test/e2e 目錄下的全部命令與調(diào)試技巧。一、測試設(shè)計(jì)的兩層架構(gòu)Material UI 的端到端測試被刻意拆分為兩個(gè)相互獨(dú)立的組成部分這一劃分貫穿整個(gè) test/e2e 目錄的設(shè)計(jì)Rendered UIfixture負(fù)責(zé)渲染什么——一個(gè)獨(dú)立的 React 組件文件展示被測組件在特定交互場景下的最小 UIInstrumentation測試代碼負(fù)責(zé)如何操作——使用 Playwright 在真實(shí)瀏覽器中回放用戶動(dòng)作并對渲染結(jié)果做斷言。這種職責(zé)分離帶來兩個(gè)直接收益fixture 只關(guān)心 UI 狀態(tài)天然接近真實(shí)使用場景肉眼即可在瀏覽器中人工核對測試代碼只關(guān)心交互與斷言與組件實(shí)現(xiàn)細(xì)節(jié)解耦組件重構(gòu)時(shí)無需改動(dòng)測試描述。README 同時(shí)給出了明確的工程約定新增測試時(shí)優(yōu)先新建組件文件而不是修改已有文件因?yàn)楦膭?dòng)既有 fixture 可能在無意識(shí)中改變其他測試的前提條件。全部 Fixture 的自動(dòng)匯聚fixture 的物理存放位置在 test/e2e/fixtures每個(gè)被測組件對應(yīng)一個(gè)子目錄。目錄內(nèi)的聚合邏輯位于 test/e2e/index.jsconst fixtures []; const importFixtures import.meta.glob(./fixtures/**/*.{js,ts,tsx}); Object.keys(importFixtures).forEach((path) { const [suite, name] path .replace(./fixtures/, ) .replace(/\.\w$/, ) .split(/); fixtures.push({ path, suite: e2e/${suite}, name, Component: React.lazy(importFixtures[path]), }); });關(guān)鍵點(diǎn)在于借助 Vite 的import.meta.glob以文件系統(tǒng)約定代替手工注冊fixture 目錄中新增任何*.js/ts/tsx文件都會(huì)被自動(dòng)收集無需改聚合代碼采用兩層目錄命名約定一級(jí)目錄名即套件名suite去掉擴(kuò)展名的文件名即夾具名name最終拼出形如e2e/FocusTrap/OpenFocusTrap的穩(wěn)定標(biāo)識(shí)符這個(gè)標(biāo)識(shí)符正是測試中傳給renderFixture()的參數(shù)每個(gè) fixture 通過React.lazy做代碼分割按需加載保證該應(yīng)用在開發(fā)模式下也能保持輕量。單 Fixture 一個(gè)路由聚合完成后test/e2e/index.js 使用react-router為每個(gè) fixture 注冊一條獨(dú)立路由并用 TestViewer 統(tǒng)一包裹渲染。每條路由的 URL 形如http://localhost:5001/e2e/FocusTrap/OpenFocusTrap。也就是說每個(gè) fixture 都是可通過 URL 直達(dá)、可獨(dú)立驗(yàn)證的頁面。TestViewer 的就緒信號(hào)TestViewer.js 是整個(gè)夾具宿主的關(guān)鍵一環(huán)。它用一個(gè)useEffect把ready置為true模擬act()中被動(dòng)副作用已被刷新的語義然后輸出div aria-busy{!ready}>async function renderFixture(fixturePath: string) { await page.goto(${BASE_URL}/e2e/${fixturePath}#no-dev); await page.waitForSelector([data-testidtestcase]:not([aria-busytrue])); }它做兩件事攜帶#no-dev哈希導(dǎo)航到對應(yīng) fixture 的 URL等待testcase容器出現(xiàn)且aria-busy不再是true。后者就是與 TestViewer.js 約定的同步點(diǎn)——只有副作用沖刷完成測試才會(huì)執(zhí)行keyboard.press、mouse.move等用戶動(dòng)作。實(shí)際調(diào)用形如await renderFixture(FocusTrap/OpenFocusTrap);服務(wù)可用性探測與重試由于開發(fā)服務(wù)器與測試進(jìn)程常常同時(shí)被啟動(dòng)見根目錄命令pnpm test:e2e的實(shí)現(xiàn)index.test.ts 提供了attemptGoto最多重試 10 次、每次間隔 250ms 嘗試訪問http://localhost:5001。beforeAll階段若多次嘗試仍失敗會(huì)拋出帶提示的錯(cuò)誤信息明確提醒開發(fā)者先啟動(dòng)pnpm test:e2e:dev見 index.test.ts。Playwright 匹配器的斷言生態(tài)斷言大量使用語義化 Playwright 斷言例如驗(yàn)證焦點(diǎn)位置await page.keyboard.press(Tab); await expect(page.getByText(confirm)).toBeFocused(); await page.keyboard.press(ShiftTab); await expect(page.getByText(ok)).toBeFocused();測試文件開頭還導(dǎo)入了mui/internal-test-utils/initPlaywrightMatchersindex.test.ts為瀏覽器側(cè)提供與倉庫內(nèi)部測試工具一致的匹配器能力并配合 Vitest 配置中的deps.inline: [mui/internal-test-utils]使用見 test/e2e/vitest.config.ts。三、命令速查與運(yùn)行方式以倉庫根目錄的 package.json 為入口e2e 相關(guān)命令全部代理到獨(dú)立的mui-internal/test-e2e包該包自身的腳本定義在 test/e2e/package.json命令作用pnpm test:e2e完整執(zhí)行先構(gòu)建 fixture 應(yīng)用、再啟動(dòng) preview 服務(wù)器、最后跑全部測試根 package.json 中定義為pnpm -F ./test/e2e startpnpm test:e2e:dev啟動(dòng) Vite 開發(fā)服務(wù)器為 fixture 應(yīng)用提供熱更新端口固定為5001對應(yīng)vite --port 5001pnpm -F ./test/e2e test --watch以 watch 模式對運(yùn)行中的開發(fā)服務(wù)器執(zhí)行 e2e 測試對應(yīng)vitest run的監(jiān)聽變體pnpm -F ./test/e2e build使用 Vite 構(gòu)建 fixture 應(yīng)用的產(chǎn)物vite buildpnpm -F ./test/e2e server用 Vite preview 在5001端口伺服已構(gòu)建產(chǎn)物vite preview --port 5001推薦的開發(fā)工作流README 明確給出了并行開發(fā)姿勢在一個(gè)終端運(yùn)行pnpm test:e2e:dev在另一個(gè)終端運(yùn)行pnpm -F ./test/e2e test --watch。前者的熱更新與后者的監(jiān)聽配合可實(shí)現(xiàn)改動(dòng) fixture 或測試代碼 → 自動(dòng)重跑的快速迭代閉環(huán)無需反復(fù)執(zhí)行全量構(gòu)建。一鍵 CI 式全量執(zhí)行需要與 CI 行為一致的完整鏈路時(shí)可直接使用根命令pnpm test:e2e它實(shí)際展開為pnpm -F ./test/e2e start而 start 腳本test/e2e/package.json的實(shí)現(xiàn)為cross-env NODE_ENVproduction pnpm build concurrently --success first --kill-others pnpm run test pnpm run server即先以生產(chǎn)模式構(gòu)建 fixture 應(yīng)用隨后并發(fā)啟動(dòng)測試進(jìn)程與 preview 服務(wù)器——這正是attemptGoto重試機(jī)制要應(yīng)對的啟動(dòng)競態(tài)二者誰先就緒都不影響最終結(jié)果任一進(jìn)程先成功退出--success first即終止另一進(jìn)程。四、瀏覽器級(jí)測試的四種典型場景深入閱讀 index.test.ts 可以發(fā)現(xiàn)這套基礎(chǔ)設(shè)施覆蓋了單元測試很難模擬的真實(shí)交互維度。下面以倉庫中實(shí)際用例為例分類說明方便你在新增測試時(shí)對照取型。1. 鍵盤導(dǎo)航與焦點(diǎn)陷阱FocusTrapFocusTrap 需要驗(yàn)證Tab 鍵在陷阱內(nèi)循環(huán)、焦點(diǎn)永不逃逸。對應(yīng) fixture OpenFocusTrap.tsx 渲染了initial-focus按鈕與一個(gè)包含confirm/cancel/ok三個(gè)按鈕的FocusTrap容器。測試index.test.ts連續(xù)按 Tab 驗(yàn)證焦點(diǎn)依次落在confirm → cancel → ok → confirm循環(huán)回起點(diǎn)再用ShiftTab驗(yàn)證反向循環(huán)。同目錄還提供PositiveTabIndexFocusTrap、ClosedFocusTrap、DefaultOpenLazyFocusTrap、DisableEnforceFocusFocusTrap等變體分別覆蓋tabIndex排序、關(guān)閉態(tài)穿透、懶聚焦與disableEnforceFocus時(shí)的行為。2. 純指針事件Select / Autocomplete / TextField部分缺陷只在真實(shí)鼠標(biāo)事件下復(fù)現(xiàn)。例如 SelectPointerFlow.tsx 渲染一個(gè)有 12 個(gè)選項(xiàng)的受控Select菜單關(guān)閉過渡設(shè)為 0 以消除時(shí)序抖動(dòng)對應(yīng)測試index.test.ts使用page.setViewportSize制造翻轉(zhuǎn)菜單或拖拽釋放兩種幾何條件并用boundingBox()計(jì)算觸發(fā)點(diǎn)與選項(xiàng)中心的精確坐標(biāo)驗(yàn)證普通點(diǎn)擊不應(yīng)誤選、而按住拖拽到選項(xiàng)上釋放則應(yīng)當(dāng)選中值為 20。同理HoverMaterialAutocomplete.tsx 用于驗(yàn)證鼠標(biāo)懸停后再按方向鍵時(shí)的高亮行為OutlinedTextFieldOnClick.tsx 用于驗(yàn)證點(diǎn)擊聚焦后的 label 區(qū)域能正確觸發(fā)onClick并進(jìn)入錯(cuò)誤態(tài)。3. 鍵盤與鼠標(biāo)的焦點(diǎn)可見性差異Select.Mui-focusVisible是否出現(xiàn)取決于打開菜單的是鼠標(biāo)還是鍵盤。兩個(gè)測試index.test.ts加載同一個(gè) SelectFocusVisible.tsx fixture分別以trigger.click()與keyboard.press(Tab → Enter)打開菜單隨后讀取roleoption元素的 classList斷言鼠標(biāo)路徑不含Mui-focusVisible而鍵盤路徑包含。同一 fixture、不同交互路徑得出相反結(jié)論正是 fixture 與 instrumentation 解耦后帶來的復(fù)用性。4. 回歸場景與異步魯棒性TextareaAutosize / RatingSuspense 回歸針對歷史 issue測試index.test.ts在加載 TextareaAutosizeSuspense.tsx 后監(jiān)聽pageerror點(diǎn)擊按鈕切換顯示/隱藏并等待防抖166ms觸發(fā)后斷言頁面零錯(cuò)誤真實(shí)拖拽縮放測試index.test.ts模擬按住 textarea 右下角 resize handle 拖動(dòng) 50px斷言元素 style.height 確實(shí)增大方向鍵循環(huán)BasicRating.tsx 配合ArrowLeft驗(yàn)證評(píng)分在值域邊界正確回繞1 → 空 → 5。五、如何新增一個(gè) e2e 用例分步指南結(jié)合上文架構(gòu)為一個(gè)新組件場景添加 e2e 測試只需四步。第 1 步編寫 fixture。在 test/e2e/fixtures 下新建套件名/夾具名.tsx組件默認(rèn)導(dǎo)出直接使用mui/material下的真實(shí)組件可參考 SelectPointerFlow.tsx 的寫法并通過data-testid暴露需要定位的關(guān)鍵節(jié)點(diǎn)。注意不要修改已有 fixture。第 2 步在測試文件中新增 describe/it。在 index.test.ts 中加入用例通過await renderFixture(Suite/Fixture)加載隨后用page.getByRole/getByText/getByTestId定位、page.keyboard/page.mouse交互、await expect(...).toBeFocused()/toHaveText(...)斷言。需要驗(yàn)證真實(shí)位置關(guān)系時(shí)可參照坐標(biāo)計(jì)算模式使用boundingBox()與document.elementFromPoint。第 3 步本地快速迭代。終端 A 執(zhí)行pnpm test:e2e:dev終端 B 執(zhí)行pnpm -F ./test/e2e test --watch保存代碼即自動(dòng)重跑。第 4 步人工核對 全量回歸。瀏覽器打開http://localhost:5001即可看到全部 fixture 的導(dǎo)航列表在地址欄追加#dev可啟用導(dǎo)航面板與提示、追加#no-dev可隱藏該機(jī)制由 test/e2e/index.js 中的 hash 監(jiān)聽實(shí)現(xiàn)非生產(chǎn)構(gòu)建默認(rèn)不顯示 dev 面板。確認(rèn)無誤后執(zhí)行pnpm test:e2e走完整構(gòu)建測試鏈路。六、構(gòu)建與運(yùn)行的關(guān)鍵配置Vite 配置中的JS 即 JSX技巧由于倉庫部分早期代碼以.js后綴書寫 JSX 語法test/e2e/vite.config.mts 在transform階段通過transformWithOxc(code, id, { lang: tsx, ... })把項(xiàng)目內(nèi).js文件按 TSX 解析并對依賴預(yù)構(gòu)建聲明moduleTypes: { .js: tsx }同時(shí)通過根目錄 vitest.shared.mts 導(dǎo)出的alias把mui/*等包指向倉庫內(nèi)源碼使 fixture 直接以源碼而非構(gòu)建產(chǎn)物運(yùn)行保證熱更新與源碼級(jí)調(diào)試體驗(yàn)。Vitest 配置test/e2e/vitest.config.ts 開啟了globals: true并顯式 inline 了mui/internal-test-utils保證 Playwright matchers 在瀏覽器測試上下文中正常注冊。測試基地址BASE_URL被固定為http://localhost:5001index.test.ts與 dev/preview 服務(wù)器的端口約定嚴(yán)格一致。結(jié)語從 test/e2e/README.md 出發(fā)可以看到Material UI 把端到端測試做成了一套低成本、可復(fù)用的組件級(jí)驗(yàn)證設(shè)施文件系統(tǒng)約定讓每個(gè) fixture 自動(dòng)獲得可直達(dá)的 URL 與穩(wěn)定的測試標(biāo)識(shí)renderFixture與TestViewer的aria-busy協(xié)議消除了真實(shí)渲染的時(shí)序不確定性Playwright 則提供了與單元測試互補(bǔ)的真實(shí)瀏覽器交互能力。理解這套模式后你既可以遵循同樣的分目錄結(jié)構(gòu)為自己維護(hù)的組件庫搭建 e2e 骨架也可以直接閱讀 test/e2e/index.test.ts 與 test/e2e/fixtures 中的真實(shí)用例把其中驗(yàn)證鍵盤焦點(diǎn)、拖拽坐標(biāo)與異步穩(wěn)定性的手法遷移到自己的項(xiàng)目中去?！久赓M(fèi)下載鏈接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ma/material-ui創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考