如何使用Cypress.io处理PayPal弹窗元素及支付自动化测试？

我完全懂你的困扰——Cypress官方确实不建议跳转到第三方站点，但既然业务需求必须和PayPal完成端到端的支付验证，咱们有几个经过实践验证的方案可以搞定这个问题：

1. 用Cypress的cy.origin()处理跨域交互（推荐） #

Cypress 9.0+推出的cy.origin()命令专门用来解决跨域名的测试场景，完美适配PayPal这类第三方支付流程。它能让你在测试中无缝切换到PayPal的域名下完成操作，再切回你的站点验证结果。

示例代码： #

// 触发页面上的PayPal支付按钮
cy.get('[data-testid="paypal-checkout-btn"]').click()

// 切换到PayPal域名，完成支付流程
cy.origin('https://www.paypal.com', () => {
  // 输入测试用的PayPal沙箱邮箱
  cy.get('#email').type('your-sandbox-email@example.com')
  cy.get('#btnNext').click()
  
  // 输入沙箱账号密码
  cy.get('#password').type('your-sandbox-password')
  cy.get('#btnLogin').click()
  
  // 确认支付操作
  cy.get('[data-testid="approve-button"]').click()
})

// 回到你的站点，验证支付完成后的元素
cy.get('[data-testid="success-message"]').should('be.visible')
cy.get('[data-testid="order-number"]').should('contain.text', 'ORD-')

前置配置： #

需要在cypress.config.js中开启跨域支持：

module.exports = defineConfig({
  e2e: {
    experimentalSessionAndOrigin: true,
    // 其他你的项目配置...
  }
})

⚠️ 注意：一定要用PayPal的沙箱环境（Sandbox）账号测试，生产环境不仅有风险，还会触发人机验证打断流程。

2. 模拟PayPal支付回调（快速测试方案） #

如果你的测试重点是验证支付完成后的页面元素，而非PayPal本身的流程，可以直接拦截后端的支付确认请求，模拟成功响应，跳过真实的PayPal交互。

示例代码： #

// 拦截你的后端接收PayPal支付结果的API
cy.intercept('POST', '/api/paypal/confirm-payment', {
  statusCode: 200,
  body: {
    success: true,
    orderId: 'TEST-ORD-789012'
  }
}).as('paypalConfirm')

// 点击PayPal支付按钮
cy.get('[data-testid="paypal-checkout-btn"]').click()

// 等待拦截的请求完成，直接验证成功状态
cy.wait('@paypalConfirm')
cy.get('[data-testid="success-message"]').should('be.visible')

这个方案的优势是测试速度快，不受PayPal站点稳定性影响，但前提是你能控制后端的回调逻辑，或者前端有对应的状态处理逻辑。

3. 处理PayPal iframe弹窗 #

有些场景下，PayPal按钮是通过iframe嵌入到你的页面中的，这时候需要先定位到iframe，再在iframe内部操作：

示例代码： #

// 定位到PayPal的iframe
cy.get('iframe[src*="paypal.com"]').then($iframe => {
  const iframeBody = $iframe.contents().find('body')
  // 在iframe内点击支付按钮
  cy.wrap(iframeBody).find('[data-testid="paypal-button"]').click()
})

// 之后再用cy.origin()切换到PayPal域名完成后续操作，和方案1一致

额外注意事项 #

• PayPal的页面元素选择器可能会更新，尽量使用官方提供的测试ID，或者用更稳定的属性（比如data-testid）来定位元素，避免选择器失效。
• 如果沙箱环境出现人机验证，你可以在PayPal沙箱账号设置中关闭相关验证，尽量保持测试环境纯净。

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