Cypress捕获Snackbar并按类型处理的自动化测试函数实现求助

函数参数说明 #

• snackbarKey：必填，Snackbar 业务唯一key，需和UI侧传入的key参数保持一致
• options：可选配置项，支持自定义超时时间、自定义dataTest前缀

完整实现代码 #

/**
 * 校验页面Snackbar状态并按规则处理
 * @param {string} snackbarKey Snackbar业务唯一标识，与UI侧传入的key参数一致
 * @param {Object} [options={}] 配置项
 * @param {number} [options.timeout=3000] 等待Snackbar出现的超时时间（毫秒）
 * @param {string} [options.customDataTest=null] 自定义data-test属性值，和UI侧传入的dataTest参数一致
 */
Cypress.Commands.add('checkSnackbar', (snackbarKey, options = {}) => {
  const { timeout = 3000, customDataTest = null } = options;
  // 按UI侧规则生成各类型Snackbar的data-test选择器
  const selectors = {
    error: customDataTest ? `[data-test="${customDataTest}-error"]` : `[data-test="${snackbarKey}-error-error"]`,
    success: customDataTest ? `[data-test="${customDataTest}-success"]` : `[data-test="${snackbarKey}-success-success"]`,
    warning: customDataTest ? `[data-test="${customDataTest}-warning"]` : `[data-test="${snackbarKey}-warning-warning"]`,
    info: customDataTest ? `[data-test="${customDataTest}-notification"]` : `[data-test="${snackbarKey}-info-notification"]`,
  };

  cy.get('body').then($body => {
    // 优先级最高：检查Error类型Snackbar
    if ($body.find(selectors.error).length > 0) {
      const errorMsg = $body.find(selectors.error).text().trim();
      Cypress.log({
        name: 'SnackbarError',
        message: `捕获错误Snackbar：${errorMsg}`,
      });
      // 终止测试并标记失败
      throw new Error(`测试终止，出现错误提示：${errorMsg}`);
    }

    // 检查Success类型Snackbar
    if ($body.find(selectors.success).length > 0) {
      const successMsg = $body.find(selectors.success).text().trim();
      Cypress.log({
        name: 'SnackbarSuccess',
        message: `捕获成功Snackbar：${successMsg}`,
      });
      return;
    }

    // 检查Warning类型Snackbar
    if ($body.find(selectors.warning).length > 0) {
      const warningMsg = $body.find(selectors.warning).text().trim();
      Cypress.log({
        name: 'SnackbarWarning',
        message: `捕获警告Snackbar：${warningMsg}`,
      });
      // 存入环境变量供后续步骤取用
      Cypress.env('latestSnackbarWarning', warningMsg);
      return;
    }

    // 检查Info类型Snackbar
    if ($body.find(selectors.info).length > 0) {
      const infoMsg = $body.find(selectors.info).text().trim();
      Cypress.log({
        name: 'SnackbarInfo',
        message: `捕获通知Snackbar：${infoMsg}`,
      });
      // 存入环境变量供后续步骤取用
      Cypress.env('latestSnackbarInfo', infoMsg);
      return;
    }

    // 无任何Snackbar出现
    Cypress.log({
      name: 'SnackbarNone',
      message: 'no snackbar present',
    });
    Cypress.env('latestSnackbar', 'nothing is present');
  });
});

使用方法 #

1. 将上述代码放入cypress/support/commands.js文件中，全局注册自定义命令
2. 测试用例中调用示例：

// 普通场景：操作后校验Snackbar
cy.get('#submit-form-btn').click();
cy.checkSnackbar('user_create');

// 自定义配置场景
cy.checkSnackbar('order_pay', {
  customDataTest: 'custom_snackbar',
  timeout: 5000
});

// 页面跳转后校验
cy.visit('/user-center');
cy.checkSnackbar('page_load');

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