Как предотвратить полную перезагрузку страницы при тестировании Angular с Cypress?

Question

Когда я пишу свои тесты Cypress e2e для моего приложения Angular, я часто использую команду visit () , например:

.visit('/foo/bar')

Эторабота выполнена, т.е. Cypress переходит на /foo/bar, но все приложение перезагружается.Это очень медленно и не имитирует фактическое поведение пользователя.

Можно ли перемещаться / посещать приложение Angular без полной перезагрузки страницы?

Я пытался:

cy.window().then((win) => {
   win.history.pushState({}, '', '/foo/bar')
})

Но угловой на это не реагирует.

Answer 1

Я решил эту проблему, добавив пользовательскую команду Cypress, которая вызывает метод в приложениях Angular app.component.ts.Решение выглядит следующим образом:

app.component.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);
        });
    }
}

cypress / support / commands.ts

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

// 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.probe(el).componentInstance;
            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);

cypress / support / index.d.ts

interface Window {
    ng: {
        probe: typeof import('@angular/platform-browser/src/dom/debug/ng_probe').inspectNativeElement
    };
}

Мы использовали это уже 2 месяца, и это прекрасно работает в локальной разработке, ускоряя выполнение тестов сx3.Но в КИ это другая история.