Cypress 的網路：Heroku 的「網路」遊樂場的真實場景

我最近去了chatGPT 並詢問有哪些好的自動化練習，在同一系統上工作一段時間後，或者只為特定類型的用戶流提供自動化，我們最終可能會忘記一些事情，所以我問了一些練習網站，然後我找到了互聯網。
儘管該網站可能看起來很簡陋，但它們仍然為您提供了一個嘗試自動化的地方，而目前，這就是我所需要的。我花了一些時間使用 Cypress 解決了一些經典的網路挑戰。
因此，言歸正傳，讓我們深入研究我自動化的一些場景，涵蓋從神奇般來來去去的按鈕、奇怪的拖放、與文件相關的自動化和一些快速 Shadow DOM 工作的所有內容！

1. 拖放： 如果您曾經嘗試過自動化拖放操作，您就會知道它從來沒有看起來那麼簡單。雖然 Cypress 對某些互動有原生支援（我確實嘗試過，哈哈），但仍然需要一些創造力才能在這裡進行拖放測試。

在本例中，我使用觸發器（'mousedown'）、觸發器（'dragover'）和觸發器（'mouseup'）嘗試了自訂拖放指令。由於該網站上實現該功能的方式，我必須更深入地挖掘才能使該測試正常工作，但對於大多數現代應用程式來說，cypress 插件應該足夠了（謝天謝地）。

1. 新增/刪除元素：

這個練習中的「加入元素」按鈕理論上很簡單，但有趣的是這個遊樂場有時會試圖擾亂你的期望，哈哈。點擊它一次，然後...出現一個刪除按鈕（這不是超級直觀，但哦，好吧，你只需要使用它）。訣竅是確保我們在測試中以穩定且可重複的方式處理添加-刪除舞蹈。使用 Cypress，我們檢查按鈕是否出現，新增更多按鈕，然後將它們一一刪除，確保順序不會出現問題。

專業提示：
追蹤出現和消失的元素可能很棘手，但 Cypress .should('exist') 和 .should('not.exist') 斷言可以很好地處理這個問題。另外，您每次都會得到甜蜜的視覺確認。

1. 動態內容：

我認為這是本文中最簡單的範例，但它仍然很有趣，這個想法只是創建測試來確保內容的格式是一個常數，即使它的內容會總是改變......不過對於學習仍然有用。

Cypress 可以確認元素按預期加載，而無需對實際內容過於挑剔，從而保持測試的彈性。

1. 動態控制：

對於這個控件，諸如複選框和按鈕之類的控件會根據使用者互動而出現或消失。有些需要等待載入指示器消失。在這裡，Cypress 的 cy.wait 和 .should('be.visible') 是關鍵。

快速提示：

不要使用硬編碼的等待，而是使用 .should('exist') 和 .should('be.disabled') 等斷言來對頁面的狀態做出反應。這使得測試更加穩健和適應性更強。

1. 檔案下載：

下載檔案可能聽起來很簡單，直到您必須證明它確實發生了。使用 Cypress，我們可以採取不同的措施來確保檔案確實已下載。

我們可以做不同的事情來確保下載完成，對於這個應用程序，我只是確保在單擊鏈接後我們在下載資料夾中擁有該文件。非常簡單，一旦文件存在，測試就會自動通過。可以套用其他策略，例如使用 cy.intercept 來驗證是否觸發了下載請求。

1. 檔案上傳： 就像檔案下載一樣，Cypress 的檔案上傳也非常流暢。

對於這種類型的場景，您可以使用 cypress-file-upload 之類的東西
這是一個非常好用的插件，並確認該檔案已被應用程式處理。

在我的範例中，所有這些都是透過.selectFile 命令完成的，並且有一種方法可以做到這一點，甚至無需發送實際文件，只需使用Cypress.Buffer 就可以解決問題（您可以看到裡面的實作）下面連結的儲存庫）。

這適用於透過點擊按鈕完成的上傳以及拖放上傳，非常簡單......謝謝賽普拉斯？ .

1. 影子 DOM:

Shadow DOM 的神秘之處在於元素就像主 DOM 中的秘密。它們被隱藏起來，不遵循常規的 CSS 可見性規則，這可能有點棘手，這取決於您需要如何在它們上運行自動化。值得慶幸的是，Cypress 支持 Shadow 命令來刺穿這一面紗並找到那些隱藏的元素。

對於這些測試，我使用cy.get('element').shadow() 來存取Shadow DOM 中的元素，然後，不再有問題或困難，您可以像您一樣存取元素並對其進行斷言與普通的。

---

現在就是這樣..只是簡單的6 個範例，說明我們如何使用Cypress 來處理一些基本的瀏覽器自動化使用，以及如何利用它來讓您的生活更輕鬆地處理此類情況.

準備好嘗試了嗎？

如果您有興趣嘗試這些測試或根據您的專案調整它們，我已在我的 GitHub 儲存庫上提供了程式碼。測試套件非常輕量，所以不應該有太多疑問點，而且我們有 GitHub Actions 流程，您可以使用它，這樣您就可以看到它是如何運作的！謝謝您，我們下次再見！

以上是Cypress 的網路：Heroku 的「網路」遊樂場的真實場景的詳細內容。更多資訊請關注PHP中文網其他相關文章！