cypress: After version 5.5 Stripe Checkout tests break out of the iframe

The stripe checkout integration test worked for me after adding this:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  experimentalModifyObstructiveThirdPartyCode: true,
})

Here are the docs.

oh my fcking god. Now you’re telling me not built yet? fuck… I almost launch production with it…

Before closing it would be good to have a suggested workaround from someone at Cypress. Not being able to test checkout flows is pretty problematic.

I can reproduce it for other sites as well. Verified on 5.3 and 5.5.

We just started getting an error on our Stripe tests using Cypress 5.5.0 which was fixed by adding the following to the beforeEach in our tests:

cy.on('uncaught:exception', (err) => {
  // Allow stripe error: "paymentRequest Element didn't mount normally"
  if (err.message.includes('paymentRequest')) {
    return false;
  }
});

You can also do the same globally with Cypress.on('.... if required.

can confirm the issue, waiting for a fix for this.

Hello,

I am facing the same issue as well. I am using cypress 9.0.0 and have currently no intention of downgrading just to solve the stripe problem as this will introduce just some other issues. Also downgrading 4 Major versions seems like a bad thing to do. Are there any updates on this issue? Is there a way to really test the full checkout flow? like pressing a button to open the checkout window.

Thanks.

The response from the Cypress team is that iframe support is coming. I know this isn’t a great solution for people today and it’s a big feature so will take time to build. But if we take time aside to find workarounds for all the situations for features that aren’t truly supported, then it will delay our team delivering the actual feature.

Stripe testing is a big request for iframe testing and we’ll definitely cover the most common testing situations. As mentioned earlier, Stripe intentionally doesn’t want itself run within an iframe, so we have to address the core issues.

This issue was updated to reflect the API’s we’re currently working on: https://github.com/cypress-io/cypress/issues/136

Recently I was trying to apply some workarounds to this ‘Stripe issue’ and update cypress to version 9.2.1 but nothing really works well. I had to revert it back to 5.5

implementing the creation of the subscription logic (yikes) via the API

This is what we did. I hated every second of it but it works fine.

Anyone got any ideas how we are meant to test this then?

We decided to stick to using the only working version: 5.5.0 until there is a fix or a better workaround.

yes, having the same issue. Hope it get’s resolved soon! I think this is something that Stripe has to fix, as it’s happening in other iframed situations too, not only in cypress.

I am able to see the issue of the application taking over the entire Test Runner frame. This is pretty weird because I can only get this test passing on Cypress 5.5.0. Before 5.5.0 and after 5.5.0 break out of the frame.

If I had to guess, I would suspect that this PR made this test work: https://github.com/cypress-io/cypress/pull/8827 and we had to make a patch to that behavior since then because it broke other apps. https://github.com/cypress-io/cypress/pull/9018 (I haven’t verified this though).

5.5.0

5.4.0 / 5.6.0

For us the best solution would be to have a setting that enables the hack that fixes this in 5.5. If it’s off by default, it shouldn’t break other apps. Otherwise we’re stuck at using 5.5 if no other workaround is found. Not testing the payment workflow is not an option.

The workaround @MikeKoval suggested seems promising, but I would strongly prefer to write a test that tells the runner to click a button rather than calling a Stripe method manually since then I’m not testing if the button works anymore.

Would it perhaps be possible for the runner to detect when the iframe takes over the whole browser tab and handle the case more gracefully? I think the last I checked the whole test just froze.

I’m hoping Stripe Checkout is popular enough to warrant considering these otherwise suboptimal solutions.

Having this issue as well, would love a clear statement on whether it’s done intentionally like @TuureKaunisto suggested.

I got a reply confirming it’s intentional from Stripe support:

Checked-in with our engineering team, and they confirmed that Checkout is behaving as expected. Additional context: We intentionally do a top level redirect in Checkout and it is by-design that we don’t accommodate iframes (it breaks wallets, certain redirect flows, etc.). It seems like some versions of Cypress hacked around this and their hack now no longer works or they removed the hack.