How to return a value from custom function in Cypress?

In Cypress, if you want to use the return value of a custom function in your tests, you typically need to pass this value into Cypress's command chain. Since Cypress commands are asynchronous and follow their own management and scheduling mechanisms, handling return values from custom functions requires special attention. Here are several methods to obtain and use the return values of custom functions:

1. Directly Using Function Return Values

If your function is synchronous and does not involve any asynchronous operations, you can directly call the function in your tests and use its return value.

javascript
function calculateTotal(items) {
  return items.reduce((total, item) => total + item.price, 0);
}

it('should calculate total price of items', () => {
  const items = [{ price: 10 }, { price: 15 }, { price: 7 }];
  const total = calculateTotal(items);
  expect(total).to.eq(32);
});

2. Using Cypress's .then() Method

If your function is asynchronous or you want to use the result of a custom function in Cypress's chained operations, you can use the .then() method.

javascript
function fetchProductPrice(productId) {
  return fetch(`/api/products/${productId}`)
    .then(response => response.json())
    .then(data => data.price);
}

it('should display the correct price for product', () => {
  const productId = 1;
  cy.wrap(null).then(() => {
    return fetchProductPrice(productId);
  }).then(price => {
    expect(price).to.eq(20);
  });
});

In this example, fetchProductPrice is an asynchronous function that returns a Promise. By using cy.wrap(null).then(), we can insert the asynchronous price value into Cypress's command queue and use it later.

3. Leveraging Cypress Environment Variables

You can also use Cypress's environment variables to pass values. This is generally not recommended as it can lead to data pollution between tests, but it can serve as a solution in certain cases.

javascript
function calculateDiscount(items) {
  return items.reduce((total, item) => total + item.discount, 0);
}

it('should calculate and use discount in test', () => {
  const items = [{ discount: 5 }, { discount: 3 }, { discount: 2 }];
  const discount = calculateDiscount(items);
  Cypress.env('discount', discount);
  // Assume we have a function that applies discounts to the cart
  applyDiscount(Cypress.env('discount'));
});

In this example, calculateDiscount is a synchronous function, and we store and pass the discount value using Cypress's environment variables.

Conclusion

The choice of method depends on your specific needs, including whether the function is asynchronous and the structure of your tests. When handling these cases, maintaining code clarity and maintainability is crucial.