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 find command

Profile picture for user arilio666
Written by arilio666 on 10/08/2021 - 10:01

In cypress, there is a unique way to find web elements using the find() command, Querying behavior of find() command is exactly same as JQuery find() method.

So typically, a find() command returns one or two DOM elements based on the CSS selector or any other parameter.

Now you may be wondering we have get() command for that why we need to see find()?

The only difference in find() and get() is that find() can be chained with other methods and cannot be used directly with the object cy. find() can only be chained with methods sticking with cy object such as get().

Syntax

.find('selector')
.find(selector, options)
  • Selector is used to filter matching descendent DOM element.
  • You can use log, timeout and includeShadowDOM options to change the default behavior of .find().

Example

describe('Automate AutoPract',()=>{
    it('Should load the url and find the clothing section and assert',()=>{
        
        // visit the site
        cy.visit('http://www.autopract.com/#/home/fashion')
        
        // close a popup that occurs immediately after the load.
        cy.get('.close').click()
        
        // navigating to the sites side list section where all the categories are placed.
        cy.get('.bar-style').click()
        cy.get('#sub-menu').should('be.visible')
        cy.get("ul[id='sub-menu']").find('li a').contains(' clothing ').should('be.visible')
        
    })

})

Above command can also be written as:

cy.get("ul[id='sub-menu']").find('li').find('a').contains(' clothing ').should('be.visible')

 However if you will replace get with find here, it will return error "Oops, it looks like you are trying to call a child command before running a parent command"

cy.find("ul[id='sub-menu'] li a").contains(' clothing ').should('be.visible')

but you can get the same result using get

cy.get("ul[id='sub-menu'] li a").contains(' clothing ').should('be.visible')
  • Here We are automating a site called http://www.autopract.com/#/home/fashion
  • We are using the get() to fetch the web element of the entire sub-menu section using CSS selector
  • Then go to ul->li, and inside li, go the 'a' tag which is the subtag or the child of li, and here We have used the find command to fetch the title.
  • And finally checking whether the clothing section is visible with should().
  • .find() will automatically retry until the element(s) exist in the DOM. Also, It will automatically retry until all chained exception pass.

As the find command is always chained, it is often chained with the get() command to be chained for the child element from a parent.

cy.get(parent).find(child)


  • This is the dom of the browser.
  • Here We have fetched the 'a' tag, which is the subtag of li, and li, which is the subtag of ul.
  • Thus, it is clear that the find() command is used to search for the web elements that are nested or have parent-child relation types of features.
  • That way, it'll isolate the child and gives out the result as quickly as possible.
Related Content
Cypress Tutorial
Cypress Get Command
Contains in Cypress
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