Calling component function from within Cypress test

Question

I have an angular 7 app. I'm using cypress to test a few canvas/map components. I need to call a function within a component to verify the geojson being displayed on the map.

While in chrome I call ng.probe($0).componentInstance.draw.getAll() via the console and I my data gets logged to the console but when I make the same call in my cypress test:

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

I get ReferenceError: $0 is not defined

How would I go about calling my angular function within cypress?

bkucera bkucera · Accepted Answer · 2019-02-27T16:30:37

The variable $0 only exists inside chrome-devtools. It's a reference to the element you've selected in the elements panel, like this (notice the == $0):

You need to get a reference to the actual element via 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
})

Calling component function from within Cypress test

1 Answers