Skip to main content
Home
  • Tutorials
    • Quality Assurance
    • Software Development
    • Machine Learning
    • Data Science
  • About Us
  • Contact
programsbuzz facebook programsbuzz twitter programsbuzz linkedin
  • Log in

Main navigation

  • Tutorials
    • Quality Assurance
    • Software Development
    • Machine Learning
    • Data Science
  • About Us
  • Contact

Cypress Wrap

Profile picture for user arilio666
Written by arilio666 on 12/28/2021 - 14:09

Cypress wrap command is used to yield objects which were placed in it and yield its resolved value meaning that when you want to use cypress commands like should, type, click on an object or jquery element you might want to wrap it first before using the cypress commands.

To simply say this is a command used to convert non-cypress or non-cypress workable elements or objects into cypress workable things.

Now we will see syntaxes and examples based out on this wrap command so that we may get a clear understanding of what and how it is practically used before moving onto a real-time test example.

Cypress Wrap Syntax

cy.wrap(subject)
cy.wrap(subject, options)

Subject: An object to be yielded by wrap

Correct Use:

cy.wrap({Hero: Naruto})

Now let us see an example based on object:

  const Hero = () => {
            return 'Naruto'
          }
          
          cy.wrap({ name: Hero }).invoke('name').should('eq', 'Naruto') 
  • So here the object Hero is a javascript thing and cypress cannot be worked with.
  • We use the wrap to convert the object Hero into cypress and invoke key name passed with object Hero in the wrap to assert that it should be equal to Naruto which it returns true.

We can wrap elements too that we will be seeing in a real-time test environment.

Example 1: Cypress Element Wrap

  • So a real cypress test case will be written for this and will be explained neatly.
  • For this test, we will test out the traditional https://www.programsbuzz.com/user/login  site.
  • Check out for more cool QA-related articles over here using this link.

So coming back to our real case scenario here are the test steps we are gonna perform.

  1. Navigate to the site link https://www.programsbuzz.com/user/login
  2. Try to type in the username field using the yielded element object we get using the 'then' command.
describe('Wrap Command Use',()=> {
    it('Visit the website',()=>{
        cy.visit("/")
    })
    it("Use Wrap And Type In UsernName Field",()=>{
        cy.get('#edit-name').then($UserField => {

            cy.wrap($UserField).type('Moosten')
        })

      

    })
})
  • So here we can see that we are navigating to the site.
  • After the navigation test step, we are gonna try to type in our username field using the yielded element object using 'then'.

  • So $UserField is a jquery HTML element and can only be operated based on that and cypress cannot be operated here.
  • The wrap comes to play and we simply wrap our $UserField object into our cy.wrap() and from here any cypress commands can be used in a non-cypress workable scenario.

  • We can see that it has wrapped the yielded element and typed in using the cypress command after conversion.

Example 2: Cypress Variables / Objects / Arrays Wrap

describe('Wrap Command Use',()=> {

    })
    it("Variable/Objects/Arrays Wrap",()=>{
       //Variable
       let message = 'Red Or Blue'
       cy.wrap(message).should('eq','Red Or Blue')
       


       //Object
       let Hero = {name: 'Minato'}
       cy.wrap(Hero).should('have.property','name','Minato')

       //Array
       let Heroes = ['Minato','Naruto','Sarutobi','Orochimaru']
       cy.wrap(Heroes).should('include','Orochimaru')

        })

      

    })
})
  • These are some examples of how to wrap can be used under Variables, Objects, and Arrays.
  • Using wrap we can convert these non-cypress operations into cypress workable actions and can implement their commands over it.
Related Content
Cypress Tutorial
Cypress then command
Cypress its Command
Tags
Cypress
  • Log in or register to post comments

Choose Your Technology

  1. Agile
  2. Apache Groovy
  3. Apache Hadoop
  4. Apache HBase
  5. Apache Spark
  6. Appium
  7. AutoIt
  8. AWS
  9. Behat
  10. Cucumber Java
  11. Cypress
  12. DBMS
  13. Drupal
  14. GitHub
  15. GitLab
  16. GoLang
  17. Gradle
  18. HTML
  19. ISTQB Foundation
  20. Java
  21. JavaScript
  22. JMeter
  23. JUnit
  24. Karate
  25. Kotlin
  26. LoadRunner
  27. matplotlib
  28. MongoDB
  29. MS SQL Server
  30. MySQL
  31. Nightwatch JS
  32. PactumJS
  33. PHP
  34. Playwright
  35. Playwright Java
  36. Playwright Python
  37. Postman
  38. Project Management
  39. Protractor
  40. PyDev
  41. Python
  42. Python NumPy
  43. Python Pandas
  44. Python Seaborn
  45. R Language
  46. REST Assured
  47. Ruby
  48. Selenide
© Copyright By iVagus Services Pvt. Ltd. 2023. All Rights Reserved.

Footer

  • Cookie Policy
  • Privacy Policy
  • Terms of Use