¿Cómo evitar que se vuelva a cargar la página completa al probar Angular con Cypress?

Esta es la contestación más acertada que te podemos compartir, sin embargo mírala detenidamente y analiza si se puede adaptar a tu proyecto.

Solución:

Resolví esto agregando un comando de ciprés personalizado que llama a un método en las aplicaciones Angular app.component.ts. La solución se ve así Actualizado a hiedra:

aplicación.componente.ts

export class AppComponent 
    constructor(
        private router: Router,
        private ngZone: NgZone,
    ) 

    // Method Cypress will call
    public navigateByUrl(url: string) 
        this.ngZone.run(() => 
            this.router.navigateByUrl(url);
        );
    

ciprés/soporte/comandos.ts

// add new command to the existing Cypress interface
declare global 
    namespace Cypress 
        interface Chainable 
            visitAngular: (url: string) => Chainable;
        
    


// Custom function
export function visitAngular(url: string) 
    cy.get('body').then($body => 
        try 
            const el = $body.find('app-root')[0];
            const win = el.ownerDocument.defaultView;
            const componentInstance = win.ng.getComponent(el);
            cy.log(`Angular nav to '$url' `);
            componentInstance.navigateByUrl(url);
            cy.url().should('contain', url);
         catch (error) 
            cy.log(`Cypress nav to '$url' `);
            cy.visit(url);
        
    );


Cypress.Commands.add('visitAngular', visitAngular);

ciprés/soporte/index.d.ts

interface Window 
    ng: 
        getComponent: (element: any) => any;
    ;

Hemos usado esto durante 2 meses y funciona muy bien en el desarrollo local, acelerando las ejecuciones de prueba con x3. Pero en CI es otra historia.

Puede hacer que funcione en un entorno de CI registrando una función global y una llamada en lugar del componente angular:

aplicación.componente.ts

export class AppComponent 
    constructor(
        private router: Router,
        private ngZone: NgZone,
    ) 
        // Method Cypress will call
        if ((window as any).Cypress) 
            (window as any).cypressNavigateByUrl = (url: string) => this.cypressNavigateByUrl(url);
        
    

    public cypressNavigateByUrl(url: string) 
        this.ngZone.run(() => 
            this.router.navigateByUrl(url);
        );
    

ciprés/soporte/comandos.ts

Cypress.Commands.add('visitAngular', (url) => 
    cy.window().then((win) => 
        win.cypressNavigateByUrl(url);
    );
);

Nos encantaría que puedieras difundir esta sección si lograste el éxito.

---

---

Utiliza Nuestro Buscador