How to Correctly Use . Wrap () in Cypress

Cypress's .wrap() method is a highly useful command that allows you to wrap any object, array, or primitive value into a Cypress-understandable object. This enables you to apply Cypress's chainable commands to these wrapped objects. The .wrap() method is particularly useful for converting non-Cypress command return values (such as plain JavaScript functions or variables) into Cypress objects, enabling further chainable operations.

Using Scenarios and Steps

1. Introducing External Data:

If you have external data (such as JSON objects from API calls), you can use the .wrap() method to wrap this data and then manipulate it with Cypress commands.

Example:

Suppose you obtain a list of users and want to verify the name of the first user:

javascript
// Assume user data obtained from an API
const users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" }
];

cy.wrap(users).then((users) => {
    expect(users[0].name).to.eq('Alice');
});

2. Combining with Regular JavaScript Code:

During testing, you may need to use regular JavaScript code snippets to perform operations before continuing with Cypress commands.

Example:

Suppose you need to calculate the sum of two numbers and verify the result:

javascript
function add(a, b) {
    return a + b;
}

const sum = add(5, 3);

cy.wrap(sum).should('equal', 8);

3. Using Results from Asynchronous Functions:

When handling results from asynchronous functions, the .wrap() method ensures proper processing.

Example:

Suppose you have an asynchronous function to fetch the current time from a server; you can use .wrap() to handle the result of this asynchronous call:

javascript
function fetchCurrentTime() {
    return fetch('https://worldtimeapi.org/api/timezone/Europe/London')
        .then(response => response.json())
        .then(data => data.datetime);
}

fetchCurrentTime().then((currentTime) => {
    cy.wrap(currentTime).should('include', '2022-11-23');
});

Important Notes

• When using .wrap(), ensure the value passed is properly defined; otherwise, it may cause test failures.
• The .wrap() method generates a Cypress chain, allowing you to use any Cypress command (such as .should(), .and(), .then(), etc.) for subsequent operations.
• .wrap() does not alter the structure or type of the original data or object; it simply creates a wrapper that can be operated on by Cypress command chains.

This capability makes Cypress more powerful and flexible when handling various data and integrating with other code. When writing tests, it helps ensure code cleanliness and maintainability while enhancing test expressiveness and accuracy.