介绍

在我们之前的文章中，我们介绍了 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 中创建自定义命令，这些命令不仅功能强大，而且可维护且易于理解。清晰的命名、参数化、链接、文档和模块化是编写有效的自定义命令的关键。在您的测试自动化框架中实施这些实践，以提高测试的质量和效率。

立即开始​​完善您的自定义命令，并将您的赛普拉斯测试提升到一个新的水平。测试愉快！