Basic Commands used in Cypress

‘and’ command in cypress

• It is used to create an assertion and is an alias of .should ().

Example:

//element is visible & enabled
cy.get('#inputField').should('be.visible').and('be.enabled')
//element is visible
cy.contains('Login').and('be.visible') 

‘as’ command in cypress 

• It provides an alias for later usage.

Example:

//alias element as First and verify it is disabled once clicked
cy.get('#txt').find('li').first().as('First')
cy.get('@First').click().should('be.disabled')

‘blur’ command in cypress

• It blurs an element in focus.

Example:

//blur input
cy.get('#txt'). type('abc').blur()

‘check’ command in cypress

• It checks radio buttons or checkboxes.
• It is applied to elements having input tags.

Example:

Select the radio with the value of ‘UK’

Canada
United Kingdom

//checks element having value as  chkbox
cy.get('[type="radio"]').check('UK')

‘select’ command in cypress

• Select an within a .

Example:

// yieldsapples
cy.get('select').select('apples').should('have.value', '456')

‘children’ command in cypress

• It obtains the sub elements of an element.

Example:

//obtains children of element list l1
cy.get('ul.l1').children()

‘clear’ command in cypress

• It removes the value from textarea or input.

Example:

//removes input abc
cy.get('#userName'). type('test').clear()

‘clearCookie’ command in cypress

• It removes a particular browser cookie.

Example:

//clears cookie
cy.clearCookie('cookiename')

‘clearCookies’ command in cypress

• It removes the browser cookies from an existing domain and subdomain.

Example:

//clear all cookies
cy.clearCookies()

‘getCookie’  command in cypress

• It obtains a particular browser cookie by its name.

Example:

cy.getCookie('name')

‘getCookies’ command in cypress

• It obtains all the cookies

Example:

cy.getCookies()

‘clearLocalStorage’ command in cypress

It removes the local Storage data from an existing domain and subdomain.

Example:

//clear all local storage
clearLocalStorage ()

‘click’ command in cypress

• This command is to click any element on the DOM.

Example:

cy.get('btn').click()  //clicking the button 
cy.get('btn').click({ force: true })  //clicking the button by passing the option 'force' as true

‘contains’ command in cypress

• It obtains an element having a specific text. The element can have more than the text and still match.

Example:

//returns element in #txt having Tutor text
cy.get('#txt').contains('TutorialsHut')

‘Dblclick’ command in cypress

• It double-clicks an element in Document Object Model (DOM).

Example:

cy.get('button').dblclick() // Double click on button
cy.focused().dblclick() // Double click on element with focus
cy.contains('Home').dblclick() // Double click on first element containing 'Home'

‘each’ command in cypress

• Iterate through an array like structure (arrays or objects with a length property).

Example:

Iterate over an array of DOM elements

cy.get('ul>li').each(($el, index, $list) => {
  // $el is a wrapped jQuery element
  if ($el.getText() === 'something') {
    // wrap this element so we can
    // use cypress commands on it
    cy.wrap($el).click()
     } else {
   // do something else
  }
})

‘eq’ command in cypress

• It refers to an element at a particular index in an array of elements.

Example:

//obtain third td in tr
cy.get('tr>td').eq(2)

‘exec’ command in cypress

• It runs a system command.

Example:

cy.exec('npm init')

‘get’ command in cypress

• The get() method gets one or more elements based on the selector passed as a parameter

Example:

cy.get('tr>td')

‘find’ command in cypress

• The find() method returns one or more DOM elements based on the selector that’s passed as a parameter. 
• However, the only difference being is that the find() method always chains with other methods that return DOM elements, such as the get() method. 
• Moreover, you can never chain/invoke the find() method on the “cy” object, as we did with the “get()” method in the previous section.

Example:

//obtain td from tr
cy.get('tr').find('td')

‘first’ command in cypress

• It obtains the first element from a group of elements.

Example:

//obtain first td in tr
cy.get('tr>td').first()

‘go’ command in cypress

• It moves forward or backward to the next or previous URL in browser history.

Example:

//like clicking back button
cy.go('back')
//like clicking forward button
cy.go('forward')

‘visit’ command in cypress

• It launches URL.

Example:

cy.visit('https://www.tutorialspoint.com/index.htm')

‘next’ command in cypress

• Get the immediately following sibling of each DOM element within a set of DOM elements.

Example:

//Testing a datalist using next 
cy.get('#fruit option')
  .first()
  .should('have.text', 'Apple')
  .next()
  .should('have.text', 'Banana')
  .next()
  .should('have.text', 'Cantaloupe')

‘Parent’ command in cypress

• It obtains the parent element from a group of elements in DOM.

Example:

//get parent of element with class h
cy.get('.h').parent()

‘should’ command in cypress

• It is used to create an assertion and is an alias of .and ().

Example:

//assert element is visible & enabled
cy.get('#txt').should('be.visible').and('be.enabled')

‘wait’ command in cypress

• Wait for a certain time in milliseconds or for an aliased element prior to moving the following step.

The usage is as follows :

cy.wait(1000)

‘title’ command in cypress

• It obtains the document.title of the active page.

Example:

cy.title()

‘viewport’ command in cypress

• It manages the dimension and positioning of the screen.

Example:

// viewport to 1025px and 1920px
cy.viewport(1025, 1920)

‘Log’ command in cypress

• It prints the messages to the Command Log.

Example:

cy.log('Cypress logging ')