Cypress自动化测试分支逻辑咨询：发票支付与删除流程处理

核心思路 #

通过遍历发票列表，针对每个发票元素做金额判断+按钮存在性检查，分支执行支付或删除流程；同时拆分两个独立测试场景，分别验证两种业务逻辑。

1. 通用遍历分支实现（批量处理所有发票） #

先实现批量处理所有发票的逻辑，通过.each()遍历发票元素，结合金额解析和按钮存在性判断走不同流程：

// 遍历所有发票项，假设发票元素选择器为.invoice-item
cy.get('.invoice-item').each(($invoice) => {
  // 1. 解析发票金额（根据实际页面结构调整选择器和格式处理）
  cy.wrap($invoice)
    .find('.invoice-amount') // 金额元素的选择器
    .invoke('text')
    .then((amountText) => {
      // 去除金额中的非数字字符（如$、逗号），转为浮点数
      const cleanAmount = amountText.replace(/[^0-9.]/g, '');
      const invoiceAmount = parseFloat(cleanAmount);

      // 2. 检查当前发票的PAY按钮是否存在
      cy.wrap($invoice)
        .find('button:contains("PAY")') // PAY按钮选择器
        .then(($payButton) => {
          // 分支判断：金额>0且PAY按钮存在 → 执行支付流程
          if (invoiceAmount > 0 && $payButton.length > 0) {
            cy.wrap($payButton).click();
            // 这里添加支付流程的后续步骤，比如确认支付、填写表单等
            cy.get('.payment-confirm-btn').click();
            cy.contains('Payment completed').should('be.visible');
            cy.go('back'); // 返回发票列表继续处理下一个
          } 
          // 分支判断：金额为0 或 PAY按钮不存在 → 执行删除流程
          else {
            cy.wrap($invoice)
              .find('button:contains("DELETE")') // 删除按钮选择器
              .click();
            // 处理删除确认弹窗
            cy.get('.delete-confirm-modal').find('button:contains("Yes")').click();
            cy.contains('Invoice deleted successfully').should('be.visible');
          }
        });
    });
});

2. 拆分独立测试场景 #

按照需求拆分两个测试用例，分别聚焦两种业务场景：

场景1：验证有PAY按钮且金额>0的发票支付流程

it('should process payment for invoices with PAY button and positive amount', () => {
  // 过滤出包含PAY按钮的发票
  cy.get('.invoice-item:has(button:contains("PAY"))').each(($invoice) => {
    cy.wrap($invoice)
      .find('.invoice-amount')
      .invoke('text')
      .then((amountText) => {
        const invoiceAmount = parseFloat(amountText.replace(/[^0-9.]/g, ''));
        // 只处理金额>0的发票
        if (invoiceAmount > 0) {
          cy.wrap($invoice).find('button:contains("PAY")').click();
          // 模拟完整支付流程
          cy.get('#card-number').type('4111111111111111');
          cy.get('#expiry-date').type('12/25');
          cy.get('#cvv').type('123');
          cy.get('#submit-payment').click();
          cy.contains('Payment successful').should('be.visible');
          cy.go('back');
        }
      });
  });
});

场景2：验证无PAY按钮或金额为0的发票删除流程

it('should delete invoices with zero amount or no PAY button', () => {
  cy.get('.invoice-item').each(($invoice) => {
    cy.wrap($invoice)
      .find('.invoice-amount')
      .invoke('text')
      .then((amountText) => {
        const invoiceAmount = parseFloat(amountText.replace(/[^0-9.]/g, ''));
        
        cy.wrap($invoice)
          .find('button:contains("PAY")')
          .then(($payButton) => {
            // 满足任一条件则执行删除
            if (invoiceAmount === 0 || $payButton.length === 0) {
              cy.wrap($invoice).find('button:contains("DELETE")').click();
              cy.get('.confirm-delete').click();
              cy.contains('Invoice removed').should('be.visible');
            }
          });
      });
  });
});

关键注意事项 #

• 元素选择器适配：上述代码中的选择器（如.invoice-item、.invoice-amount）需替换为你项目中实际的DOM选择器；
• 金额格式兼容：如果金额包含千位分隔符（如1,000.00），需调整正则表达式处理，比如amountText.replace(/[^0-9.]/g, '')可以处理大部分情况；
• 异步等待：Cypress会自动等待元素，但如果页面有动态加载，可添加.should('be.visible')确保元素就绪后再操作；
• 页面刷新处理：删除发票后如果页面自动刷新，后续遍历可能失效，可在删除后重新查询发票列表，或用cy.reload()后再继续。

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