Mocha+Cypress如何实现可参数化测试模板消除多应用用例重复代码

Mocha 完全支持这种参数化测试模板的实现，你可以通过高阶函数封装通用测试逻辑，传入不同应用的专属配置即可生成对应测试集，大幅减少重复代码。

1. Fixture的回调函数使用了普通function声明，导致内部this指向发生偏移，无法正确挂载数据到测试上下文
2. 环境变量读取写法错误，把路径后缀写进了环境变量的key中
3. 部分数据挂载的执行顺序不符合Cypress的异步队列规则

1. 封装通用测试模板 #

首先新建通用模板文件support/utils/voucher-test-template.ts，代码如下：

import voucherActions from '../actions/common/voucher-actions';
import {sampleAddressData} from '../types/checkout-data';
import {localsCatsApp, localsDogsApp} from '../types/locals';
import {CheckoutGuestModel, Voucher, CheckoutActions} from '../types/types';

// 定义入参接口
export interface VoucherTestConfig {
  // 应用标识，用于取fixture和环境变量
  appKey: 'cats' | 'dogs';
  // 对应应用的结账操作类
  checkoutActions: CheckoutActions;
  // 对应应用的代金券配置key，比如cats用CHF15，dogs用CHF30
  voucherKey: string;
  // 对应应用的测试商品key
  productKey: string;
}

export function generateVoucherTests(config: VoucherTestConfig) {
  context(`${config.appKey}App 代金券核销测试`, function() {
    const env = Cypress.env('dataEnv');
    // 根据应用标识取对应多语言配置
    const loc = config.appKey === 'cats' ? localsCatsApp.de : localsDogsApp.de;

    beforeEach(function() {
      // 预加载fixture
      cy.fixture(`${env}/users`).as('users');
      cy.fixture(`${env}/products`).as('products');
      cy.fixture(`${env}/vouchers`).as('vouchers');
      
      // 拼接测试地址，注意环境变量名和路径后缀分开
      this.url = `${Cypress.env(`${config.appKey}AppBaseurl`)}${loc.language}`;
    });

    describe('游客身份核销代金券', function() {
      // 每个用例前预处理专属数据
      beforeEach(function() {
        // 从预加载的fixture中取对应应用的数据
        this.appVouchers = this.vouchers[`${config.appKey}app`].voucher;
        this.appProducts = this.products[`${config.appKey}app`];
      });

      it('正常核销有效代金券', function() {
        // 构造代金券对象
        const voucher: Voucher = {
          code: this.appVouchers[config.voucherKey].code,
          value: this.appVouchers[config.voucherKey].value,
          type: this.appVouchers[config.voucherKey].type,
          threshold: this.appVouchers[config.voucherKey].threshold
        };
        // 构造结账参数
        const checkoutGuestModel: CheckoutGuestModel = {
          url: this.url,
          userAddressData: sampleAddressData,
          product: this.appProducts[config.productKey],
          threshold: voucher.threshold
        };

        // 通用测试逻辑
        config.checkoutActions.landOnCheckoutPageAsGuest(checkoutGuestModel);
        voucherActions.saveCheckoutPricesBeforeApplyingVoucher();
        voucherActions.redeemVoucher(voucher, true, loc);
        voucherActions.verifyVoucherApplied(voucher);
        config.checkoutActions.finalizeOrder(loc.checkout.orderNowText);
        config.checkoutActions.verifyCheckoutThankYouPage(loc.checkout.thankYouMessage);
      });
    });
  });
}

2. 编写猫咪商城测试用例文件redeem-voucher-catsapp-spec.ts #

import checkoutActions from '../../../support/actions/catsapp/checkout-actions';
import { generateVoucherTests } from '../../../support/utils/voucher-test-template';

generateVoucherTests({
  appKey: 'cats',
  checkoutActions: checkoutActions,
  voucherKey: 'CHF15',
  productKey: 'standardProduct'
});

3. 编写狗狗商城测试用例文件redeem-voucher-dogsapp-spec.ts #

import checkoutActions from '../../../support/actions/DogsApp/checkout-actions';
import { generateVoucherTests } from '../../../support/utils/voucher-test-template';

generateVoucherTests({
  appKey: 'dogs',
  checkoutActions: checkoutActions,
  voucherKey: 'CHF30',
  productKey: 'standardProduct3'
});

如果后续有更多同类应用需要测试，仅需要新增一个spec文件，传入对应应用的配置即可，不需要重复编写测试逻辑。如果不同应用的测试逻辑有细微差异，也可以把差异点作为可选参数传入模板，做分支判断处理。

内容的提问来源于stack exchange，提问作者mismas