Cypress first Command

Within a set of DOM elements, the first command fetches the first DOM element from that set. This behavior of the first command in cypress is that of the exact behavior of the jquery first command.

Syntax

.first()
.first(options)

Options we can include in the command can be:

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

Correct Use

cy.get('li').first()

This gets the first element of the li tag.

Incorrect Use

cy.first();

It cannot be chained up with cy directly.

Example

Let us see a sample example of how this works:

<ul>
  <li class="uno">Hola1</li>
  <li class="tres">Hola2</li>
  <li class="des">Hola3</li>
  <li class="tez">Hola4</li>
</ul>

cy.get('li').first()

This command for the above DOM elements yields <li class="uno">Hola1</li> because this element is in the first place.

Now let us see a real-time example of automating our traditional https://www.programsbuzz.com/. We will be using the parents and children command to use the first command.

If you want to know about parents and children command dive here https://www.programsbuzz.com/article/cypress-parents-command.

So let us get back to our first command.

Here are the test steps of what we are about to do. This will be similar to the parents article test.

1. Visit the site.
2. Click on ask a doubt.
3. Select the parents with the ask doubt menu bar scope and get their children.
4. Out of those children, click the first element, selecting the home tab.
5. Perform click, which should take us back to the home page.

Let us dive in.

describe('Should load the programsbuzz website',()=> {
    
it('Track down parents of askdoubt and try to click home',()=>{
        cy.visit("/")
        cy.contains('Ask Doubt').click()
        cy.get('li.menu-item--active-trail').parents('.gva_menu_main').children().first().click()
    })
})

• As we can see, we have navigated to the site and clicked the ask doubt tab.
• We have selected its parent out of the tab, which is gva_menu_main.
• This gva_menu_main yields children on which we will perform the first command.

Here we can see the children of the following element yield when performing the first command. Li.menu-item will be selected.

So when clicked upon, this will perform the click on the first element out of the children yielded elements and take us back to the home page.

We can see that it has selected the first element and clicked on it.