使用Cypress自动化工具测试Stripe支付时出现白屏问题

针对你遇到的Stripe结账页面白屏无法加载的问题，可尝试以下几个解决方案：

1. 修正按钮点击逻辑 #

你的代码中使用了click({ multiple: true })，这会同时点击所有匹配data-id="planBtn"的按钮，可能触发多个Stripe结账流程导致冲突白屏。建议只点击单个目标按钮：

it("nav", () => {
    cy.visit("/sub-plans");
    // 选择第一个计划按钮点击，或根据需求指定索引
    cy.get('[data-id="planBtn"]').eq(0).click();
});

2. 正确处理Stripe iframe加载 #

Stripe结账页面通过iframe加载，Cypress需要明确等待并切换到该iframe才能正常交互：

it("nav", () => {
    cy.visit("/sub-plans");
    cy.get('[data-id="planBtn"]').eq(0).click();
    
    // 等待Stripe iframe出现并可见
    cy.get('iframe[src*="stripe.com"]', { timeout: 10000 })
      .should('be.visible')
      .then($iframe => {
        // 切换到iframe内部的body元素
        const $body = $iframe.contents().find('body');
        cy.wrap($body).should('not.be.empty');
      });
});

3. 禁用Cypress跨域安全限制（测试环境专用） #

Stripe域名与你的测试站点属于跨域，Cypress默认的web安全策略可能阻止资源加载。在cypress.config.js中添加配置：

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    // 仅在测试环境启用，生产环境请勿开启
    chromeWebSecurity: false,
    // 其他配置...
  },
});

4. 验证测试环境的Stripe配置 #

确认你的前端代码在测试环境中使用的是Stripe测试公钥（格式为pk_test_xxxx），如果公钥配置错误，Stripe元素会无法初始化导致白屏。

5. 确保账号状态正常 #

在cy.resetAccount执行后，添加断言确认账号无活跃订阅，避免残留状态干扰结账流程：

before("Login and reset account", () => {
    cy.loginViaApi("user", "pass", Cypress.env("TESTING_URL"));
    cy.resetAccount("user", "pass", Cypress.env("TESTING_URL"));
    // 断言账号订阅状态为空（根据你的接口/页面逻辑调整）
    cy.request(`${Cypress.env("TESTING_URL")}/api/subscriptions`)
      .its('body')
      .should('be.empty');
});

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