first.md

title
first

Get the first DOM element within a set of DOM elements.

{% note info %} The querying behavior of this command matches exactly how {% url .first() http://api.jquery.com/first %} works in jQuery. {% endnote %}

Syntax

.first()
.first(options)

Usage

{% fa fa-check-circle green %} Correct Usage

cy.get('nav a').first()     // Yield first link in nav

{% fa fa-exclamation-triangle red %} Incorrect Usage

cy.first()                  // Errors, cannot be chained off 'cy'
cy.getCookies().first()     // Errors, 'getCookies' does not yield DOM element

Arguments

{% fa fa-angle-right %} options (Object)

Pass in an options object to change the default behavior of .first().

Option	Default	Description
log	true	{% usage_options log %}
timeout	{% url defaultCommandTimeout configuration#Timeouts %}	{% usage_options timeout .first %}

Yields {% helper_icon yields %}

{% yields changes_dom_subject_or_subjects .first %}

Examples

No Args

Get the first list item in a list

<ul>
  <li class="one">Knick knack on my thumb</li>
  <li class="two">Knick knack on my shoe</li>
  <li class="three">Knick knack on my knee</li>
  <li class="four">Knick knack on my door</li>
</ul>

// yields <li class="one">Knick knack on my thumb</li>
cy.get('li').first()

Rules

Requirements {% helper_icon requirements %}

{% requirements dom .first %}

Assertions {% helper_icon assertions %}

{% assertions existence .first %}

Timeouts {% helper_icon timeout %}

{% timeouts existence .first %}

Command Log

Find the first input in the form

cy.get('form').find('input').first()

The commands above will display in the Command Log as:

{% imgTag /img/api/first/get-the-first-in-list-of-elements.png "Command Log first" %}

When clicking on first within the command log, the console outputs the following:

{% imgTag /img/api/first/console-log-the-first-element.png "console.log first" %}

See also

• {% url .eq() eq %}
• {% url .last() last %}