Saturday, June 1, 2024
 Popular · Latest · Hot · Upcoming
95
rated 0 times [  96] [ 1]  / answers: 1 / hits: 10425  / 3 Years ago, sun, september 5, 2021, 12:00:00

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


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?!


More From » cypress

 Answers
4

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')
})

[#918] Monday, August 30, 2021, 3 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
aidan

Total Points: 72
Total Questions: 95
Total Answers: 121

Location: Uzbekistan
Member since Sat, Feb 27, 2021
3 Years ago
aidan questions
Mon, Oct 11, 21, 00:00, 3 Years ago
Wed, Sep 29, 21, 00:00, 3 Years ago
Thu, Jan 16, 20, 00:00, 4 Years ago
Thu, Sep 19, 19, 00:00, 5 Years ago
;