Invoke UI function/command in cypress on a specific element

user_4128576 0
Viewed 104

I have a map (canvas) based application and on this element voyage-ol-map, I want to run invoke/run the $0.centerOn([0,0], true) function/command.

It's how I do it in UI - dev tools:

I locate the element in the 'Devtools: Elements' tab and then in 'Devtools: Console' I run $0.centerOn([0,0], true) which will make the map center-aligned (forces the map to be center-aligned from default view).

In Cypress, I tried this in order to make a visual capture but need some help as it is not working.

cy.get('voyage-ol-map')
      .invoke('centerOn([0,0], true)');

Tried below also:

cy.get('voyage-ol-map')
      .invoke('0.centerOn([0,0], true)');
cy.get('voyage-ol-map')
      .invoke('$0.centerOn([0,0], true)');

Error in TR:

enter image description here

UPDATE: Using this

cy.get('voyage-ol-map')
 .invoke('centerOn', [0, 0], true);

gives the below error.

Timed out retrying after 4000ms: cy.invoke() errored because the property: centerOn does not exist on your subject.

cy.invoke() waited for the specified property centerOn to exist, but it never did.

If you do not expect the property centerOn to exist, then add an assertion such as:

cy.wrap({ foo: 'bar' }).its('quux').should('not.exist')Learn more
cypress/pages/mapLayer_page.js:200:8
 
  199 |     cy.get('voyage-ol-map')
> 200 |       .invoke('centerOn', [0, 0], true);
cypress javascript
2 Answers

You generally pass the parameters to .invoke() separately, simple example Function with Arguments

cy.wrap({ sum: fn })
  .invoke('sum', 2, 4, 6)

But from the pattern of successful calling in devtools ($0.centerOn([0,0], true)), it looks like the function is attached to the element so invoke() won't work here.

If the test executes before function is attached, check it exists (with retry) before executing.

cy.get('voyage-ol-map', { timeout: 10000 })
  .its('0')                             // unwrap element from jQuery 
  .should('have.property', 'centerOn')  // retries, in case function is late arriving
                                        // subject changes from element to function
                                        // so next line can just execute it
  .then(centerOn => centerOn([0,0], true))

If you get a fail on the .should(), then it's possible you have the wrong element.

user_169610060

I believe the centerOn is a method added by some 3rd party library to the DOM elements. It is not a standard DOM method, and it is not a standard jQuery method. Thus you probably need to call it on the "pure" original DOM element, while cy.get yields a jQuery object. Here is how I would write it

cy.get('voyage-ol-map')
  // ensure there is a single element
  .should('have.length', 1)
  .then($map => {
     // get the DOM node using [0] notation
     // and call the method
     $map[0].centerOn([0,0], true)
   })
user_41682570
Related