How to override type or click?

Current behavior:

I have a custom command that interacts with the UI and waits for animations to complete called rerender. I want to make sure to invoke rerender before and after clicking and typing. However, I’m not able to figure out the correct way to do this.

I’ve tried a couple things.

Cypress.Commands.overwrite("click", (originalFn, subject, ...args) => {
	cy.rerender()
	originalFn(subject, ...args)
	cy.rerender()
})

Cypress.Commands.overwrite("click", (originalFn, subject, ...args) => {
	cy.rerender()
	cy.wrap(originalFn(subject, ...args))
	cy.rerender()
})

Cypress.Commands.overwrite("click", (originalFn, subject, ...args) => {
	cy.rerender()
		.then(() => originalFn(subject, ...args))
		.rerender()
})

Cypress.Commands.overwrite("click", (originalFn, subject, ...args) => {
	cy.rerender().then(() => {
		originalFn(subject, ...args).then(() => {
			cy.rerender()
		})
	})
})

They all come up with some sort of error about a promise inside a promise or something…

CypressError: Timed out retrying: Cypress detected that you returned a promise from a command while also invoking one or more cy commands in that promise.

The command that returned the promise was:

  > cy.type()

The cy command you invoked inside the promise was:

  > cy.rerender()

Because Cypress commands are already promise-like, you don't need to wrap them or return your own promise.

Cypress will resolve your command with whatever the final Cypress command yields.

The reason this is an error instead of a warning is because Cypress internally queues commands serially whereas Promises execute as soon as they are invoked. Attempting to reconcile this would prevent Cypress from ever resolving.

https://on.cypress.io/returning-promise-and-commands-in-another-command

Any ideas how overwriting these commands is supposed to work?

Versions

Cypress 3.1.5

[Izhaki]

@jennifer-shehane I argue that this is an issue with the documentation.

@ccorcos Has filed this in Gitter, but never got a reply.

I’m having exactly the same issue:

Cypress.Commands.overwrite('click', (originalFn, subject, ...args) => {
  console.log(args);
  cy.wrap(subject).should($el => {
    expect(Cypress.dom.isDetached($el)).to.be.false; // Ensure the element is attached
    // This won't work in all cases
    // originalFn(subject, ...args);

    // Using Jquery .click() here so no queuing from cypress side and not chance for the element to detach
    $el.click();
  });
});

And all .type() fail with:

Error:       CypressError: Timed out retrying: Cypress detected that you returned a promise from a command while also invoking one or more cy commands in that promise.

The command that returned the promise was:

  > `cy.type()`

The cy command you invoked inside the promise was:

  > `cy.wrap()`

[ccorcos]

Alright, I’ve made some progress. I think the problem has to do with the internal abstractions for these commands. The code below works. Now I can properly override those commands.

// If the type command calls the click command, then we have a problem with a promise
// inside a promise. So instead, we'll prevent clicking by always calling focus first.
// https://github.com/cypress-io/cypress/blob/e2e454262bf461f31e947da9f9fdc0a8fa23baf8/packages/driver/src/cy/commands/actions/type.coffee#L348
Cypress.Commands.overwrite("type", (originalFn, subject, ...args) => {
	cy.wrap(subject)
		.focus()
		.then(() => originalFn(subject, ...args))
		.wrap(subject)
})

// Clear calls type inside of and if we don't override it outself, we have another
// promise in a promise issue. So we'll just manually clear it ourselves
// https://github.com/cypress-io/cypress/blob/e2e454262bf461f31e947da9f9fdc0a8fa23baf8/packages/driver/src/cy/commands/actions/type.coffee#L414
Cypress.Commands.overwrite("clear", (originalFn, subject, ...args) => {
	cy.wrap(subject).type("{selectall}{del}")
})

// Wait for animations before and after clicking.
// https://github.com/cypress-io/cypress/issues/3838
Cypress.Commands.overwrite("click", (originalFn, subject, ...args) => {
	cy.wait(200)
		.then(() => originalFn(subject, ...args))
		.wait(200)
		.wrap(subject)
})

Still seems like a bad abstraction internally though. It means you can’t override these commands without substantial hacks.