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

Profile picture for user arilio666
Written by arilio666 on 01/11/2022 - 14:05

Cypress root command fetches the root DOM element. Which means this command is used to fetch the root element of a webpage from where the origin tag was created.

  • Simply put, it gets the root of a grown tree buried within the ground.
  • It can also be coupled mainly with the within command to yield its root.
  • By default, the root DOM element yielded by this command is <html>.
  • When calling .root() from a .within() command, the root element will point to the element you are "within".

Syntax

cy.root()
cy.root(options)

Some of the options we can include in the command can be a timeout, log, etc.

  • Log: To display the command in the command log.
  • Timeout: Wait for some particular thing to get finished before timing out.

Correct Use

cy.root() --> Yield root element <html>

cy.get('li').within(($li) => {
  cy.root() // Yield root element <li>
})

When inside within the root element will point out to the element we are "within."

Let us check out various root command examples.

Example 1: Using Plain cy.root()

Let us check out what cy.root() does when executing it plainly without using it within command.

In this article, we will be using the  https://www.programsbuzz.com/user/login login page for the root command.

it('Visit Page',() => {
    cy.visit("https://www.programsbuzz.com/user/login")
    cy.root()
}) 

As we can see, it has yielded <html> element.

Example 2: Using Assertion

it('Visit Page',() => {
    cy.visit("https://www.programsbuzz.com/user/login")
    cy.root().should('match', 'html')
}) 

As we can see, it has been asserted that the yielded element is HTML.

Example 3: Form Interaction With Root

it('Visit Page',() => {
    cy.visit("https://www.programsbuzz.com/user/login")
    
    cy.get('form#user-login-form').within(($form)=>{
        cy.get("input#edit-name").type('naruto')
        cy.get("input#edit-pass").type('shadowclone')
        cy.root().submit()
    })
}) 
  • We are first visiting the respective page.
  • Then we isolate a part of the form with the within command and create a parameter $form.
  • Now we are fetching the CSS selectors of the username and password field.
  • Using root now as it submits the form yielded from within.
  • Submit command is used in forms to submit within that form scope automatically.

We can see that root yields here from within command.

Related Content
Cypress Tutorial
Cypress within command
Cypress then 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