Cross-origin error happening on same domain after click event adds same page anchor

[felipocorrea90]

Current behavior:

Is not possible to continue with the test execution after getting error message:

Cypress detected a cross origin error happened on page load:
  > Blocked a frame with origin "http://automationpractice.com" from accessing a cross-origin frame.
Before the page load, you were bound to the origin policy:
  > http://automationpractice.com

This is happening when I click the create account button with a valid email (non-registered) in the email address field after visiting the site http://automationpractice.com/index.php?controller=authentication&back=my-account.

This event is not redirecting user to any new domain, actually it doesn't seem any redirection is made instead it looks like a page anchor from the same page is added to the url, loading new content in the same page and showing/hiding a few elements from the page layout.

If chromeWebSecurity: false is added to the the cypress.json file the issue continues. No error message is displayed but instead after the same event is triggered a blank page is loaded instead blocking the test entirely.

Desired behavior:

Cypress should be able to continue with the following step without showing the cross-origin error for this particular case.

Test code to reproduce

1. Set up a new cypress project
2. Add a new javascript file with any desired name to the integration folder, with the following code:

describe('Create Account', () => {
    it('Visit Store Website', () => {
        cy.visit('http://automationpractice.com/index.php?controller=authentication&back=my-account')
    })

    it('Add Email to create a new account', () => {
        cy.xpath('//input[@id="email_create"]').type('faketest_1@faketestexample.com')
        cy.xpath('//form[@id="create-account_form"]').submit()
    })

    it('Add personal information', () => {
        cy.get('.uniform-id_gender1').click()
        cy.get('.customer_firstname').type('First')
        cy.get('.customer_lastname').type('Last')
        cy.get('.passwd').type('whatever123')
        cy.get('.days').select('2')
        cy.get('.months').select('10')
        cy.get('.years').select('1985')
    })
})

3. Run the test from the cypress UI runner npx cypress open
4. Noticed the described issue

Versions

• node version 12.16.3
• npm version 6.14.4

"devDependencies": {
    "cypress": "^4.5.0",
    "cypress-xpath": "^1.4.0"
  }

Attachments

[jennifer-shehane]

I can recreate this with the code below. I tried the experimentalSourceRewriting config in our upcoming 4.6.0 release and that made no different to the result.

it('visit', () => {
  cy.visit('http://automationpractice.com/index.php?controller=authentication&back=my-account')
  cy.get('#email_create').type('faketest_1@faketestexample.com')
  cy.get('#create-account_form').submit()
  cy.get('.uniform-id_gender1').click()
})

[jennifer-shehane]

This is due to calling document.location = '#account-creation' on form submit. I can recreate this with the code below:

it('visit', () => {
  cy.visit('https://example.cypress.io')
  cy.document().then((doc) => {
    doc.location = '#account-creation'
  })
})

Added the hash specifically seems to render Cypress within itself.

Setting a normal string to doc.location causes the route to reroute to _/ in the AUT

it('visit', () => {
  cy.visit('https://example.cypress.io')
  cy.document().then((doc) => {
    doc.location = 'account-creation'
  })
})

[flotwig]

Missed document.location in the original AST rewriting PR, have a PR open for it now: #7418

@jennifer-shehane however, #7418 won't fix the examples you've posted, as it doesn't rewrite test code, only AUT code

[cypress-bot]

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

[cypress-bot]

Released in 4.6.0.

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

[flotwig]

This fix is available starting in 4.6.0 as an experiment which you can access by setting this config option in your cypress.json or elsewhere:

{
	"experimentalSourceRewriting": true
}

The fix is experimental, so there may be some situations where the this is not fixed.

If you're still this issue while setting the experimentalSourceRewriting to true in 4.6.0 - open a new issue with a reproducible example + screenshots, etc - filling out our issue template.

[shevara84]

Can we set this config option in one spec file and how?

[jennifer-shehane]

@shevara84 You can see any config option via Cypress.config()

it('test', () => {
  console.log(Cypress.config('experimentalSourceRewriting'))
})