Cypress Difference between and, should & then command

Cypress 'and' command is often used as chaining assertions. It is always chained up with the yielding previous assertion and validates whether the conditions satisfy similar to 'and' operator.

While the cypress should command validates whether the provided element is present and must be present with the given specific description.

Cypress then is something different from the above two because it gets the yield of a selector and then debugs it.

So, in short, 'and' command is an assertion command chained up with other assertions. At the same time, the 'should' command is also an assertion command chained up with the selector and validated, while the 'then' command is something you get the yield of the selector and work with it using the callback function argument.

Let us see their more precise definition and their syntaxes now.

Demo Link: http://autopract.com/selenium/list.html

1. And

The And Command in Cypress is often used as a chaining assertion which means it is coupled with an assertion that has the yielded selector to pass onto the 'and' command to follow it.
If you are familiar with the should assertion, this 'and' assertion is always coupled up with the should assertion, which is the correct usage of this assertion and sometimes paired up with 'contains.'
'should' is followed by 'and' as the 'should' yield the selector, absorbed and passed to the 'and' command.
and is an alias of .should()

Syntax

.and(chainers)
.and(chainers, value)
.and(chainers, method, value)
.and(callbackFn)

chainers: any valid chainer from chai, chai-jquery, or Sinon-chai.
value: value to assert against chainer
method: a method to be called on chainer
callbackFn: Pass a function with any number of explicit assertions within it.

Correct Use:

cy.get('#id').should('be.visible').and('contain','example text')

Checks for the id selectors visibility in should assertion first and then move to satisfy and assertion to check whether it contains 'example text.'

Incorrect Use:

cy.and('eq','10')

Should not be chained up with cy.

2. Should

The 'should' command is an assertion feature in cypress, which asserts if something is visible or empty or equals to.
Assertions are a way of validating whether the thing needed is present, or you can say Assertions state confidently that application behavior is working as expected.

Syntax:

.should(chainers)
.should(chainer, value)
.should(chainer, method, value)
.should(callbackFn)

chainers (String): Any valid chainer like have.class, have.css, have.attr, etc., that comes from Chai, Chai-jQuery, or Sinon-Chai.
Value (String): Value to assert against chainer. For example: have.attr can have a value href and have.id can have value header.
method (String): A method to be called on the chainer.
callbackFn (Function): Pass a function that can have any number of explicit assertions within it. Whatever was passed to the function is what is yielded.

Correct Use:

cy.get('.error').should('be.empty')

Gets class 'error' and asserts that it should be empty.

cy.contains('Login').should('be.visible')

Check for text 'Login' and assert that it should be visible.

Wrong Use:

cy.should('eq', '42')

Should not be chained up with cy.

3. Then

The THEN command allows us to work with the subject yielded from the previous command.
To put it simply, it is used to play around with the yield of the previous command and work around with it in that case.
THEN command is handy and helpful in debugging the yield of the previous command.
Then when you would love to compare the before and after values like extracting specific values and verifying them.
Also useful when working with aliases too by sharing context.

Syntax

cy.get('example').then($object => {
            
            //THEN Operations to perform using the yielded object goes here
        })

This command takes a callback function as an argument.
$object is the object that cy.get yields.

Usage:

cy.get('@Dress').then($Price => {
            const Dprice = $Price.text();
            cy.log(Dprice)
            expect(Dprice).to.equal(' $87.00  $145.00')
        }

Here, we can see that it gets the yielded element from the get command and creates a callback function as an argument.
We can play around with it. In this case, we have asked for its text, logged and asserted it.