How To Write Tests With Cypress UI Commands

This tutorial will show how to write test cases with Cypress and integrate them into the React JS applicatrion.

Step 1: Go to the cypress.io website

Step 2: Copy the npm command and run it in your react app root location using the terminal/command line prompt.

Step 3: Now create a new spec file and write this code.

Note: We tried to test the login page and its element's ID will be different with your application.

Cypress Code

describe('template spec', () => {
    it('passes', () => {
        await cy.visit('http://localhost:3000/login')

        cy.get('#login-username').type('sahan')
        cy.get('#login-password').type('1234')
        cy.get('.btn').click()
    })
})

For more clarification, please watch our video tutorial.