介紹

Cypress 是一款強大的端到端測試工具，提供一組強大的內建指令來與 Web 應用程式互動。但是，每個項目都有獨特的需求，預設命令集可能無法完全滿足這些需求。這就是自訂命令的用武之地。自訂命令可讓您擴展賽普拉斯的功能，使您的測試更具可讀性和可維護性。在這篇文章中，我們將探討如何在 Cypress 中建立和使用自訂命令來增強您的測試自動化框架。

為什麼要使用自訂命令？

自訂指令有幾個好處：

1. 可重複使用性：封裝在多個測試中重複的常見操作。
2. 可維護性：集中複雜操作的邏輯，因此只需在一個地方進行更改。
3. 可讀性：透過抽象實作細節來提高測試的可讀性。

設定賽普拉斯

在我們深入建立自訂指令之前，如果您還沒有設定 Cypress，讓我們先設定一下：

npm install cypress --save-dev

安裝完成後，開啟Cypress：

npx cypress open

建立自訂命令

Cypress 自訂指令在 cypress/support/commands.js 檔案中定義。讓我們透過一些範例來了解如何建立和使用自訂命令。

範例1：登入指令
假設您有一個需要經常與之互動的登入表單。您可以建立自訂命令來處理登入過程：

// cypress/support/commands.js
Cypress.Commands.add('login', (email, password) => {
  cy.visit('/login');
  cy.get('input[name=email]').type(email);
  cy.get('input[name=password]').type(password);
  cy.get('button[type=submit]').click();
});

現在，您可以在測試中使用登入命令：

// cypress/integration/login.spec.js
describe('Login Tests', () => {
  it('Should login with valid credentials', () => {
    cy.login('[email protected]', 'password123');
    cy.url().should('include', '/dashboard');
  });
});

範例 2：帶有斷言的自訂指令
您也可以將自訂斷言新增至命令中。讓我們建立一個命令來檢查元素是否可見並包含特定文字：

// cypress/support/commands.js
Cypress.Commands.add('shouldBeVisibleWithText', (selector, text) => {
  cy.get(selector).should('be.visible').and('contain.text', text);
});

測試中的用法：

// cypress/integration/visibility.spec.js
describe('Visibility Tests', () => {
  it('Should display welcome message', () => {
    cy.visit('/home');
    cy.shouldBeVisibleWithText('.welcome-message', 'Welcome to the Dashboard');
  });
});

自訂命令的最佳實踐

1. 清楚地命名命令：為自訂命令使用描述性名稱以使測試更易於理解。
2. 參數化指令：接受參數使指令靈活且可重複使用。
3. 鏈結指令： 確保指令返回 Cypress chainables (cy.wrap()) 以啟用連結。
4. 文件指令： 新增註解來描述每個自訂指令的目的和用法。

高級技巧

1. TypeScript 支援： 如果您使用 TypeScript，您可以為自訂命令新增類型定義以增強自動完成和類型檢查。
2. 錯誤處理：在自訂指令中實作錯誤處理，以便在出現問題時提供資訊回饋。
3. 可重複使用函數：對於複雜的邏輯，建立可在自訂命令中使用的輔助函數，以保持 Commands.js 檔案整齊和集中。

結論

Cypress 中的自訂命令提供了一種強大的方法來擴展框架的功能，使您的測試更具可重用性、可維護性和可讀性。透過封裝常見操作並新增自訂斷言，您可以簡化測試自動化流程並專注於最重要的事情：確保您的應用程式完美運作。

立即開始在您的賽普拉斯專案中實施自訂命令，看看它們可以在您的測試工作流程中產生的變更。測試愉快！