Unable to complete e2e test using paypal payment (on sanbox test website)

[minopica]

Current behavior

I am using cyress 10.7.0 in order to perform E2E tests on a selfcare webapp that provides also the possibilty to perform payment through paypal.
In the test environment we can use sandbox test paypal website
As soon as the user is redirected to sandbox in order to confirm the paypal credentials then the cypress runner disappears and the test get stuck.

I added the following configurations into cypress.config.js file:

chromeWebSecurity: false,
defaultCommandTimeout: 20000,
pageLoadTimeout: 60000,
watchForFileChanges: false,

See linked issue:
#22186

I tryed also to add the "experimentalModifyObstructiveThirdPartyCode" parameter into the cypress.config.js file:

experimentalModifyObstructiveThirdPartyCode: true

but with this configuration ALL my test specs fail with the following error:

as soos as the cy.visit("...") command is invoked I got an unexpected exception "(uncaught exception)SyntaxError: Invalid left-hand side in assignment", see attached screenshot.

Desired behavior

No response

Test code to reproduce

You have to use a website which redirects the user to perform payment on paypal test website (sandbox)

Cypress Version

10.7.0

Node version

16.17.0

Operating System

macOS 12.5.1

Debug Logs

No response

Other

No response

[AtofStryker]

Hi @minopica. Thank you for opening an issue. Looks like this might be related to #14986. Have you tried the experimentalModifyObstructiveThirdPartyCode option to prevent the runner from disappearing? My guess is this gets you further in your test, but you still may be unable to checkout until we support cypress in 3rd party iframes. Iframe support and paypal payments should be supported in #22539

[minopica]

Hi @AtofStryker I tryed also to add the "experimentalModifyObstructiveThirdPartyCode" parameter into the cypress.config.js file:

experimentalModifyObstructiveThirdPartyCode: true

but with this configuration ALL my test specs fail with the following error:

as soos as the cy.visit("...") command is invoked I got an unexpected exception "(uncaught exception)SyntaxError: Invalid left-hand side in assignment", see attached screenshot in the comment posted above.

can you help me to solve this issue?

[AtofStryker]

@minopica I can try! Are you able to provide a reproduction repository? I am wondering if we are rewriting something that might be causing a syntax error.

[minopica]

When I use experimentalModifyObstructiveThirdPartyCode: true all the tests fail with the error
"SyntaxError
The following error originated from your application code, not from Cypress.

Invalid left-hand side in assignment
"

following an example of js test that is failing:

// <reference types="Cypress" />

describe('Cypress Studio Demo', () => {

    it('create new transaction', () => {

          /* ==== Generated with Cypress Studio ==== */
      cy.visit('https://ac.windtre.it');
      /* ==== End Cypress Studio ==== */
      /* ==== Generated with Cypress Studio ==== */
      cy.get('#login_entra').click();
      cy.get('.mat-form-field-infix').click();
      cy.get('#firstInput').clear();
      cy.get('#firstInput').type('[email protected]');
      cy.get('#login_continua').click();
      cy.get('form.ng-untouched > .mat-form-field > .mat-form-field-wrapper > .mat-form-field-flex > .mat-form-field-infix').click();
      cy.get('#mat-input-1').clear();
      cy.get('#mat-input-1').type('****');
      cy.get('#accedi').click();
      cy.get('#Tariffe\\ estero > .w3-link').click({force: true});
      /* ==== End Cypress Studio ==== */
    })
  })

following the cypress.config.js:

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

module.exports = defineConfig({
  chromeWebSecurity: false,
  projectId: "rwdmnz",
  defaultCommandTimeout: 20000,
  pageLoadTimeout: 60000,
  watchForFileChanges: false,

  env: {
    url_bs: 'https://****:****[email protected]/oa/auth/login',
    url_test: "http://pwa.dev.windtre.it/oa/auth/login"
  },

  e2e: {
    experimentalStudio: true,
    experimentalModifyObstructiveThirdPartyCode: true,
    experimentalSessionAndOrigin: true,
    setupNodeEvents(on, config) {
      // implement node event listeners here
      const store = {}
      on('task',{
        saveToken(jwt) {
          console.log('token saveToken jwt:' + jwt)
          store['token'] = jwt
          return null
        },
        loadToken() {
          return store['token']
        },
        saveChallengeToken(jwt) {
          console.log('token saveChallengeToken jwt:' + jwt)
          store['challengeToken'] = jwt
          return null
        },
        loadChallengeToken() {
          return store['challengeToken']
        },
        saveCodiceCliente(code) {
          console.log('codice cliente salvato:' + code)
          store['codice_cliente'] = code
          return null
        },
        loadCodiceCliente() {
          return store['codice_cliente']
        },
        saveLineId(linea) {
          console.log('lineId salvato:' + linea)
          store['lineId'] = linea
          return null
        },
        loadLineId() {
          return store['lineId']
        },
        saveContractId(contratto) {
          console.log('contractId salvato:' + contratto)
          store['contractId'] = contratto
          return null
        },
        loadContractId() {
          return store['contractId']
        },
        saveArrayContracts(contratti) {
          console.log('array contratti salvato:' + contratti)
          store['arrayContracts'] = contratti
          return null
        },
        loadArrayContracts() {
          return store['arrayContracts']
        },

      })
    },
    specPattern: 'cypress/e2e/pwa/*.js'
  },
});

Can you verify if you are able to reproduce this issue using the test written above ?

[AtofStryker]

hey @minopica. I was able to create a quick reproduction with the code you provided. It is a private repository that I have invited you to here. In the examples you have posted publicly, I have redacted the basic authentication from the cypress.config.js. It looks like this is a bug with experimentalModifyObstructiveThirdPartyCode and have labeled the issue. Hopefully we get a chance to investigate root cause soon.

[minopica]

Thanks, let me know when you have the fix

[AtofStryker]

@minopica I figured out what is causing the issue and was able to reproduce with a unit test inside the regex-rewritter.
in short, the stream replacer is writing

// results in a syntax error
obj.cypress-stripped-integrity='sha384-XiV6bRRw9OEpsWSumtD1J7rElgTrNQro4MY/O4IYjhH+YGCf1dHaNGZ3A2kzYi/C'

instead of

obj['cypress-stripped-integrity']='sha384-XiV6bRRw9OEpsWSumtD1J7rElgTrNQro4MY/O4IYjhH+YGCf1dHaNGZ3A2kzYi/C'

I should be working on this hopefully this week. Hopefully figuring out a fix is easy but a reproducible unit test along with a full reproduction is a great sign!

[minopica]

Good news !!! I wait for your news...

[minopica]

Is cypress 10.8 including the fix?

[AtofStryker]

@minopica 10.8 does not have the fix unfortunately, but I have high confidence it will be in 10.9 as we have a PR open for review

[cypress-bot]

The code for this is done in cypress-io/cypress#23820, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 10.9.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v10.9.0, please open a new issue.