介紹

在我們之前的文章中，我們介紹了 Cypress 中自訂指令的概念，並示範了它們如何簡化和增強您的測試框架。這篇後續文章將深入探討建立和使用自訂命令的最佳實踐，提供詳細的範例以確保您的測試可維護、可讀且穩健。

為什麼最佳實踐很重要

在建立自訂命令時遵循最佳實踐可確保您的測試保持可擴展性、易於理解且快速更新。正確建構的自訂命令可以顯著減少程式碼重複並提高測試套件的整體品質。

自訂命令的最佳實踐

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('fillForm', (formData) => {
  cy.get('input[name=firstName]').type(formData.firstName);
  cy.get('input[name=lastName]').type(formData.lastName);
  cy.get('input[name=email]').type(formData.email);
  cy.get('button[type=submit]').click();
});

用法：

// cypress/integration/form.spec.js
describe('Form Tests', () => {
  it('Should submit the form with valid data', () => {
    const formData = {
      firstName: 'John',
      lastName: 'Doe',
      email: '[email protected]'
    };
    cy.fillForm(formData);
    cy.get('.success-message').should('be.visible');
  });
});

3.鏈結命令
確保自訂指令使用 cy.wrap() 傳回 Cypress 可連結項，以啟用連結並維護 Cypress 指令流。

例子：

// cypress/support/commands.js
Cypress.Commands.add('selectDropdown', (selector, value) => {
  cy.get(selector).select(value).should('have.value', value);
  return cy.wrap(value);
});

用法：

// cypress/integration/dropdown.spec.js
describe('Dropdown Tests', () => {
  it('Should select a value from the dropdown', () => {
    cy.visit('/dropdown-page');
    cy.selectDropdown('#dropdown', 'Option 1').then((value) => {
      expect(value).to.equal('Option 1');
    });
  });
});

4。文件命令
在您的自訂命令中新增註釋以描述其目的和用法。這有助於其他開發人員理解您的程式碼並正確使用它。

例子：

// cypress/support/commands.js

/**
 * Custom command to login to the application
 * @param {string} email - User email
 * @param {string} password - User password
 */
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();
});

5。模組化通用操作
將常見操作封裝在自訂命令中，以促進重複使用並減少重複。這也透過抽象複雜的互動使測試更具可讀性。

例子：

// cypress/support/commands.js
Cypress.Commands.add('addItemToCart', (itemName) => {
  cy.get('.product-list').contains(itemName).click();
  cy.get('.add-to-cart').click();
});

用法：

// cypress/integration/cart.spec.js
describe('Cart Tests', () => {
  it('Should add an item to the cart', () => {
    cy.visit('/shop');
    cy.addItemToCart('Laptop');
    cy.get('.cart-items').should('contain', 'Laptop');
  });
});

結論

透過遵循這些最佳實踐，您可以在 Cypress 中建立自訂命令，這些命令不僅功能強大，而且可維護且易於理解。清晰的命名、參數化、連結、文件和模組化是編寫有效的自訂命令的關鍵。在您的測試自動化框架中實施這些實踐，以提高測試的品質和效率。

立即開始完善您的自訂命令，並將您的賽普拉斯測試提升到一個新的水平。測試愉快！