angular - 您如何可靠地等待 cypress.io 测试中的页面空闲
问题描述
使用 cypress.io 测试 Angular 网页时,检测页面何时完全加载和空闲的最佳/最可靠方法是什么。不仅仅是 onload 事件。需要包括所有 XHR 请求、角度摘要周期完成和所有渲染完成,包括所有动画完成。
原因是此时我想测试页面不包含元素,并且在上述所有内容完全完成之前无法测试。
解决方案
为了记录,我们为此所做的是添加一个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;
}
}
推荐阅读
- time - 这是什么时间格式?是 UNIX 吗?
- ruby-on-rails - 使用本机扩展安装 pg 1.1.3 失败
- android - android 应用程序如何跟踪,如果以前安装了应用程序?
- amazon-web-services - AWS IoT 证书突然失效
- java - 使 ArrayList 添加线程安全而不使用线程安全集合
- assembly - 非法指令:PRINTN
- android - Espresso 测试无法通过“依赖冲突”构建
- ios - Xcode 倒计时几天,直到圣诞节
- javascript - 用 html 和 javascript 编写画布
- list - 试图了解如何不将元素添加到列表中