Where do we use cy.wrap() command in Cypress Test

I have briefly outlined the basic idea of ​​the Cypress cy.wrap() command in my previous blog, so I will try to share how and where to use this with a few examples.

I use the WSO2 Asgardeo console and add a few sample test cases to the Asgardeo console signing page. (https://console.asgardeo.io)

So when using cy.wrap() command, we can use it on Web Elements, use it on elements which store data for example variables arrays, objects also we can use it with JavaScript Promises,

Let’s see with simple examples,

🌲🎁 Find an element and Wrap previously yielded jQuery Objects

I try to find the element of the email input field using the cy.get() command, this cy.get() command will yield us an element.

And importantly, if you call the then () callback function with this cy.get () command, you can use this element and validate it.

Ex:

it('Find an element and Wrap previously yielded jQuery Objects',
{baseUrl: 'https://console.asgardeo.io'}, () => {
cy.visit('/');
cy.get('#usernameUserInput').then($username => {
// jQuery to set Value
$username.val("niluka@gmail.com")
})
});

Considering the above example, the element is of type jquery ( $username)

And here I set its value using JQuery, using the jquery val() method.

This is one way, but most of us are familiar with Cypress commands, and if we need to use Cypress assertions, then we have to use Cypress objects.

So we can easily do the same thing(set value) using cy.wrap() command.

it('Find an element and Wrap previously yielded jQuery Objects',
{baseUrl: 'https://console.asgardeo.io'}, () => {
cy.visit('/');
cy.get('#usernameUserInput').then($username => {
// Using Cypress command
cy.wrap($username).type('niluka@gmail.com');
})
});

So this is how the cy.wrap() command is used for elements.

if you want to execute the Cypress command with jQuery so you have to add that one layer on top of the jQuery object so that you can use or leverage the cypress commands.

🌲🎁 Use cy.wrap with synchronized Javascript code such as Variables, Objects and Arrays

Cyprus commands are chained and we know that they are asynchronously executed.

1. Let’s check how we can validate the variable is equal to the expected value,

it('Cypress Wrap with synchronized Javascript code', () => {
//validate the variable is equal to the expected value
const header = "Sign In";
cy.wrap(header).should('eq', 'Sign In');
});

2. Validate the Object has a certain Property and Value

it('Cypress Wrap with synchronized Javascript code', () => {
// Check Object has a certain Property and Value
const pageHeader = { header: "Sign In" }
cy.wrap(pageHeader).should("have.property", "header", "Sign In")
});

3. Validate that the Array contains/includes an expected Item

it('Cypress Wrap with synchronized Javascript code', () => {
// Check Array contains an Item
const wso2Products = ["WSO2 Enterprise Integratort", "WSO2 API Manager", "WSO2 Identity Server", "Choreo", "Asgardeo", "Ballerina"]
cy.wrap(wso2Products).should("contains", "Asgardeo")
});

🌲🎁 Now important use, let’s see how we can use cy.wrap() with Promise, as this will help to fix some errors in running our test, especially with async and sync codes.

Here is a simple function, which returns a Promise and only has a resolve parameter here ( whenever you create a promise you have got resolve and reject), but when you wrap a promise in Cypress it only gives you back whatever you’re resolving.

const product = (pname, ms) => {
console.log('Promise begin...')
return new Promise(resolve => {
setTimeout(() => {
console.log('Promise finished...Product '+pname+' is returned...')
resolve({ name: pname })
}, ms)
})
}

This promise will return a product, Since the product object has a name, this function will give the value of that property and there is also a delay added to this promise.

If we add this function to the test we must provide the name and the time.

So we are expecting that this promise would be resolved in 2 seconds and the outcome would be a product with the name “Asgardeo”.

If we add this function as we normally use in JavaScript, this will not work as expected, that is, during the Cypress test, it will not wait for the expected delay and will take effect immediately.

it('Cypress Wrap command - JavaScript Promise', () => {
// Test Case Completes immediately
// TC doesn't wait for the promise to complete
const productExpected = product("Asgardeo", 2000)
});

Because Cypress context does not know about this JavaScript promise.

To fix this, we can use cy.wrap()

it('Cypress Wrap command - JavaScript Promise', () => {
const productExpected = product("Asgardeo", 200000)
cy.wrap(productExpected)
});

And also with this, you can do some assertions as well, ex:

This should have a property > name and the value has to be “Asgardeo”

it('Cypress Wrap command - JavaScript Promise', () => {
// Test Case Completes immediately
// TC doesn't wait for the promise to complete
// Also, couldn't test if the promise has returned the product Object
const productExpected = product("Asgardeo", 2000)

// Solution :) - WRAP
//cy.wrap(productExpected)

// With Assertions
cy.wrap(productExpected).should("have.property", "name", "Asgardeo")
});

And if we want to use the same promise again (after resolving once), There this command won’t be wait because the promise is already resolved.

Importantly, Cypress commands are chained and then executed.

So if we want this promise to execute after any Cypress command we need to run this promise inside the then() callback function.

it('Cypress Wrap command - JavaScript Promise', {baseUrl: 'https://console.asgardeo.io'}, () => {
// So if we want this promise to execute after any CYPRESS command, we run promise inside THEN Block
cy.visit('/').then(() => {
const productExpected = product("Asgardeo", 2000)
cy.wrap(productExpected)
})
});

You can refer to more information through the official document, https://docs.cypress.io/api/commands/wrap

That's it. :)