CODEWITHSUNDEEP
angulare2e-testingcypress
Justin Young
Justin Young

Reputation: 2463

Calling component function from within Cypress test

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?

Upvotes: 1

Views: 2993

Answers (1)

kuceb
kuceb

Reputation: 18043

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

enter image description here

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

Upvotes: 3

Related Questions