help with command (Cypress.Commands.overwriteQuery release 12.6.0)

[gugarzon]

Hello,

Could anyone help me? I just updated cypress to its latest version (12.6.0) in this version the bug of overwriting commands has been fixed. (#25674).

This is the error that I have with (Cypress.Commands.overwriteQuery).

get[data-testid='chart-of-accounts-current-card']

TypeErrorCannot read properties of undefined (reading 'set')
Because this error occurred during a before each hook we are skipping the remaining tests in the current suite: Chart of Accounts

Could you tell me how to correct this?

data entry:

cy.get('*chart-of-accounts-current-card')

Command Code:

Cypress.Commands.overwriteQuery('get', (originalFn, selector, options) => {
  if ((typeof selector === 'string' || selector instanceof 'string') && selector.startsWith('*')) {
    const formattedSelector = selector.replace('*', '');
    return originalFn("[data-testid='" + formattedSelector + "']", options);
  } else {
    if (selector.includes('[') && !selector.includes("='") && selector.includes('.')) {
       selector = selector.replace('=', "='");
       selector = selector.replace(']', "']");
    }
    return originalFn(selector, options);
  }
});

[BlueWinds]

https://docs.cypress.io/api/cypress-api/custom-queries#Overwriting-Existing-Queries

Remember that query functions rely on this - when you invoke originalFn, be sure to use .call or .apply.

We should probably call that out in an info or warning box, it's important and easy to miss.

I updated your query a little bit - to use function rather than an arrow function and then originalFn.call(this, ...), and now it seems to be working:

Cypress.Commands.overwriteQuery('get', function (originalFn, selector, options) {
  if ((typeof selector === 'string' || selector instanceof 'string') && selector.startsWith('*')) {
    const formattedSelector = selector.replace('*', '');
    return originalFn.call(this, "[data-testid='" + formattedSelector + "']", options);
  } else {
    if (selector.includes('[') && !selector.includes("='") && selector.includes('.')) {
       selector = selector.replace('=', "='");
       selector = selector.replace(']', "']");
    }
    return originalFn.call(this, selector, options);
  }
})

Neat to see how people are using this out in the wild!

[gugarzon]

Thank you very much for your help, with your changes it works perfectly.

[BlueWinds]

We've updated the docs to call this out a little more clearly for people in the future.

cypress-io/cypress-documentation#5072