Cypress 中自定义命令的最佳实践：详细指南-js教程-PHP中文网

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

WBOY

发布： 2024-07-12 08:16:11

转载

848人浏览过

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');
  });
});

登录后复制