javascript - No se puede acceder al diálogo modal en cypress

Estoy intentando acceder al diálogo modal usando Cypress, lo que generalmente ocurre es que cuando accedes a la URL base, después de 5-6 segundos, te llevará al diálogo modal, donde el usuario tiene que iniciar sesión por sí mismo.

lo siguiente es el nombre de la clase del diálogo:

<div class = "modal-dialog">

y estoy intentando obtener acceso al campo de dirección de correo electrónico:

Ver captura de pantalla de la página

Mientras se utiliza el siguiente código:

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()
      });
        })
        
    })

por lo cual estoy recibiendo el siguiente 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.

¿Alguien puede ayudarme, por favor?!

Respuesta #1

Esta prueba funciona

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

Hay una advertencia de que hay dos #signInFormUsername, así que agrega .eq(0) para asegurarte de hacer clic en el correcto.

Además, el control tiene un elemento padre con CSS display: none, por lo que se necesita { force: true } en el .click().

Tenga en cuenta que tendrá que reiniciar el ejecutor de pruebas Cypress después de configurar "chromeWebSecurity": false.

La secuencia completa de inicio de sesión

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

La URL de la página del formulario de inicio de sesión es (la parte inicial)

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

y ese parámetro redirect_uri debería enviarte de vuelta a https://app.staging.showcare.io/product-showcase después de un inicio de sesión exitoso.

Si no, puedes hacer la parte del inicio de sesión en un beforeEach() y luego visitar la página principal en la prueba. Un token de inicio de sesión debería ser almacenado para ti por el paso de inicio de sesión.

Además, envuelve el código en un cy.session() para hacer el inicio de sesión solo una vez y conservar el token para todas las pruebas (igual que ocurre cuando un usuario inicia sesión y realiza varias cosas en una sesión).

La prueba completa,

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

Respuesta #2

Ve a tu archivo cypress.json y escribe:

{
  chromeWebSecurity: false
}

Esto desactivará los errores de origen cruzado.