Cypress test runner crashing on clicking make payment using Stripe payment gateway

[amar0120]

Current behavior

After entering the testing card details like card number, cvc and expire date in Stripe Gateway... on clicking make button, cypress test runner is crashing without giving any error or warning message. Manually Stripe payment is working fine with same card details.

Desired behavior

Test runner should not be crash and in case of some major error - error should be shown there.

Test code to reproduce

 cy.get('iframe').its('0.contentDocument.body').should('not.be.empty')
        .then(cy.wrap).find('input[name="number"]').type(this.data.PaymentDetails.CardNumber)

    cy.get('iframe').its('0.contentDocument.body').should('not.be.empty')
        .then(cy.wrap).find('input[name="expiry"]').type(this.data.PaymentDetails.ExpMonthYear)

    cy.get('iframe').its('0.contentDocument.body').should('not.be.empty')
        .then(cy.wrap).find('input[name="cvc"]').type(this.data.PaymentDetails.Csv)

    cy.wait(5000)

    cy.get(".confirm-btn >button[id='c-submit-me']").click()    // Clicking on this, test runner is crashing.

Cypress Version

10.7.0

Node version

16.14.2

Operating System

Windows 10 Enterprise - OS build - 19044.1889

Debug Logs

Crashed... no logs generated.

Other

No response

[lmiller1990]

Before I try to reproduce, are you able to do the same thing with `DEBUG=cypress:* and see if there's anything in the logs after it crashes (you should see lots of logs in the terminal when you run with that flag).

Are you able to share a minimal example by any chance? I can use my own Stripe test key, but having a minimal example I can clone would be really useful. I usually fork this repo: https://github.com/cypress-io/cypress-test-tiny to make a minimal test case.

[amar0120]

Before I try to reproduce, are you able to do the same thing with `DEBUG=cypress:* and see if there's anything in the logs after it crashes (you should see lots of logs in the terminal when you run with that flag).

Are you able to share a minimal example by any chance? I can use my own Stripe test key, but having a minimal example I can clone would be really useful. I usually fork this repo: https://github.com/cypress-io/cypress-test-tiny to make a minimal test case.

Thanks @lmiller1990 for looking into it. I will check with suggested option DEBUG=cypress:* and will update the ticket accordingly.

[amar0120]

Before I try to reproduce, are you able to do the same thing with `DEBUG=cypress:* and see if there's anything in the logs after it crashes (you should see lots of logs in the terminal when you run with that flag). Are you able to share a minimal example by any chance? I can use my own Stripe test key, but having a minimal example I can clone would be really useful. I usually fork this repo: https://github.com/cypress-io/cypress-test-tiny to make a minimal test case.

Thanks @lmiller1990 for looking into it. I will check with suggested option DEBUG=cypress:* and will update the ticket accordingly.

Hi @lmiller1990 I tried to upload the generated terminal log using DEBUG=cypress:* but it not uploading here. So I have sent it to you over mail. Please have a look. Thank you very much. Amar

[lmiller1990]

Where did you send it? I do not see it. Try v-lachlan@cypress.io.

If you can put together a minimal reproduction that will greatly speed things up. Debug logs are good but often don't capture what we need.

[amar0120]

Where did you send it? I do not see it. Try v-lachlan@cypress.io.

If you can put together a minimal reproduction that will greatly speed things up. Debug logs are good but often don't capture what we need.

Hi @lmiller1990 I have pushed the test code to reproduce issue on my repository. Please clone the below repo. Repo name - CypressCrashing https://github.com/amar0120/CypressCrashing/commit/ea18c7898aedf57c883d04fc08d6d0eb7386989c

Thanks Amar

[lmiller1990]

Going to cc in @ZachJW34 - he will be helping out with this one, too.

[ZachJW34]

@amar0120 I am seeing weird behavior with your reproduction where the app is being redirected back to the specs list when the button is pressed. You noted that the App is crashing, is it crashing for you on the reproduction you provided? Also, I took a look at the Debug logs you sent to @lmiller1990, could you rerun the test with this command:

$env:DEBUG="cypress:*" ; npx cypress open *> log.txt (Noticed you are on Windows so I ran this with powershell)

This will log the output to log.txt with more verbose logging. Could you share the output of this file to me?

[amar0120]

@amar0120 I am seeing weird behavior with your reproduction where the app is being redirected back to the specs list when the button is pressed. You noted that the App is crashing, is it crashing for you on the reproduction you provided? Also, I took a look at the Debug logs you sent to @lmiller1990, could you rerun the test with this command:

$env:DEBUG="cypress:*" ; npx cypress open *> log.txt (Noticed you are on Windows so I ran this with powershell)

This will log the output to log.txt with more verbose logging. Could you share the output of this file to me?

Hi @ZachJW34 Please find the generated logs at https://github.com/amar0120/CypressCrashing/commit/ba0a1a45761206efbf0a938bd24d6b49b096e084

And Yes you are right, app is being redirected back to the specs list when the button is pressed as my end also. And this is the main issue that I am facing. It should verify the Thank you message.

Thanks & Regards, Amar Singh

[amar0120]

@nagash77 @ZachJW34 - please provide update on it. Please confirm if some alternate is there for this issue.

Regards Amar

[ZachJW34]

I will be looking into this today Amar!

On Mon, Sep 19, 2022 at 4:27 AM Amar Singh @.***> wrote:

@nagash77 https://github.com/nagash77 @ZachJW34 https://github.com/ZachJW34 - please provide update on it. Please confirm if some alternate is there for this issue.

Regards Amar

— Reply to this email directly, view it on GitHub https://github.com/cypress-io/cypress/issues/23772#issuecomment-1250783646, or unsubscribe https://github.com/notifications/unsubscribe-auth/AF76JJFFPKRZDGZATETRWH3V7AWZPANCNFSM6AAAAAAQJTMCNY . You are receiving this because you were mentioned.Message ID: @.***>

[amar0120]

@ZachJW34 - any luck on this issue.

[ZachJW34]

@amar0120 this issue has been routed to the appropriate team and will be prioritized accordingly!

[mschile]

@amar0120, it looks like the payment has already been completed on the provided link in the reproduction.

https://github.com/amar0120/CypressCrashing/blob/master/cypress/e2e/Issue-23772.cy.js#L7

Do you have another key value that I could use?

[amar0120]

Hi @mschile

Thank you very much for start looking into this issue and please find the below two more keys.

AF4F6911E2774C5593CD57415C1AAD98 31DC7EB13A88452FBFBBCAEB59DC4E08

Regards, Amar

[lmiller1990]

Not directly a solution, but take a look at this - it may be useful: https://github.com/cypress-io/cypress/issues/23712#issuecomment-1243139172. This thread has some information and solutions on how users are testing Stripe.

[amar0120]

@lmiller1990 @mschile I tried with the suggested approaches in https://github.com/cypress-io/cypress/issues/23712#issuecomment-1243139172, still my issue is not getting resolved. On each make payment click - cypress is redirecting back to the specs list :( Please provide your valuable inputs. Thanks

[amar0120]

Hi  Please find the log generated using `DEBUG=cypress:* in attachment. Thank you very muchAmar Singh On Monday, 12 September, 2022 at 04:08:52 pm IST, Lachlan Miller @.***> wrote:

Before I try to reproduce, are you able to do the same thing with `DEBUG=cypress:* and see if there's anything in the logs after it crashes (you should see lots of logs in the terminal when you run with that flag).

Are you able to share a minimal example by any chance? I can use my own Stripe test key, but having a minimal example I can clone would be really useful. I usually fork this repo: https://github.com/cypress-io/cypress-test-tiny to make a minimal test case.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

[mschile]

@amar0120, it appears Stripe is attempting to change the top url which is causing Cypress to go back to the spec list. I initially thought setting experimentalModifyObstructiveThirdPartyCode would resolve the issue but it did not. We will need to investigate that further.

However, in the meantime, I was able to get the test to successfully run using the following intercepts:

    beforeEach(() => {
        // TODO: Remove once https://github.com/cypress-io/cypress/issues/23772 is complete
        cy.intercept('https://r.stripe.com/0', (req) => {
            // the origin header is not getting set which is causing the request to fail
            req.headers['origin'] = 'https://js.stripe.com'
        })

        // TODO: Remove once https://github.com/cypress-io/cypress/issues/23772 is complete
        cy.intercept('https://js.stripe.com/v3', (req) => {
            req.on('response', (res) => {
                // stripe is attempting to change window.top location so change it to window.self
                res.body = res.body.replaceAll('window.top', 'window.self')
            })
        })
    })

[amar0120]

Thank you very much @mschile for investigation and suggesting the alternative approach. I will check it at my end and let you know if faced some issue in it.

[amar0120]

Thanks @mschile - Issue resolved at my end using suggested changes. Shall I close this ticket now or Is there something at cypress end to be handle. Please confirm.

[MehdiSv]

@mschile Thanks a lot for the amazing suggestion!

It solved the issue for me when I run cypress with yarn run cypress open then select Chrome.

It does not seem to work if I launch in headless mode with yarn run cypress run --browser chrome. It goes in an infinite loop, which is the behavior I had before adding the intercept.

Any idea what could be happening there?

EDIT: I added some logs in the intercept. They are never called in headless mode. They are when I launch with yarn run cypress open though. Not sure what is happening.

[mschile]

Thanks for the update @MehdiSv, I'll try to take a look at this later today.

[mschile]

@MehdiSv, @amar0120, I'm receiving an "Invalid confirmation code." error when using the codes from above. Could you create new codes for me?

[MehdiSv]

Hi @mschile! Thanks for looking into this! I don't work with Amar. Just happened to have the same issue 😁

I tried to create a sample repo to test with Stripe, and I don't have the issue when I run in headless mode.

I'm guessing the issue must be from our end. We do an additional redirect, after Stripe's redirect and it must cause some issues with Cypress.

[mschile]

@MehdiSv, thanks for clearing that up for me 😄. I'm not sure why the intercepts wouldn't run when you are in headless mode. If you are able to create a sample repo I'd be happy to look at it though.

[amar0120]

@MehdiSv, @amar0120, I'm receiving an "Invalid confirmation code." error when using the codes from above. Could you create new codes for me?

Hi @mschile , Actually we have restored the db, so the above keys will not work now. I will share the new keys today. Thanks

[amar0120]

Hi @mschile - Please find the new keys below: DD3859B60763425AA9DF2DC231D496C3 0660E80352FC404AB3F5F04C0F5C2B70

[adrienharnay]

Hi, any news on this issue?

[lmiller1990]

No update right now, I spent a few hours playing around with Stripe quickstart but I can't select the elements with Cypress - I'm not sure if I'm missing something, but it looks like Stripe makes it quite tricky for automation tools to interact with it.

[ManuC84]

I'm getting this same issue too.

[therale87]

@amar0120, it appears Stripe is attempting to change the top url which is causing Cypress to go back to the spec list. I initially thought setting experimentalModifyObstructiveThirdPartyCode would resolve the issue but it did not. We will need to investigate that further.

However, in the meantime, I was able to get the test to successfully run using the following intercepts:

    beforeEach(() => {
        // TODO: Remove once https://github.com/cypress-io/cypress/issues/23772 is complete
        cy.intercept('https://r.stripe.com/0', (req) => {
            // the origin header is not getting set which is causing the request to fail
            req.headers['origin'] = 'https://js.stripe.com'
        })

        // TODO: Remove once https://github.com/cypress-io/cypress/issues/23772 is complete
        cy.intercept('https://js.stripe.com/v3', (req) => {
            req.on('response', (res) => {
                // stripe is attempting to change window.top location so change it to window.self
                res.body = res.body.replaceAll('window.top', 'window.self')
            })
        })
    })

Thanks a lot. Works perfect. This is actually the only solution I have found after few hours and it is working perfect.

[ryanfiller]

I just want to say (and comment so I get subscriptions to the resolution of this) that I've been banging my head against this problem for days and this solution finally got me past the issue.