Cypress 04 導航

在這篇文章中，我將介紹如何使用 Cypress 來測試網頁的導航行為。Cypress 是一個強大的前端測試工具，能夠輕鬆地模擬用戶行為並驗證網頁的運作是否符合預期。在這個範例中，我們將展示如何使用 Cypress 來訪問頁面、進行前後導航、檢查 URL 和標題，以及重新加載頁面。

測試案例說明

我們將創建一個簡單的測試，用來訪問 GitHub 網站，並進行如下操作：

1. 訪問 GitHub 首頁
2. 訪問登入頁面
3. 執行返回上一頁和前往下一頁的操作
4. 驗證當前的 URL 和頁面標題
5. 重新加載頁面

測試代碼

//cypress/e2e/nav.js
describe("nav", () => { 
    it('visit', () => {
        // 只能獲取文檔
        cy.visit("https://github.com/");

        // 訪問 GitHub 的登入頁面
        cy.visit('https://github.com/login')

        // 返回上一頁
        cy.go('back')

        // 前往下一頁
        cy.go('forward')

        // 驗證當前 URL
        cy.url().should('equal', 'https://github.com/login')

        // 驗證頁面標題
        cy.title().should('equal', 'Sign in to GitHub · GitHub')

        // 使用 true 重新加載頁面，忽略緩存
        cy.reload(true)
    });
});

指令詳解

cy.visit()

• 作用：訪問指定的 URL。
• 用法：cy.visit('https://example.com')
• 示例：

  cy.visit("https://github.com/");
  cy.visit('https://github.com/login');

  這兩行代碼依次訪問了 GitHub 首頁和登入頁面。

cy.go()

• 作用：在瀏覽器的歷史紀錄中進行導航，類似於瀏覽器的“返回”和“前進”按鈕。
• 用法：
  • cy.go('back')：返回上一頁。
  • cy.go('forward')：前進到下一頁。
• 示例：

  cy.go('back');    // 返回上一頁
  cy.go('forward'); // 前進到下一頁

cy.url()

• 作用：獲取當前頁面的 URL。
• 用法：cy.url().should('equal', 'https://example.com')
• 示例：

  cy.url().should('equal', 'https://github.com/login');

  這段代碼檢查當前頁面的 URL 是否為 'https://github.com/login'。

cy.title()

• 作用：獲取當前頁面的標題。
• 用法：cy.title().should('equal', '預期的頁面標題')
• 示例：

  cy.title().should('equal', 'Sign in to GitHub · GitHub');

  這段代碼檢查當前頁面的標題是否為 'Sign in to GitHub · GitHub'。

cy.reload()

• 作用：重新加載當前頁面，類似於瀏覽器的刷新按鈕。
• 用法：
  • cy.reload()：使用緩存重新加載頁面。
  • cy.reload(true)：忽略緩存，強制重新加載頁面。
• 示例：

  cy.reload(true);

  這行代碼重新加載頁面並忽略瀏覽器的緩存，確保加載最新的資源。

總結

這個 Cypress 測試展示了如何通過模擬瀏覽器的導航行為，來檢查應用在不同狀況下的反應。通過驗證 URL 和標題，以及重新加載頁面，我們能確保應用的關鍵功能能正常運行。這是一個基本的導航測試範例，但 Cypress 提供了豐富的 API，可以用來實現更複雜的測試場景。