当前位置：首页 > 文章列表 > 文章 > 前端 > Cypress 中自定义命令的最佳实践：详细指南

Cypress 中自定义命令的最佳实践：详细指南

来源：dev.to 2024-07-11 22:15:55 0浏览收藏

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《Cypress 中自定义命令的最佳实践：详细指南》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

介绍

在上一篇文章中，我们介绍了 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('test@example.com', '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: 'john.doe@example.com'
    };
    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');
  });
});