您如何可靠地等待 cypress.io 测试中的页面空闲

Question

当使用 cypress.io 测试有角度的网页时，检测页面何时完全加载和空闲的最佳/最可靠的方法是什么。不仅仅是 onload 事件。需要包括所有 XHR 请求、角度摘要周期完成和所有渲染完成，包括所有动画完成。

原因是此时我想测试页面不包含元素，并且在上述所有内容完全完成之前无法测试。

Answer 1

我们为此做的记录是添加一个新的waitforpageidle 命令，可以像这样使用：

cy.waitforpageidle();

打字稿如下：

Cypress.Commands.add(
    "waitforpageidle",
    () => {
        console.warn("Waiting for page idle state");

        const pageIdleDetector = new PageIdleDetector();

        pageIdleDetector.WaitForPageToBeIdle();
    }
);

其中PageIdleDetector如下：

export class PageIdleDetector
{   
    defaultOptions: Object = { timeout: 60000 };

    public WaitForPageToBeIdle(): void
    {
        this.WaitForPageToLoad();
        this.WaitForAngularRequestsToComplete();
        this.WaitForAngularDigestCycleToComplete();
        this.WaitForAnimationsToStop();
    }

    public WaitForPageToLoad(options: Object = this.defaultOptions): void
    {
        cy.document(options).should((myDocument: any) =>
        {
            expect(myDocument.readyState, "WaitForPageToLoad").to.be.oneOf(["interactive", "complete"]);
        });
    }

    public WaitForAngularRequestsToComplete(options: Object = this.defaultOptions): void
    {
        cy.window(options).should((myWindow: any) =>
        {
            if (!!myWindow.angular)
            {
                expect(this.NumberOfPendingAngularRequests(myWindow), "WaitForAngularRequestsToComplete").to.have.length(0);
            }
        });
    }

    public WaitForAngularDigestCycleToComplete(options: Object = this.defaultOptions): void
    {
        cy.window(options).should((myWindow: any) =>
        {
            if (!!myWindow.angular)
            {
                expect(this.AngularRootScopePhase(myWindow), "WaitForAngularDigestCycleToComplete").to.be.null;
            }
        });
    }

    public WaitForAnimationsToStop(options: Object = this.defaultOptions): void
    {
        cy.get(":animated", options).should("not.exist");
    }

    private getInjector(myWindow: any)
    {
        return myWindow.angular.element(myWindow.document.body).injector();
    }

    private NumberOfPendingAngularRequests(myWindow: any)
    {
        return this.getInjector(myWindow).get('$http').pendingRequests;
    }

    private AngularRootScopePhase(myWindow: any)
    {
        return this.getInjector(myWindow).get("$rootScope").$$phase;
    }
}

Answer 2

您可以让赛普拉斯等待任何请求完成后再继续。因此，如果您想等待某个页面的所有 XHR，您可以为每个页面执行以下操作。等待多长时间由responseTimeout configuration 定义。

cy.server();
cy.route('**/api/getData').as('getData');
cy.visit('/home');
cy.wait('@getData');

或者等待几条路线：

cy.server();
cy.route('**/api/getData').as('getDataX');
cy.route('**/api/getData').as('getDataY');

cy.visit('/home');
cy.wait(['@getDataX', '@getDataY']);

Cypress best practices: Unnecessary-Waiting.

Cypress docs on wait Alias.

Answer 3

对于 Angular (2+)

前面的答案与 AngularJS 有关。对于 Angular 2+，您可以使用其他解决方案。

免责声明：在大多数情况下，Cypress 等待机制就足够了。但如果您确实需要应用程序稳定（即：所有请求和异步任务（如去抖动）都已完成），您可以使用此命令。

• 在您的 src/main.ts 中，将以下快捷方式添加到窗口对象：

    /**
     * Used by Cypress.waitForAngularIdle() (in commands.ts) to wait for all Pending request to finish
     */
    function ngIsStable() {
      const test = (window as any).getAngularTestability(window.document.querySelector('body div')) as Testability // you need to select an element managed by Angular. Usually any div in your html body

      const stable = test.isStable()
      //if (!stable) {   // this console.log block is just for information, you can remove it
      console.log('Angular is ' + (stable ? '' : 'NOT ') + 'stable:', {
        pendingRequestCount: test.getPendingRequestCount(),
        _pendingCount: (test as any)._pendingCount,
        pendingTasks: (test as any).getPendingTasks(),
      })
      // }
      return stable
    }

    window['ngIsStable'] = ngIsStable;

• 在您的赛普拉斯 commands.ts 文件中：

    function waitForAngularIdle() { 
        cy.window().invoke('ngIsStable').should('be.true')
    }
    Cypress.Commands.add('waitForAngularIdle', waitForAngularIdle);

• 在您的赛普拉斯索引文件 index.d.ts（用于 typescript 编译）中

    declare namespace Cypress {
      interface Chainable<Subject = any> {
        waitForAngularIdle()
      }
    }

• 在赛普拉斯规范中，当您需要赛普拉斯等待 Angular 应用程序稳定时：

    cy.waitForAngularIdle()