Configurable pause/delay between commands to help with debugging

[jhanink]

ability to slow down the execution of a test via a configurable delay, e.g.

Cypress.config("waitAfterEachCommand", 2000)

[LiberQuack]

👍

[mmysik]

Hi guys, I am curious, is there any update on this ticket so far? I am looking for such a feature right now to avoid myself to add delay between all test steps. Thanks for your response.

[tnrich]

Also whenever a drag command lands it would be nice to have the option to specify the speed of the drag.

[jacobgardner]

This is what I've been doing to get a delay between commands. You just have to make sure you're enumerating all the commands that you want a delay on in that array.

// support/commands.js
const COMMAND_DELAY = 500;


for (const command of ['visit', 'click', 'trigger', 'type', 'clear', 'reload', 'contains']) {
    Cypress.Commands.overwrite(command, (originalFn, ...args) => {
        const origVal = originalFn(...args);

        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(origVal);
            }, COMMAND_DELAY);
        });
    });
} 

[olegario96]

@jacobgardner this solution is way better than cypress-wait-until package. Thank you!

[heitrix]

This is what I've been doing to get a delay between commands. You just have to make sure you're enumerating all the commands that you want a delay on in that array.

// support/commands.js
const COMMAND_DELAY = 500;


for (const command of ['visit', 'click', 'trigger', 'type', 'clear', 'reload', 'contains']) {
    Cypress.Commands.overwrite(command, (originalFn, ...args) => {
        const origVal = originalFn(...args);

        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(origVal);
            }, COMMAND_DELAY);
        });
    });
} 

How do I use this in the spec.js script? @jacobgardner
I'm a beginner.

something like this?

cy.get(".item").click(1000)

[BrettHoutz]

@heitrix All you have to do is add the code to support/index.js (or support/commands.js if it exists). Then you just call the commands as usual: cy.get(".item").click(). The commands will have the delay set by COMMAND_DELAY.

[WillGibson]

Update on the snippets above so you can just decide when to introduce the delay on an adhoc basis...

// support/commands.js
// Set CYPRESS_COMMAND_DELAY above zero for demoing to stakeholders,
// E.g. CYPRESS_COMMAND_DELAY=1000 node_modules/.bin/cypress open
const COMMAND_DELAY = Cypress.env('COMMAND_DELAY') || 0;
if (COMMAND_DELAY > 0) {
    for (const command of ['visit', 'click', 'trigger', 'type', 'clear', 'reload', 'contains']) {
        Cypress.Commands.overwrite(command, (originalFn, ...args) => {
            const origVal = originalFn(...args);

            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve(origVal);
                }, COMMAND_DELAY);
            });
        });
    }
}

[bahmutov]

I am slowing down certain commands in this repo http://github.com/bahmutov/cypress-movie

[mrchantey]

another way to set env variables for WillGibson's solution:
npm cypress open --env COMMAND_DELAY=500

[MullerEsposito]

This is what I've been doing to get a delay between commands. You just have to make sure you're enumerating all the commands that you want a delay on in that array.

// support/commands.js
const COMMAND_DELAY = 500;


for (const command of ['visit', 'click', 'trigger', 'type', 'clear', 'reload', 'contains']) {
    Cypress.Commands.overwrite(command, (originalFn, ...args) => {
        const origVal = originalFn(...args);

        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(origVal);
            }, COMMAND_DELAY);
        });
    });
} 

How can I type the command with Typescript?

[BrettHoutz]

@MullerEsposito Peeking at the type definitions, Commands.overwrite has this signature:

      overwrite<T extends keyof Chainable>(name: T, fn: CommandFnWithOriginalFn<T>): void
      overwrite<T extends keyof Chainable, S extends PrevSubject>(name: T, fn: CommandFnWithOriginalFnAndSubject<T, PrevSubjectMap[S]>): void

So i would think that command should have type keyof Chainable.

[Karla-Reyes]

@MullerEsposito / BrettHoutz , saw your messages above. Can you elaborate on how you add/use the above scripts in commands and index.d.ts files with the typescript? Thanks

Can someone help me?

[MullerEsposito]

@MullerEsposito / BrettHoutz , saw your messages above. Can you elaborate on how you add/use the above scripts in commands and index.d.ts files with the typescript? Thanks

Can someone help me?

Hey @Karla-Reyes, I couldn't do it with typescript. I used only js.

[bahmutov]

Here is my solution to this problem: plugin https://github.com/bahmutov/cypress-slow-down

[wiegell]

How can I type the command with Typescript?

const COMMAND_DELAY = 500;

['visit', 'click', 'trigger', 'type', 'clear', 'reload', 'select'].forEach((command) => {
  Cypress.Commands.overwrite(command as unknown as keyof Cypress.Chainable<any>, (originalFn, ...args) => {
    const origVal = originalFn(...args);

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(origVal);
      }, COMMAND_DELAY);
    });
  });
});

[danman01]

How can I type the command with Typescript?

const COMMAND_DELAY = 500;

['visit', 'click', 'trigger', 'type', 'clear', 'reload', 'select'].forEach((command) => {
  Cypress.Commands.overwrite(command as unknown as keyof Cypress.Chainable<any>, (originalFn, ...args) => {
    const origVal = originalFn(...args);

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(origVal);
      }, COMMAND_DELAY);
    });
  });
});

This example works for TS and also note Cypress complains unless you remove "contains" command, which appears to not like being overwritten.