如何使用 Cypress 檢查元素是否存在？

Cypress 是一款幫助 Web 開發人員和測試人員確保其網站正常運作的工具。它可以檢查網站的某個部分是否存在。這很有用，因為它有助於在用戶發現問題之前發現問題。元素存在是您應該在專案中使用 Cypress 進行測試的首要任務之一。在本文中，我們將了解如何測試元素是否存在。另外，如果存在，如何檢查它是否可見？ .

什麼是柏樹元素？

• Web 應用程式中的元素是指構成網頁結構和內容的各個 HTML 元素。
• 元素的範例包括按鈕、文字方塊、連結和圖像，每個元素都有自己的屬性，如 id、class 和 style。
• 這些屬性可用於與 CSS 或 JavaScript 選擇器互動。

元素很重要，因為它們定義了頁面的結構和行為。
透過選擇元素並與之交互，您可以建立自動化測試，以確保 Web 應用程式的行為符合所有使用者的預期。
在 Cypress 中，元素是您希望與之互動或測試的網站的 HTML 元素。
要與這些元素互動或測試這些元素，只需使用類似於 CSS 的選擇器選擇它們即可。

為什麼元素的存在在 Cypress 中很重要？

網站就像一個拼圖，其中包含按鈕和表單等互動部分。測試包括確保這些部件位於正確的位置並正常運作。檢查元素是否存在很重要，因為網站的不同部分可以根據使用者操作進行更改。

例如，填寫表單後可能會出現「提交」按鈕，因此需要檢查它是否出現。這有助於在用戶遇到問題之前識別問題，從而提供更流暢的體驗。

如何使用 Cypress 驗證元素是否存在？

Cypress 提供了多種方法來驗證網頁上元素的存在。讓我們深入研究每種方法並了解如何有效地實施它們。

1。 cy.get() 方法

real-device-cloud-cta.jpg
Cypress 中的 cy.get() 方法用於根據各種選擇器（例如類別名稱、ID、屬性等）選擇和檢索頁面上的元素。要驗證元素是否存在，開發人員可以使用 should() 指令和 cy.get() 方法。

將 .should(‘exist’) 斷言與 cy.get() 一起使用可確保所選元素出現在頁面上。

2。 cy.contains() 方法

cy.contains() 方法用於根據文字內容尋找元素。此方法也可用於檢查頁面上是否存在具有特定文字的元素。

3。 cy.find() 方法

cy.find() 方法在處理父元素內的巢狀元素時非常有用。它允許您在另一個元素的上下文中搜尋元素，確保更集中的搜尋。

4。帶有自訂斷言的 cy.get().should()

Cypress 使開發人員能夠使用 cy.should() 方法建立自訂斷言。當您想要實現除元素存在之外的更具體的檢查時，這特別有用。

5。使用 .should() 和超時

有時，元素可能會非同步載入或略有延遲。在這種情況下，您可以使用具有逾時的 .should() 斷言來確保 Cypress 等待元素出現。

使用 Cypress 進行條件檢定：
Cypress 中的條件測試是將條件邏輯整合到測試腳本中的行為，以便在測試執行期間根據特定條件或結果做出決策並執行操作。這種方法使您能夠設計更靈活、更具適應性的測試，可以處理各種場景並做出相應的回應。賽普拉斯提供了一系列命令和 API，您可以利用它們來實現有效的條件測試。以下是如何使用 Cypress 進行條件測試的說明。

範例-1

在此範例中，測試腳本存取網頁並對元素是否存在以及頁面標題執行條件測試。根據條件是否滿足，腳本將對應的訊息記錄到 Cypress 測試輸出。

real-device-cloud-cta.jpg
Cypress 提供了流暢直觀的語法，用於在測試腳本中執行條件測試。您可以使用斷言、承諾和常規 JavaScript 邏輯來建立複雜的條件和基於這些條件的結果的操作。

Cypress 中的條件測試與其他測試框架類似，可以幫助您創建更通用、更有效的測試，可以適應不同的場景，使您的測試過程更加健壯和可靠。

範例2：

在此程式碼片段中，Cypress 首先使用 .should(‘exist’) 確保按鈕元素的存在。然後，它使用 .then() 檢索該元素，隨後的條件檢查確定該按鈕是否存在。如果符合條件，表示按鈕存在，Cypress 將使用 cy.wrap(button).click() 點選按鈕。如果條件失敗，則 else 區塊會促進執行替代操作。

元素存在性檢查的實際應用：

讓我們想想一些日常情況，在這些情況下檢查元素是否存在非常有幫助：

1。表單成功訊息

使用者提交表單後，可能會出現成功訊息。使用 Cypress，您可以檢查該訊息是否顯示，確保使用者知道他們的表單已成功提交。

2。選單導航

當使用者將滑鼠停留在按鈕上時，您會出現一個下拉式選單。您想要確認當使用者執行該懸停操作時選單會出現。

3。響應式設計

網站的行動版本和桌面版本上可能會出現或消失不同的元素。您可以使用 Cypress 來確保這些元素按預期顯示或隱藏。

4。使用者存取控制

某些按鈕或連結可能僅對某些類型的使用者可見。 Cypress 可協助您驗證這些元素是否顯示給正確的人。

另請閱讀：Cypress 並行測試：帶有程式碼範例的逐步教學

結論

借助 Cypress 等工具，Web 測試不再是一項困難且耗時的任務。 「如果元素存在」功能封裝了條件測試的本質，使開發人員和測試人員能夠精心模仿真實使用者互動的測試。此功能不僅簡化了測試，還鼓勵對應用程式行為採取更周到的方法。透過利用 Cypress 直觀的命令和強大的斷言，開發人員可以簡化測試套件、減少冗餘並建立更強大的 Web 應用程式。因此，擁抱 Cypress 的力量，踏上提升 Web 開發專案品質的旅程。

來源：本部落格最初發佈於testgrid.io

以上是如何使用 Cypress 檢查元素是否存在？的詳細內容。更多資訊請關注PHP中文網其他相關文章！