Cypress Writing Your First Test

Hi, guys, In previous tutorial we discussed about describe which is used to group test and it block which we use for creating test cases. Today in this article is gonna be absolute fun, because in this cypress article we are gonna write our first simple test using cypress basic commands.

We will be covering several topics while writing our first cypress test which includes visit, get, log, reload, clear, type, click and should.
Don't worry all will be explained along the way or before proceeding.

that's right!

We will take a look at what these commands do in a single line of explanation first before we move on to the code.

Visit - obviously from the name we know that this command will visit the respective site we provide in it.
Get - This command is used to fetch the elements from DOM in the form of selectors CSS or another style of our wish.
Log - print message to cypress command log.
Reload - This just reloads the website we are about to visit.
Clear - This command clears any existing texts present in the text field.
Type - When passed with the correct selector this command performs the typing operation.
Click - When passed with the correct selector this command performs the click operation.
Should - Used mostly for asserting.

Note all the commands above are always coupled up with cy.command because that's the way it does its operation in cypress.

Example

For demo purposes, we will be automating our respective article site https://www.programsbuzz.com/

Today we will be doing the following things: We are gonna automate the log-in functionality of the program buzz site.

Step 1: We need to visit the page https://www.programsbuzz.com/user/login.
Step 3: Reload the page and log it.
Step 3: Type in the wrong username and password.
Step 4: Click login.
Step 5: Verify the error message.

It should look something like this:

describe('Automating The Signin Of ProgramsBuzz Site',()=> {
  it.only('visit the site ', () => {
        cy.visit('https://www.programsbuzz.com/user/login')

        cy.log('Before Reload')
        cy.reload()
        cy.log('After Reload')

        cy.get('#edit-name').clear().type('Man Mala Man')

        cy.get('#edit-pass').clear().type('mamamamama')
        cy.get('#edit-submit').click()

        cy.get('.messages--error').should(
            'contain',
            'Unrecognized username or password. Forgot your password?'
        )
    })
})

So we have successfully written a functional test script to test the login functionality and assert the error message.
First, we are visiting the page https://www.programsbuzz.com/user/login.
We are logging the before and after reload with cy.reload to check whether the page is reloading.
This concludes or first test step.
In the second test step we are getting the username web element here we have used id as they are unique.
In the third test step similar to username we got the password web element.
In the fourth test step, we are clicking login.
In the final fifth test step when the error message appears after clicking login, we are extracting the element of the error message and asserting with should command that it should contain the following message along with it.

cypress write your first test

You can see from the output all the test steps passed and also you can see the assertion of the error message has succeeded too.