0
101
ViewsUnable to access modal-dialogue in cypress
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
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?!
2 answers
Answer question0
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')
})
0
Go to your cypress.json file and write:
{
chromeWebSecurity: false
}
This will disable cross-origin errors.