Cypress Test: How to Save an HTML Path Into a Constant

This article is a part of the Cypress Test series. To read another story in this series, please follow the links below:

Cypress Test Series:

• Cypress Test: Create your first end-to-end testing


• Cypress Test: How to Emulate Different Devices Using Viewport


• Cypress Test: How to Separate Test Data Using Fixture

---

In this article, I will show you how to create a constant that contains an HTML path in Cypress.

Sometimes, when creating tests for the front end, we need to access elements under the long HTML path. It will be troublesome if we need to assert elements under the same long path. The workaround I suggest is to save the path into a constant then we call the constant to assert the element.

To achieve the result, we can implement the script below:

describe('Login with Cypress.$ Function', ()=>{
before(function() {
        cy.visit('http://zero.webappsecurity.com/login.html');
    })

it('should execute login procedure', () => {        

const userLogin = cy.get('#user_login')
const userPassword = cy.get('#user_password')
const userRememberMe = cy.get('#user_remember_me')
const signInButton = cy.contains('Sign in')

        userLogin.type("username")
        userPassword.type("password")
        userRememberMe.click()
        signInButton.click()
    });
})

That script will save the user_login, user_password, user_remember_me, and Sign in button to a constant, then we can call the constant to create an assertion.