How to override type or click?

[ccorcos]

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

[jennifer-shehane]

Can you provide the code for your custom rerender command also?

[ccorcos]

Here's rerender

async function rerender(window) {
	try {
		const RenderQueue = window["__console"]["RenderQueue"]
		await RenderQueue.afterNextFlush()
	} catch (error) {}
}

Cypress.Commands.add("rerender", { prevSubject: "optional" }, subject => {
	return cy
		.wait(10)
		.window()
		.then(rerender)
		.wrap(subject)
})

But I'm also unable to get it to work just with cy.wait(100). I don't get this same error when I use wait, but it doesnt seems to work properly...

[ccorcos]

For example:

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

[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.

[ccorcos]

The actions are all pretty bogus now though...

No more clicks, etc.

[jennifer-shehane]

You probably want to extend the commands to add logging: https://on.cypress.io/cypress-log Can you close if this issue is resolved for you?

[Lakitna]

Logging is not documented very well yet. It might be good to have some examples. Here I have an example of an overwritten command in javascript. And here from the .type() command in coffeescript.

[jennifer-shehane]

Yeah, it is very poorly/not documented ☹️cypress-io/cypress-documentation#110

[Lakitna]

Is there any progress regarding those improvements Brian wants to make? Maybe something to include in 4.0?

[tracer13]

Hi! I seem to have the same question.
I'm trying to override type command so that I can perform a scrollIntoView command inside of it. I tried the following approach:

Cypress.Commands.overwrite('type', (originalFn: any, subject: any, chars: string, options?: any) => {
        cy.wrap(subject).scrollIntoView().then(() => {
            return originalFn(subject, chars, options);
        });
});

if I try cy.get('.classname').type('text') it works. But in case I call cy.get('.classname').clear().type('text') (i.e. after an action command) it fails, stating that:

The command that returned a promise was > cy.click() and the cy command you invoked inside a promise was cy.wrap().

Which makes sense. However, in this case, how can I call cy command (in this case scrollIntoView) without wrapping a subject inside an overridden function?
Thanks in advance!

[dhair-seva]

I'm pretty sure you need to return cy.wrap, so:

Cypress.Commands.overwrite('type', (originalFn: any, subject: any, chars: string, options?: any) => {
  return cy.wrap(subject).scrollIntoView().then(() => {
    return originalFn(subject, chars, options);
  });
});

[tracer13]

I tried that and a couple of other variations. Unfortunately, none of them work

[mcphersonzw]

any update on this? I'm unable to override type() as well.

[jennifer-shehane]

Issues in our GitHub repo are reserved for potential bugs or feature requests. This issue will be closed since it appears to be neither a bug nor a feature request.

We recommend questions relating to how to use Cypress be asked in our community chat. Also try searching our existing GitHub issues, reading through our documentation, or searching Stack Overflow for relevant answers.

[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()`