从 Cypress 测试中调用组件函数答案

【问题标题】：Calling component function from within Cypress test从 Cypress 测试中调用组件函数
【发布时间】：2019-02-27 04:22:12
【问题描述】：

我有一个 Angular 7 应用程序。我正在使用 cypress 来测试一些画布/地图组件。我需要在组件中调用一个函数来验证 geojson 是否显示在地图上。

在 chrome 中，我通过控制台调用 ng.probe($0).componentInstance.draw.getAll()，我的数据被记录到控制台，但是当我在 cypress 测试中进行相同的调用时：

cy.window().then((win) => {
    const res = win.ng.probe($0).componentInstance.draw.getAll();
    console.log(res);
})

我收到ReferenceError: $0 is not defined

我将如何在 cypress 中调用我的角度函数？

【问题讨论】：

标签： angular e2e-testing cypress

【解决方案1】：

变量$0 只存在于chrome-devtools 内部。它是对您在元素面板中选择的元素的引用，如下所示（注意== $0）：

您需要通过cy.get 获取对实际元素的引用。

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
})

【讨论】：