[SOLUCIONADO] Consulta: Automatización de Login con Cypress

Estoy intentando escribir pruebas automatizadas usando Cypress para una aplicación autenticada a través de Azure Active Directory.

Estoy siguiendo la guía que se encuentra en el sitio web de cypress y está cargando correctamente la página de inicio de sesión, ingresando el mail y la contraseña en microsoft. Esto parece tener éxito hasta el último paso: cuando la llamada a la API del token POST falla con un error 400.

Luego de ingresar mail, contraseña y aceptar el inicio de sesión. Me redirecciona al login de mi página nuevamente, en lugar del homePage.

Recién estoy iniciando a aprender Cypress así que no he logrado solucionar esto. ¿Alguien podría ayudarme? Lo agradecería mucho.

Trabajar con autenticación a través de Azure Active Directory (AAD) en Cypress puede ser un desafío, especialmente debido a la naturaleza del flujo de autenticación y las políticas de seguridad. Aquí hay algunos pasos y consejos que podrían ayudarte a resolver el problema que estás enfrentando:

1. Verifica las Configuraciones de AAD

Asegúrate de que las configuraciones de tu aplicación en Azure Active Directory estén correctas. Esto incluye:

    Redirección de URLs permitidas.
    Configuración de la aplicación para aceptar tokens.

2. Manejo del Flujo de Autenticación

El flujo de autenticación con AAD puede ser manejado en Cypress utilizando una serie de comandos para interactuar con la página de inicio de sesión y capturar el token. Aquí hay un ejemplo de cómo puedes estructurar tu código:
Comando Cypress para Iniciar Sesión

Primero, crea un comando Cypress personalizado para manejar el inicio de sesión. Puedes agregar esto en el archivo cypress/support/commands.js:

Cypress.Commands.add('login', () => {
  const loginUrl = 'https://login.microsoftonline.com/';
  const username = Cypress.env('aad_username');
  const password = Cypress.env('aad_password');
  const tenantId = Cypress.env('aad_tenant_id');
  const clientId = Cypress.env('aad_client_id');
  const redirectUri = Cypress.env('aad_redirect_uri');

  cy.visit(loginUrl, {
    onBeforeLoad(win) {
      // Esto es para interceptar la redirección a la URL del token
      win.open = cy.stub().as('windowOpen');
    }
  });

  cy.get('input[type="email"]').type(username, { log: false });
  cy.get('input[type="submit"]').click();

  cy.get('input[type="password"]').type(password, { log: false });
  cy.get('input[type="submit"]').click();

  cy.get('@windowOpen').should('be.called');
  cy.window().then((win) => {
    // Aquí capturamos el token desde el URL
    const redirectUrl = win.open.args[0][0];
    const token = new URL(redirectUrl).hash.match(/access_token=([^&]*)/)[1];
    cy.wrap(token).as('token');
  });
});

3. Uso del Comando de Iniciar Sesión en Tus Pruebas

En tus archivos de prueba, puedes usar este comando para iniciar sesión antes de realizar otras acciones. Aquí hay un ejemplo de cómo se ve una prueba completa:

describe('Authenticated Tests', () => {
  beforeEach(() => {
    cy.login();
  });

  it('should visit the homepage after login', () => {
    cy.get('@token').then(token => {
      // Usamos el token para hacer una solicitud autenticada
      cy.request({
        method: 'POST',
        url: 'https://yourapi.com/endpoint', // La URL de tu API
        headers: {
          Authorization: `Bearer ${token}`
        }
      }).then((response) => {
        expect(response.status).to.eq(200);
        // Ahora redireccionamos a la página de inicio usando Cypress
        cy.visit('/homepage');
      });
    });
  });
});

4. Manejo de Variables de Entorno

Asegúrate de definir las variables de entorno en tu archivo cypress.json o como variables de entorno del sistema para almacenar información sensible de forma segura:

{
  "env": {
    "aad_username": "[email protected]",
    "aad_password": "tu_contraseña",
    "aad_tenant_id": "tu_tenant_id",
    "aad_client_id": "tu_client_id",
    "aad_redirect_uri": "http://localhost:8080"
  }
}

5. Depuración del Error 400

Si sigues recibiendo el error 400 en la llamada a la API del token POST, verifica lo siguiente:

    Asegúrate de que las credenciales y las configuraciones de la aplicación de Azure AD estén correctas.
    Asegúrate de que las URL de redirección configuradas en Azure AD coincidan con las que estás utilizando en tu aplicación y en tus pruebas de Cypress.
    Revisa los logs de la red para obtener más detalles sobre el error 400 y ajusta las configuraciones en consecuencia.

Si después de seguir estos pasos sigues teniendo problemas, proporciona más detalles sobre el error 400 que estás viendo, y estaré encantado de ayudarte a resolverlo.

La automatización de login con Cypress es un proceso que te permite probar y automatizar el flujo de inicio de sesión en una aplicación web. Cypress es una herramienta de automatización de pruebas para aplicaciones web que te permite escribir pruebas sencillas y eficientes.

Aquí te presento los pasos generales para automatizar el login con Cypress:

1. Instala Cypress en tu proyecto utilizando npm o yarn.

2. Crea un nuevo archivo de prueba en la carpeta cypress/integration.

3. Importa el comando cy.login() en tu archivo de prueba.

4. Configura el comando cy.login() con las credenciales de inicio de sesión y la URL de inicio de sesión.

5. Utiliza el comando cy.visit() para navegar a la página de inicio de sesión.

6. Utiliza el comando cy.get() para seleccionar los campos de inicio de sesión y completarlos con las credenciales.

7. Utiliza el comando cy.get() para seleccionar el botón de inicio de sesión y hacer clic en él.

8. Verifica que el inicio de sesión sea exitoso utilizando comandos como cy.url() o cy.contains().

9. Cierra la sesión utilizando el comando cy.logout().

10. Ejecuta la prueba utilizando el comando npx cypress run.

Aquí te presento un ejemplo de código para automatizar el login con Cypress:
```
describe('Login', () => {
  it('debería iniciar sesión exitosamente', () => {
    cy.login('usuario', 'contraseña');
    cy.visit('/dashboard');
    cy.url().should('contain', '/dashboard');
  });
});

Cypress.Commands.add('login', (username, password) => {
  cy.visit('/login');
  cy.get('#username').type(username);
  cy.get('#password').type(password);
  cy.get('#login-button').click();
});
```
Recuerda que debes adaptar este código a tus necesidades específicas y reemplazar las credenciales y la URL con las tuyas propias.