在Cypress测试网站时，如何在Stripe结账页添加信用卡数据

1. 基础跳转流程实现 #

先完成mysite.com注册页的前置操作，点击「下一步」按钮并验证跳转至Stripe支付页面：

// 访问注册页面
cy.visit('https://mysite.com/register');

// 填写注册页必要信息（示例：邮箱、密码）
cy.get('input[name="email"]').type('test-user@example.com');
cy.get('input[name="password"]').type('test-password-123');

// 点击「下一步」按钮
cy.get('button:contains("下一步")').click();

// 验证页面跳转至Stripe支付页
cy.url().should('include', 'https://checkout.stripe.com/pay');

2. 操作Stripe支付表单（处理iframe） #

Stripe支付表单通常嵌套在iframe中，Cypress无法直接操作iframe内元素，需通过iframe定位来处理：

方法1：使用Cypress官方iframe插件（推荐）

先安装插件：

npm install -D cypress-iframe

在cypress/support/e2e.js中导入插件：

import 'cypress-iframe';

测试用例中操作iframe：

// 等待Stripe iframe加载完成
cy.frameLoaded('iframe[src*="stripe.com/pay"]');

// 进入iframe并填写支付信息
cy.iframe('iframe[src*="stripe.com/pay"]')
  .find('input[name="cardnumber"]')
  .type('4242424242424242'); // Stripe测试卡号

cy.iframe('iframe[src*="stripe.com/pay"]')
  .find('input[name="exp-date"]')
  .type('1230'); // 未来的过期日期（月/年）

cy.iframe('iframe[src*="stripe.com/pay"]')
  .find('input[name="cvc"]')
  .type('123'); // 测试CVC码

// 点击Stripe支付按钮（文本根据实际页面调整）
cy.iframe('iframe[src*="stripe.com/pay"]')
  .find('button:contains("支付")')
  .click();

方法2：自定义iframe命令（无需插件）

在cypress/support/commands.js中添加自定义命令：

Cypress.Commands.add('iframe', { prevSubject: 'element' }, ($iframe) => {
  return new Cypress.Promise((resolve) => {
    $iframe.on('load', () => {
      resolve($iframe.contents().find('body'));
    });
  });
});

测试用例中使用自定义命令：

// 定位iframe并等待加载
cy.get('iframe[src*="stripe.com/pay"]')
  .iframe()
  .then((body) => {
    // 在iframe内操作元素
    cy.wrap(body).find('input[name="cardnumber"]').type('4242424242424242');
    cy.wrap(body).find('input[name="exp-date"]').type('1230');
    cy.wrap(body).find('input[name="cvc"]').type('123');
    cy.wrap(body).find('button:contains("支付")').click();
  });

3. 验证后续流程 #

完成支付后，验证是否返回原站点并完成注册流程：

// 验证跳转回mysite.com的注册完成页
cy.url().should('include', 'https://mysite.com/register-success');

// 可选：验证注册成功状态（比如欢迎文案）
cy.get('h1').should('contain', '注册成功');

注意事项 #

• 使用Stripe提供的测试卡号进行测试，避免产生真实交易：
  • 卡号：4242 4242 4242 4242
  • 过期日期：任意未来的月/年（如12/30）
  • CVC：任意3位数字
• 若Stripe iframe的选择器不匹配，可通过浏览器开发者工具查看iframe的src属性或其他标识来调整定位器。

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