title |
---|
root |
Get the root DOM element.
cy.root()
cy.root(options)
{% fa fa-check-circle green %} Correct Usage
cy.root() // Yield root element <html>
cy.get('nav').within(($nav) => {
cy.root() // Yield root element <nav>
})
{% fa fa-angle-right %} options (Object)
Pass in an options object to change the default behavior of .root()
.
Option | Default | Description |
---|---|---|
log |
true |
{% usage_options log %} |
timeout |
{% url defaultCommandTimeout configuration#Timeouts %} |
{% usage_options timeout cy.root %} |
.root()
yields the root DOM element.
The root element yielded is <html>
by default. However, when calling .root()
from a {% url .within()
within %} command, the root element will point to the element you are "within".
cy.root() // yields <html>
cy.get('form').within(($form) => {
cy.get('input[name="email"]').type('john.doe@email.com')
cy.get('input[name="password"]').type('password')
cy.root().submit() // submits the form yielded from 'within'
})
{% requirements parent cy.root %}
{% assertions retry cy.root %}
{% timeouts assertions cy.root %}
cy.root().should('match', 'html')
cy.get('.query-ul').within(() => {
cy.root().should('have.class', 'query-ul')
})
The commands above will display in the Command Log as:
{% imgTag /img/api/root/find-root-element-and-assert.png "Command Log root" %}
When clicking on the root
command within the command log, the console outputs the following:
{% imgTag /img/api/root/console-log-root-which-is-usually-the-main-document.png "Console Log root" %}
- {% url
cy.get()
get %} - {% url
.within()
within %}