`Cypress.Commands.overwrite` typescript problem appearing in 9.1

Current behavior

Cypress 9 added type definitions to Cypress.Commands.overwrite, and I can’t seem to make sense of them.

This is what I have, in cypress/support/commands.ts:

if (Cypress.env('demoMode') === 'on') {
  // adapted from https://github.com/cypress-io/cypress/issues/249#issuecomment-670028947
  for (const commandName of ['visit', 'click', 'trigger', 'type', 'clear', 'reload'] as const) {
    // we add 2s delays for a few commands so that stakeholders can see what's going on
    const commandWithDelay = (command: (...args: unknown[]) => unknown, ...args: unknown[]) =>
      new Promise((resolve) => {
        setTimeout(() => resolve(command(...args)), 2000);
      });

    Cypress.Commands.overwrite(commandName, commandWithDelay);
  }
}

This was working fine until the new Cypress version.

Let’s tackle something simpler, taken out straight from cypress docs:

Cypress.Commands.overwrite('type', (originalFn, element, text, options) => {
  if (options && options.sensitive) {
    // turn off original log
    options.log = false
    // create our own log with masked message
    Cypress.log({
      $el: element,
      name: 'type',
      message: '*'.repeat(text.length),
    })
  }

  return originalFn(element, text, options)
})

I can’t get the types right, even for that seemingly simple example 😞

Desired behavior

No response

Test code to reproduce

Cypress.Commands.overwrite('type', (originalFn, element, text, options) => {
  if (options && options.sensitive) {
    // turn off original log
    options.log = false
    // create our own log with masked message
    Cypress.log({
      $el: element,
      name: 'type',
      message: '*'.repeat(text.length),
    })
  }

  return originalFn(element, text, options)
})

Cypress Version

9.1

Other

No response

[xumepadismal]

Hey @lgenzelis ! My PR #19003 should fix the issue from “Test code to reproduce” example.

Regarding the overwriting commands in loop

I’m not sure whether it is even possible currently in TS to provide typings that will support this case. I think it’s ok to use some workarounds in your code. For example, this will work when/if my PR got merged:

if (Cypress.env('demoMode') === 'on') {
  // adapted from https://github.com/cypress-io/cypress/issues/249#issuecomment-670028947
  for (const commandName of ['visit', 'click', 'trigger', 'type', 'clear', 'reload'] as const) {
    // we add 2s delays for a few commands so that stakeholders can see what's going on
    const commandWithDelay = ((command: (...args: unknown[]) => unknown, ...args: unknown[]) =>
        new Promise((resolve) => {
          setTimeout(() => resolve(command(...args)), 2000);
        })) as any as Cypress.CommandFnWithOriginalFn<typeof commandName>;

    Cypress.Commands.overwrite(commandName, commandWithDelay);
  }
}

[xumepadismal]

Hey @lgenzelis Please refer to this new paragraph in docs

It is from my PR https://github.com/cypress-io/cypress-documentation/pull/4263 to Cypress Docs repo