Cypress - creating a custom command that includes a promise: how to typescript?

Question

I have a custom iframe utility as cypress-iframe didn't work for me due to loading issues. This makes use of a promise. This code was taken from this gist here: https://gist.github.com/loranmutafov/0aef48884f3ec05edeb95aa1e0d06a17

Cypress.Commands.add('iframe', { prevSubject: 'element' }, $iframes => new Cypress.Promise(resolve => {
  const loaded = [];

  $iframes.each((_, $iframe) => {
    loaded.push(
      new Promise(subResolve => {
        if (isIframeLoaded($iframe)) {
          subResolve($iframe.contentDocument.body);
        } else {
          Cypress.$($iframe).on('load.appearHere', () => {
            if (isIframeLoaded($iframe)) {
              subResolve($iframe.contentDocument.body);
              Cypress.$($iframe).off('load.appearHere');
            }
          });
        }
      })
    );
  });

  return Promise.all(loaded).then(resolve);
}));

I would like to use this in Typescript. However, I get the error about prevSubject, due to the return type being unrecognisable. I fix this by specifying exactly what I want in the return type, like so:


Cypress.Commands.add(
  'iframe',
  { prevSubject: 'element' },
  ($iframes: JQuery<HTMLIFrameElement>): Cypress.Chainable<JQuery<HTMLElement>> =>

Now, naturally, the function complains that I am not returning a valid Chainable.

How can I get typescript to recognise that what I am returning is valid cypress typed code? Or how can I alter the code to be something that does return a generic Cypress.Chainable? How do I get a custom command to play nicely with promises?

Cypress - creating a custom command that includes a promise: how to typescript?

0 Answers0