Cypress browsers close after selecting payment method KLARNA

[theoBourelakos]

Current behavior

Steps:

1. In check out, i select KLARNA payment method
2. Click continue to payment
3. Cypress browsers CLOSE when the loader appears on check out. (Happens only with KLARNA)

Desired behavior

Cypress browser not to close and redirect me to KLARNA page.

Test code to reproduce

      cy.get('[data-vtest="checkoutMainNavigationBottom"] > [data-vtest="navSuccessButton"] > [data-vtest="successButton"]').click()
          cy.wait(2000)

      /* HERE CYPRESS IS BEING CLOSED FORCEFULLY */ 
      
      //Verify correct URL 
        // Step 2: Handle Klarna payment page redirection
        cy.origin('https://pay.playground.klarna.com', () => {
          cy.url().should('include', 'pay.playground.klarna.com')
          cy.wait(2000)
          cy.get('#collectPhonePurchaseFlow__nav-bar__klarna_logo').should('exist').and('be.visible')
        });

        // Step 3: Handle Klarna login page redirection
        cy.origin('https://login.playground.klarna.com', () => {
          cy.url().should('include', 'login.playground.klarna.com')
          cy.get('body').should('exist').and('be.visible')
        });

Cypress Version

13.15.2

Node version

20.17.0

Operating System

Windows 11 Pro 21H2

Debug Logs

No response

Other

[mschile]

Hi @theoBourelakos, could you try enabling experimentalModifyObstructiveThirdPartyCode to see if that resolves the issue?

[theoBourelakos]

Hello ,I am already using this. ***@***.*** Theodore Bourelakos QA Team Leader T. (+30) 211 1094500 ***@***.*** Your Digital Transformation Partner www.lighthouse.gr<https://www.lighthouse.gr/> ***@***.***<https://www.facebook.com/LighthouseOmnichannel> ***@***.*** <https://www.linkedin.com/company/lighthouse-sa> ***@***.*** ***@***.*** <https://www.lighthouse.gr/google-premier-partners> ***@***.*** From: Matt Schile ***@***.***> Sent: Δευτέρα, 18 Νοεμβρίου 2024 10:08 μμ To: cypress-io/cypress ***@***.***> Cc: Theodoros Bourelakos ***@***.***>; Mention ***@***.***> Subject: Re: [cypress-io/cypress] Cypress browsers close after selecting payment method KLARNA (Issue #30621) Hi @theoBourelakos<https://github.com/theoBourelakos>, could you try enabling experimentalModifyObstructiveThirdPartyCode<https://docs.cypress.io/app/references/experiments#Configuration> to see if that resolves the issue? — Reply to this email directly, view it on GitHub<#30621 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BMKJ5EPPXZH633SGH2QVMZL2BJCLNAVCNFSM6AAAAABR3C2DR2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIOBUGAYTGNBXGE>. You are receiving this because you were mentioned.Message ID: ***@***.******@***.***>>

[ryanthemanuel]

@theoBourelakos, can you provide a reproducible example of the issue you're encountering. Here are some tips for providing a Short, Self Contained, Correct, Example and our own Troubleshooting Cypress guide.

Forking Cypress Test Tiny makes sharing a reproducible example easier to share and easier for our engineers to replicate your issues. This method also keeps the reproduction as simple as possible, which helps us eliminate potential causes and noise from the investigation.

[theoBourelakos]

`

///

describe('Checkout: Payment Methods - Klarna', function() {
it('On Site delivery and Klarna', function() {

  cy.visit('https://venddeshopqa.staginglh.com/el/paidi/agori/pantelonia/tommy-hilfiger-tommy-hilfiger-casual-panteloni_128872/?skuid=128874')      
  cy.wait(4000)
  //Accept cookies
 cy.get('.js-accept').click()
 cy.wait(2000)
      //Click add to cart 
      cy.get('[data-vtest="pdAddToCart"] :visible').scrollIntoView().click()                               
      cy.wait(4000)
      
      cy.get('[data-vtest="cartWidgetTrigger"]').click({force:true})
      cy.wait(2000)
      cy.get('[data-vtest="cartWidgetEditCart"]').click('left') //Click buy
      cy.wait(2000)
      //Click continue to pay 
      cy.get('[data-vtest="cartContinueOrderButton"]').first().click({force:true})
      cy.wait(2000)
      cy.get('[data-vtest="checkoutLoginGuestButton"]').click() //Click check out as guest
      cy.wait(2000)
      //Consent Page
      cy.get('label > span').click().wait(1000)
      cy.get('.terms-consent-btn').click()
      cy.wait(5000)

      //Profile email
      cy.get('[data-vtest="checkoutProfileEmailInput"]').type('{selectall}[email protected]')
     
      //Shipping Address
      cy.get('[data-vtest="checkoutShippingFirstNameInput"]').type('Τέστερ Guest Όνομα','')
      cy.get('[data-vtest="checkoutShippingLastNameInput"]').type('Τέστερ Guest Επώνυμο','')          
      cy.get('[data-vtest="checkoutShippingPhoneInput"]').type('{selectall}2111094500')            
      cy.get('[data-vtest="checkoutShippingAddressInput"]').type('Συγγρού 154')
      cy.get('[data-vtest="checkoutShippingPostCodeInput"]').type('17671')
      cy.wait(2000)
      cy.get('[data-vtest="checkoutShippingCityInput"]').type('{selectall}Καλλιθέα')                        
      cy.get('[data-vtest="checkoutShippingCourrierCommentsInput"]').type('Αυτά είναι Lighthouse test.')
                 
      //Select Shipping Method
      cy.get(':nth-child(1) > .delivery-types-list > :nth-child(1) > .radio-wrapper > label > .speedex').click()
      cy.wait(4000)
      
      //Select Payment Method
      cy.get('.klarna-logo').click({force:true}).wait(1500)
      
      //Add this in case Shipping Mobile exists but the Profile Mobile is not (to cover project general cases)
      cy.get('[data-vtest="checkoutShippingMobileInput"]').type('{selectall}6912345780')
      
      //Check the terms check box
      cy.get('[data-vtest="termsAcceptedCheckBox"]').eq(0).trigger('click',{force:true})//eq(0)=desktop
      cy.wait(1000)
      //Click ΟΛΟΚΛΗΡΩΣΗ button
       
      cy.get('[data-vtest="checkoutMainNavigationBottom"] > [data-vtest="navSuccessButton"] > [data-vtest="successButton"]').click()
      cy.wait(2000)
      
      cy.wait(10000)
      //Verify correct URL 

        // Step 2: Handle Klarna payment page redirection
        cy.origin('https://pay.playground.klarna.com', () => {
          cy.url().should('include', 'pay.playground.klarna.com');
          cy.wait(2000);
          cy.get('#collectPhonePurchaseFlow__nav-bar__klarna_logo').should('exist').and('be.visible');
          cy.get('#phone').should('have.value', '690 000 0000');
        })

        // Step 3: Handle Klarna login page redirection
        cy.origin('https://login.playground.klarna.com', () => {
          cy.url().should('include', 'login.playground.klarna.com');
          cy.get('body').should('exist').and('be.visible');
        })
      
    //Verify correct URL                   
    cy.url().should('contain','checkout/completion.aspx')
    cy.get('[data-vtest="checkoutOrderReviewReceiptText"]').should('be.visible')
    cy.get('[data-vtest="checkoutOrderReviewInvoiceText"]').should('not.be.visible')

}) //it
})//describe

`

This is an over-simplified version of my test and still the Cypress closes . so If you can run it and tell me what behavior you see i would be happy.

[ryanthemanuel]

Thank you for the reproduction @theoBourelakos. With it, I was able to reproduce the problem and I think I found a workaround. We have logic to intercept submits that try and navigate top, but it's not working for one of the routes. If you add this to the top of your test, I believe it will no longer close Cypress:

  cy.intercept('*/processorder', (req) => {
    req.continue((res) => {
      res.body = res.body.replace('_top', '')
    })
  })

I'll still keep this issue open as there is likely something we can do on our end to resolve this as well. Let us know if the workaround works.

[ryanthemanuel]

For posterity, this seems to be happening, with a document that looks like this:

<body onload='document.form.submit()'>
   <form name='form' action='<url>' method='POST' target='_top'></form>
</body>

We have logic to intercept form submissions, but this only works when events are triggered and document.form.submit() does not trigger an event. We get around this in cross origin cases by patching HTMLFormElement.prototype.submit, but this was not done outside of cross origin for some reason. Likely the fix would be to do that in non cross origin cases as well.

[theoBourelakos]

Thanks a lot! It worked this way.