Unable to access modal-dialogue in cypress

user_16836443 0
Viewed 5400

I am trying to access modal-dialogue using cypress, what usually happens is that when you access the base Url, after 5-6 seconds, it will navigate user to modal-dialogue , where user have to login himself.

following is the class name of dialog:

<div class = "modal-dialog">

and I am trying to get access of email address field:

Check Screenshot of the page

screenshot of the authentication dialog and the devtools output

While using the following code:

describe('Login', function(){
    it('Login Successfully', function(){
        const urlRedirects = [];
        cy.visit('https://app.staging.showcare.io/product-showcase')
        cy.get('.modal-dialog').should('be.visible').then(($dialog)=>{
      cy.wrap($dialog).find('#signInFormUsername').click()
      });
        })
        
    })

for which I am getting following error:

Cypress detected a cross origin error happened on page load:

  > Blocked a frame with origin "https://app.staging.showcare.io" from accessing a cross-origin frame.

Before the page load, you were bound to the origin policy:

> https://showcare.io

A cross origin error happens when your application navigates to a new URL which does not match the origin policy above.

A new URL does not match the origin policy if the 'protocol', 'port' (if specified), and/or 'host' (unless of the same superdomain) are different.

Cypress does not allow you to navigate to a different origin URL within a single test.

You may need to restructure some of your test code to avoid this problem.

Alternatively you can also disable Chrome Web Security in Chromium-based browsers which will turn off this restriction by setting { chromeWebSecurity: false } in cypress.json.

Can someone please help me out?!

cypress javascript
2 Answers

This test works

cy.visit('https://app.staging.showcare.io/product-showcase/login')
cy.get('.modal-dialog').should('be.visible')
cy.get('#signInFormUsername', { timeout: 10000 }).eq(0)
  .click({ force: true })

There is a warning that there are two #signInFormUsername, so add .eq(0) to ensure you click the right one.

Also, the control has a parent with CSS display: none, so { force: true } is needed on the .click().

Please note, you will have to restart Cypress test runner after setting "chromeWebSecurity": false.

The full login sequence

cy.visit('https://app.staging.showcare.io/product-showcase/login')

cy.get('.modal-dialog').should('be.visible')

cy.get('#signInFormUsername', { timeout: 10000 }).eq(0)
  .type('userName', { force: true })

cy.get('#signInFormPassword').eq(0)
  .type('password', { force: true })

cy.get('[name="signInSubmitButton"]').eq(0)
  .click({ force: true })

The page URL of the login form is (the beginning part)

https://vep-staging.auth...amazoncognito.com/login?...&redirect_uri=https%3A%2F%2Fapp.staging.showcare.io%2Fproduct-showcase&...

and that redirect_uri parameter should send you back to https://app.staging.showcare.io/product-showcase after successful login.

If not, you can do the login part in a beforeEach() and then visit the main page in the test. A login token should be stored for you by the login step.

Also, wrap the code in a cy.session() to do the login just once, and preserve the token for all tests (same as happens with a user logging in and doing various things in a session.

The full test,

Cypress.config('experimentalSessionSupport', true)  // set this flag

beforeEach(() => {
  cy.session('mySession', () => {

    // preserve the login across all tests

    cy.visit('https://app.staging.showcare.io/product-showcase/login')
    cy.get('.modal-dialog').should('be.visible')
    cy.get('#signInFormUsername', { timeout: 10000 }).eq(0)
  .    type('userName', { force: true })
    cy.get('#signInFormPassword').eq(0)
      .type('password', { force: true })
    cy.get('[name="signInSubmitButton"]').eq(0)
      .click({ force: true })
  })
})

it('tests the app main page after login', () => {

  // should be logged in here, so visit main page
  cy.visit('https://app.staging.showcare.io/product-showcase') 

  // test the main page, e.g 
  cy.get('nav').contains('Homepage')
})
user_168264190

Go to your cypress.json file and write:

{
  chromeWebSecurity: false
}

This will disable cross-origin errors.

user_45712710
Related