angular - 将 Angular 添加到窗口类型定义

Question

我正在启动和运行 Cypress。我想让 Cypress 直接调用我的一些函数来检查它们的输出。

虽然在我的测试中，但我似乎无法获得对 Angular 引用。我看到了一些关于向全局窗口对象添加自定义“Angular ”属性的信息，但我似乎仍然无法弄明白。

https://github.com/cypress-io/cypress/issues/3068#issuecomment-454109519

根据上面的示例，我将如何创建自定义属性以便我可以在 Cypress 中获取 Angular 对象？

Answer 1

使用以下内容在 cypress/support 中创建一个 index.d.ts(例如添加一个名为 ng 的属性):

interface Window {
  ng: {
    probe: typeof import("@angular/platform-browser/src/dom/debug/ng_probe").inspectNativeElement
    // // un-comment if you need these for some reason:
    // ɵcompilerFacade: import("@angular/compiler/src/jit_compiler_facade").CompilerFacadeImpl
    // coreTokens: {
    //   ApplicationRef: import("@angular/core").ApplicationRef
    //   NgZone: import("@angular/core").NgZone
    // }
  }
}

那么你应该可以使用:

cy.get('.some-ng-element').then(($el) => {
  const el = $el[0]  // get the DOM element from the jquery element
  const win = el.ownerDocument.defaultView // get the window from the DOM element
  const component = win.ng.probe(el).componentInstance
})