Cypress Variables and Aliases

Cypress commands run asynchronously, meaning they do not return values immediately like normal JavaScript code. This creates a challenge when a test needs to reuse a value found earlier. Aliases solve this challenge in a reliable way.

The Problem with Normal Variables

Storing a Cypress command result directly in a variable produces unreliable results.

// This does not work as expected
let price = cy.get('.price').text()
console.log(price)

The variable price ends up empty because Cypress has not finished running the command when the console.log line executes.

A Simple Way to Picture It

Think of ordering food at a restaurant and expecting to eat it before the kitchen finishes cooking. The order needs time to complete before you can use the result. Cypress commands work the same way, needing time to complete before their value becomes available.

Using Aliases Instead

The as command creates an alias, a named reference to a Cypress subject that you can access later in the test.

cy.get('.price').as('itemPrice')

cy.get('@itemPrice').then(($price) => {
  cy.log($price.text())
})

The at symbol before the alias name tells Cypress to retrieve the stored reference.

Alias Flow Diagram

cy.get('.price')
     |
     v
.as('itemPrice')  (saves reference)
     |
     v
cy.get('@itemPrice')  (retrieves reference later)
     |
     v
.then() accesses the actual value

Aliasing Fixture Data

Aliases also work with fixture data, avoiding repeated fixture loading inside a single test file.

cy.fixture('user.json').as('userData')

it('logs in with fixture data', function () {
  cy.get('@userData').then((user) => {
    cy.get('#username').type(user.username)
  })
})

Using the this Keyword

Cypress also supports accessing aliased fixture data through the this keyword inside a regular function.

beforeEach(function () {
  cy.fixture('user.json').as('userData')
})

it('fills the username field', function () {
  cy.get('#username').type(this.userData.username)
})

This pattern requires a regular function instead of an arrow function, since arrow functions do not support the this keyword the same way.

Aliasing Network Requests

Aliases play an important role in network testing, allowing a test to wait for a specific request to finish.

cy.intercept('GET', '/api/products').as('getProducts')
cy.visit('/shop')
cy.wait('@getProducts')

This pattern pauses the test until the aliased network request completes, avoiding timing issues.

Aliasing DOM Elements for Reuse

An alias can also store a frequently used element, avoiding repeated selector calls within one test.

cy.get('.checkout-button').as('checkoutBtn')
cy.get('@checkoutBtn').should('be.visible')
cy.get('@checkoutBtn').click()

When to Use Aliases

Use aliases whenever a value needs reuse across multiple steps within the same test. Avoid creating aliases for values used only once, since a direct command works just as well in that case. Clear alias names make a test easier to read without checking earlier lines.

Key Points

• Cypress commands run asynchronously and cannot be stored in normal variables reliably.
• The as command creates an alias for later use with the at symbol.
• Aliases work with elements, fixture data, and network requests.
• The this keyword provides another way to access aliased fixture data.
• Aliases should reference values that get reused multiple times in a test.