Cypress Variables

Cypress variables are pretty much used up to perform various operations throughout. These variables can be logged, binded, asserted, etc.

But note that in cypress, we will hardly use this const, let var.
The only thumb rule is to use const for mutable objects.
We don't want the changed/mutable state of an object with the let and var cause. Sometimes we will need the previous object state.
The ideal thing to use is const in this matter.

We will see the different approaches of using a cypress variable for that we are gonna entirely automate elements in a site called http://autopract.com/#/home/fashion.

Wrong Approach For Cypress Variable Use:

describe('Automate AutoPract',()=>{
    before(() => {
        cy.visit('http://www.autopract.com/#/home/fashion')
        cy.get('.close').as('Popup')
        })

    it('Should click POPUP',function(){
        this.Popup.click()

    })
    it('Verify Header Logo',()=>{
        const headerName = cy.get("div[class='header-contact']").text();
        cy.log(headerName)
    })

})

So this is a simple example of how you should not use a variable.
Here the operation is a simple operation where I am trying to get the header text inside the variable and then store that in log.
It will throw an error that text() is not a function.
In this case, we will follow a different approach and the most suitable one for this.

The Best Approach:

describe('Automate AutoPract',()=>{
    before(() => {
        cy.visit('http://www.autopract.com/#/home/fashion')
        cy.get("button[aria-label='Close'] ").as('Popup')
        
        })
    it('Should click POPUP',function(){
        this.Popup.click()

    })
    it('Verify Header Logo',()=>{
        cy.get("div[class='header-contact']").then($headerText => {
            const headerLogo = $headerText.text();
            cy.log(headerLogo)
        })
    })

})

So here we are using a different and the best approach for the variable use method.
Instead of using it as the previous way, we use the then command to bind the callback variable of our choice.
With that bound to the custom callback function of our own(headerText).
We successfully binded to this closure, and now we can store this callback object we created into the const keyword.
When we try to log this variable, we can now get the desired result as expected.
Everything we do inside the then command block is called closure.

Whatever variable is bound inside the then block cannot be accessed from out the block other than this closure block.
We have to use the then command to get the yielded selector or operation inside the block.