Cypress its Command

Cypress 'its' is a useful command to get the previously yielded subject's property values. Meaning it can get the property value off of a selector that's what 'its' supposed to be and make operations out of it.

It can be confusing a bit but with some syntaxes and clear-cut examples, we can get straight to know about this command.

Syntax

.its(propertyname)
.its(propertyname, options)

Correct Use

The correct usage for its is coupled with other commands and not directly to cy.

cy.get().its()

Wrong way

cy.its()

Let us try to understand what it does first.

For example, let us do a wrap command with a key-value and use its command.

cy.wrap({ sex: 'male' }).its('sex').should('eq', 'male')

So this is a clear-cut example of what its command in cypress does.
Here we have wrapped the key-value pair inside it using the cy command.
Using 'its' as we discussed we are getting the property and asking should command for it to be equal to male.
This is true as sex has male value.
Thus concludes "its" get the property value off of previously yielded subject and does operations with them.
In this case, we did assertion off of the value.

We can also play around with the array.

cy.wrap(['Doc Strange', 'Peter']).its(1).should('eq', 'Peter')

Based upon the index this array operation is done in a manner of getting the index of 'Peter' which is 1.
And asked should again to be equal to Peter.
Simply conveying I want the 1st index in this array to be equal to 'Peter'.

So this is some basic idea about its command and how it performs.

Now coming to our traditional DOM use how will this work?

This is pretty easy to say as it works the same as we showed those examples above.

Example

So in this real-time example, we are gonna see how we can use the 'its' command over DOM elements.
So a real cypress test case will be written for this and will be explained neatly.
For this test, we will be testing out the traditional https://www.programsbuzz.com/quality-assurance-tutorial site.
Check out for more cool QA-related articles over here using this link.

So coming back to our real case scenario here are the test steps we are gonna perform.

Navigate to the site link https://www.programsbuzz.com/quality-assurance-tutorial
Verify that the present testing topics on this page are equal to 16.

Looks simple right!

describe('Should load the programsbuzz website',()=> {
    it('Visit the website',()=>{
        cy.visit("/")
    })
    it("Should count number of elements present",()=>{
        cy.get('.column-content-inner').its('length').should('eq',16)

    })
})

So here we can implement the 'its' command more usefully.
So we first navigate to the page using the base URL I have set on cypress.json.

Then we took the class of the respective element off of this page and gave it in the cy.get
After that, we have used 'its' to get the length of the previously yielded class which will return a property value of 16 because there are a total of 16 elements similar to that.
And we need to assert that it has 16 testing topics present on that particular page.
So after that, I have used should and told it to be equal to 16.

It has successfully fetched the property value off of the class and asserted with the help of 'its'.