用 Cypress 實現 Laravel 專案的自動化測試

在Web 開發中，測試是不可或缺的一環。無論是簡單的功能測試還是複雜的端到端測試，一個好的測試工具可以大大提高開發效率並減少錯誤。Laravel 是一個非常受歡迎的 PHP 框架，而 Cypress 則是前端測試工具中的佼佼者。將這兩者結合，能夠幫助我們在開發過程中實現高效而可靠的自動化測試。本篇文章將帶領你如何在 Laravel 專案中使用 Cypress 來進行端到端測試。

什麼是 Cypress？

Cypress 是一個現代化的前端測試工具，專門用來進行端到端測試。它的特點是易於使用、測試運行速度快，並且能夠與開發環境無縫集成。Cypress 提供了豐富的 API，可以模擬用戶行為、驗證應用狀態、與後端 API 交互等，是前端開發者的理想選擇。

什麼是 Laravel？

Laravel 是一個用於開發 Web 應用的 PHP 框架，它強調代碼的優雅和開發的簡單性。Laravel 擁有豐富的內建功能，如路由、身份驗證、數據庫操作等，讓開發者能夠快速構建功能齊全的 Web 應用。

為什麼選擇 Cypress 與 Laravel 結合？

Cypress 與 Laravel 的結合可以帶來以下好處：

完整的端到端測試：模擬真實用戶行為，從瀏覽器訪問到後端數據處理。
快速反饋：Cypress 提供實時反饋，幫助開發者快速發現並修復問題。
易於配置：Cypress 的設置和運行非常簡單，且與 Laravel 可以無縫集成。

安裝與配置 Cypress

1. 初始化 Laravel 專案

首先，確保你已經有一個 Laravel 專案。如果還沒有，請先創建一個新的 Laravel 專案：

composer create-project --prefer-dist laravel/laravel laravel-cypress-demo
cd laravel-cypress-demo

2. 安裝 Cypress

接下來，我們需要使用 npm 或 yarn 安裝 Cypress：

npm install cypress --save-dev

或者：

yarn add cypress --dev

安裝完成後，可以使用以下命令打開 Cypress：

npx cypress open

這將啟動 Cypress 測試運行器，並且會自動創建一個預設的測試目錄結構。

3. 配置 Cypress 與 Laravel 專案

為了讓 Cypress 正確測試 Laravel 專案，我們需要對 Cypress 進行一些配置。首先，打開 cypress.json 文件，將 baseUrl 配置為 Laravel 開發伺服器的 URL

{
  "baseUrl": "http://localhost:8000"
}

接著，啟動 Laravel 開發伺服器：

php artisan serve

這樣，Cypress 就能夠訪問並測試 Laravel 應用的各個路由。

撰寫測試案例

接下來，我們將撰寫一個簡單的測試案例，模擬用戶在 Laravel 應用中的登入操作。

1. 建立登入頁面

在 Laravel 專案中，創建一個簡單的登入頁面，假設 URL 是 /login，頁面包含 email 和 password 的輸入框，以及一個 “登入” 按鈕。

2. 撰寫 Cypress 測試

在 cypress/integration 目錄中創建一個新的測試文件，命名為 login_spec.js，然後撰寫以下測試案例：

describe('登入測試', () => {
  it('應該成功登入並進入主頁面', () => {
    // 訪問登入頁面
    cy.visit('/login')

    // 輸入帳號和密碼
    cy.get('input[name="email"]').type('your-email@example.com')
    cy.get('input[name="password"]').type('your-password')

    // 按下登入按鈕
    cy.get('button[type="submit"]').click()

    // 驗證是否成功登入並重定向到主頁面
    cy.url().should('include', '/home')
    cy.contains('歡迎').should('be.visible')
  })
})

3. 執行測試

保存測試文件後，打開 Cypress 測試運行器，選擇 login_spec.js 測試文件並執行。你將看到 Cypress 自動化執行每一步操作，並在測試完成後顯示結果。

小結

Cypress 是一個功能強大的測試工具，特別適合與 Laravel 這樣的框架結合使用。通過 Cypress，你可以輕鬆地撰寫和運行端到端測試，模擬真實用戶行為並驗證應用的功能。本文僅僅展示了如何使用 Cypress 進行基本的登入測試，但實際上它能做的遠不止這些。希望這篇文章能幫助你在 Laravel 專案中更好地利用 Cypress 進行測試，提升開發效率和應用質量。