Impact and workarounds for unsafe chaining in Cypress 12

[alexeyr-ci1]

In Cypress 12 (but not before, as far as I know: e.g. compare https://docs.cypress.io/api/commands/check with https://web.archive.org/web/20220531163314/https://docs.cypress.io/api/commands/check) documentation for action commands says something like

It is unsafe to chain further commands that rely on the subject after .XXX().

However, the type declaration for these commands just says they return a Chainable and code that chained them before gives no errors or warnings.

1. This seems to be a large change not mentioned in https://docs.cypress.io/guides/references/migration-guide#Migrating-to-Cypress-120. Should it be?
2. Can the types be modified so the users (including me) will be able to find all places where it happens and fix them?

Also, it seems easy to create a command to allow the following:

cy.get('.new-todo').multipleCommands(get => {
  get().type('todo A{enter}')
  get().type('todo B{enter}')
  get().should('have.class', 'active')
}

instead of

cy.get('.new-todo').type('todo A{enter}')
cy.get('.new-todo').type('todo B{enter}')
cy.get('.new-todo').should('have.class', 'active')

or

cy.get('.new-todo').as('new')
cy.get('@new').type('todo A{enter}')
cy.get('@new').type('todo B{enter}')
cy.get('@new').should('have.class', 'active')

recommended in https://docs.cypress.io/guides/core-concepts/retry-ability#Correctly-ending-chains-after-an-action
and I plan to make one as a helper in our project. Are there drawbacks to this approach? Is it something Cypress should provide?

[alexeyr-ci1]

I just thought of a nice alternative:

const todo = () => cy.get('.new-todo')
todo().type('todo A{enter}')
todo().type('todo B{enter}')
todo().should('have.class', 'active')

[steinybot]

Or you could use aliases.

[steinybot]

I vote for the types being updated. Commands should not return Chainable.

[mgmrx]

Regarding 2. we use a slightly modified unsafe-to-chain-command rule from the cypress eslint plugin https://github.com/cypress-io/eslint-plugin-cypress
I really like your custom command idea

cy.get('.new-todo').multipleCommands(get => {
get().type('todo A{enter}')
get().type('todo B{enter}')
get().should('have.class', 'active')
}

We have a lot of helper code where we define cypress getters and the test code gets very verbose after we removed unsafe chaining.
So i would also like to know if this would be a viable pattern?