0
194
ViewsInvoke UI function/command in cypress on a specific element
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:
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);
2 answers
Answer question0
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)
})
0
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.