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

Profile picture for user devraj
Written by devraj on 11/13/2021 - 23:47

Cypress parent command gets the parent DOM element of a set of DOM elements. parent() command is different from parents() command, parent() only travels a single level up the DOM tree as opposed to the parents() command which travels multiple levels.

The querying behavior of parent() command is exactly same as JQuery .parent() method which returns the direct parent element of the selected element. 

Syntax

This command has 4 variations

.parent()
.parent(selector)
.parent(options)
.parent(selector, options)

Here in options we can use log and timeout.

Note: This command can not be chained with cy object so you can not type cy.parent()

When you will use parent command after selecting the child element, it will yield the new DOM element. After getting the element you can assert that parent should have some class or attribute or anything else. Also, you can perform some action on parent element. You can chain parent() with another parent() command, children()  command or any other command.

Example

For demo we will consider autopract website where we will perform following 3 actions:

  1. Assert parent contain particular attribute
  2. refer parent of parent and check it contains particular class
  3. refer sibling of an element using parent and child command
  it.only('find get difference', ()=> {

    cy.visit("/")
    cy.get('button.close').click();
    
    // Assert parent attribute
    cy.get('li.mobile-setting').parent().should('have.attr','_ngcontent-serverapp-c68')

    // refer parent of parent
    cy.get('li.mobile-setting').parent().parent().should('have.class','icon-nav')

    // Click on sibling element using parent and children
    cy.get('li.mobile-setting').parent().children('#search-widgets').click()
  })
Related Content
Cypress Tutorial
Cypress within 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