Question: How do I replace command cy.type() with command fill without changing the existing code?

[jacksparrow414]

Hi @DanielFerrariR ,I have one question for you.
our project want replace cy.type with fill command,but We don't want to change too much code.
our idea is overwrite cy.type,then We want to integrate command cy.type and command fill into the overwrite command,which is controlled by an environment variable.
Do you think it can be done？if it can be done ,could you provide a simple example? Thanks a lot
My command.js code is as follows

import 'cypress-fill-command'
...

Cypress.Commands.overwrite('type', (originalFn, element, text, options) => {
  let typeDefault = Cypress.env("typeDefault");
  if (typeDefault) {
    Cypress.log({
      $el: element,
      name: 'type',
      message: 'oraginal',
    })
    return originalFn(element, text, options)
  }else {
    Cypress.log({
      $el: element,
      name: 'type',
      message: 'fill command',
    })
    return cySubject.fill(text, options)
  }
})

Cypress prompts below：
cySubject is not defined.
How do I get an cySubject?

and another way is

+ return cy.get(element).fill(text)
- return cySubject.fill(text, options)

That will work, but it will execute cy.get() command twice, Is this the right way?

[DanielFerrariR]

Hi @jacksparrow414 , Sorry for the late response, I only saw your issue today.

import 'cypress-fill-command'

Cypress.Commands.overwrite('type', (originalFn, element, text, options) => {
  const typeDefault = Cypress.env('typeDefault')
  if (typeDefault || text === '{selectall}{del}') {
    Cypress.log({
      $el: element,
      name: 'type',
      message: 'oraginal'
    })
    return originalFn(element, text, options)
  }
  Cypress.log({
    $el: element,
    name: 'type',
    message: 'fill command'
  })
  return cy.get(element).fill(text, options)
})

This makes more sense to me.

text === '{selectall}{del}' is needed because cy.clear is a alias for cy.type (https://docs.cypress.io/api/commands/clear#Syntax). So, if you want to use cy.type().clear(), its needed.

About the cy.get(element), yeah, the overwrite call doesn't provide the element already wrapped, so AFAIK you need to wrap it using cy.wrap or cy.get. In Cypress Fill Command code, with Command.add instead of Command.overwrite, I was able to get the element already wrapped, so didnt have to call cy.get again. You can check https://docs.cypress.io/api/cypress-api/custom-commands#Arguments

I hope that helps, if you contact cypress repository and find a better solution, please share it here as well.

[jacksparrow414]

@DanielFerrariR Thank you for reply 😃

so didnt have to call cy.get again

If I didn't call cy.get again ,how should I get a Cypress subject to call .fill() command?

and another question is
If I use

cy.clear().type("something")

As I was saying,the type() already has been overwrited,now it is actually fill command, it doesn't work, it will occur CypressError.

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.clear()

The cy command you invoked inside the promise was:

  > cy.get()

If I want to take a subject after clear(),What should I do?
I notice that Cypress chain command and
Cypress commands Asynchronus, it's seems that slove the problem is use .then

[DanielFerrariR]

Hi again,

First question, like I said seems impossible as Cypress.Commands.overwrite doesn't have the required argument. You can see the code inside src/index.ts of how it was implemented, it uses Cypress.Commands.add instead, which has the needed parameter. In resume, you need to call it again in your case.

The second question, the error, my example is to avoid this error with that condition, as cy.clear() === cy.type(), so you need a condition inside your overwrite to avoid it breaking. I don't think you need .then, you just need to replace your command code, and then you would be able to write cy.get().type().clear() or cy.get().fill().clear()

Hope that helps.

[jacksparrow414]

@DanielFerrariR Ok , Thanks a lot 👍