Cypress - wrap() Method

Last Updated : 12 Sep, 2024

Cypress's wrap() method allows you to bring non-Cypress objects, such as JavaScript arrays, objects, or even DOM elements, under Cypress' command chain. This allows you to use Cypress commands like should(), then(), and others on these objects, which wouldn’t normally support Cypress commands.

Usages of Cypress - wrap() Method

The wrap() method is commonly used when:

You need to manipulate or assert non-Cypress objects within Cypress commands.
Working with plain JavaScript objects or arrays inside Cypress tests.
Accessing elements or results from non-Cypress libraries and chaining Cypress commands to them.

Syntax

cy.wrap(subject)

Arguments

subject: The object, array, or element to be wrapped by Cypress, allowing Cypress commands to be used on it.

Example 1: Wrapping a JavaScript Object

Cypress Test Code

JavaScript

describe('Wrap JavaScript Object Test', () => {
  it('should assert values inside a JavaScript object', () => {
    const user = {
      name: 'John Doe',
      age: 30,
      active: true
    };

    // Wrap the user object and perform assertions on it
    cy.wrap(user).should('have.property', 'name', 'John Doe');
    cy.wrap(user).should('have.property', 'age', 30);
    cy.wrap(user).should('have.property', 'active', true);
  });
});

Explanation

In this example, the wrap() method is used to bring a plain JavaScript object (user) into Cypress's command chain. After wrapping the object, assertions are made on its properties (name, age, and active). Normally, Cypress cannot operate on plain objects, but wrap() allows you to do so.

Output:

Example 2: Wrapping DOM Elements

HTML Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM Wrap Example</title>
</head>
<body>
  <div id="message-container">
    <p id="message">This is a message inside the container.</p>
  </div>
</body>
</html>

Cypress Test Code

JavaScript

describe('Wrap DOM Element Test', () => {
  it('should wrap a DOM element and perform actions', () => {
    cy.visit('http://localhost:3000');
    
    // Get the message element and wrap it
    cy.get('#message-container').then((container) => {
      cy.wrap(container).find('#message').should('have.text', 'This is a message inside the container.');
    });
  });
});

Explanation

Here, wrap() is used to bring a DOM element (#message-container) into Cypress’s command chain after using a then() callback. By wrapping the container, we can then chain Cypress commands like find() and should() to interact with elements inside the container (#message), verifying its text content.

Output:

Conclusion

The wrap() method in Cypress is an incredibly useful feature that bridges the gap between Cypress commands and non-Cypress objects like JavaScript arrays, objects, and DOM elements. Whether you need to assert on plain JavaScript objects or interact with DOM elements returned by external libraries, wrap() helps you extend the capabilities of Cypress and make your tests more flexible.

Cypress - wrap() Method

codersaksyevt

Improve

Article Tags :

Cypress - wrap() Method

Usages of Cypress - wrap() Method

Syntax

Arguments

Example 1: Wrapping a JavaScript Object

Explanation

Output:

Example 2: Wrapping DOM Elements

Explanation

Output:

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?