用 Testcafe 套件選取 HTML 的 Shadow DOM，撰寫很麻煩，沒有全域執行的設定選項可開啟，而且它需要依照 HTML 結構逐層寫選擇器，才能選到想要的元素。這樣做法要套用在已經存在的測試案例實在是太麻煩，因為改寫成本太高、選擇器內容太長，所以我改用 Cypress 套件，並在檔案 cypress.config.ts 裡提供全域執行的選項 includeShadowDom: true，讓 cypress 執行時預設會解析 HTML 結構裡的 Shadow DOM，而不需撰寫逐層經過的選擇器。

我服務的公司原本是使用 Testcafe 套件進行 E2E 測試，但因為產品前端從 ionic v3 升級到 v4 後，ionic v4 開始預設使用 Shadow DOM 做元件，所以使用的 Testcafe 既存測試案例寫法，由於本文第一段內容提到的 Testcafe 原因，而不再符合產品所需。另外，我看 Testcafe 套件在 github 網站的 issue 頁中的討論，並沒有打算讓它解析 Shadow DOM 選擇器的開發者體驗更好，所以我建議大家能陸續安排改用其他對 Shadow DOM 選擇器解析，有良好開發者體驗的測試套件。