Cypress select Command

Profile picture for user arilio666

If there is a select tag and there are a bunch of options to select from, the tag cypress select command is the one which should be used.

Syntax:

.select(value)
.select(values)
.select(value, options)
.select(values, options)

Arguments Used In Select:

  • Value can be of string and number, and the specification can be of value, index, or text.
  • An array of values, index, and text can also be passed.
  • Options comprise force, log, and timeout.

Force: Forces the action default is false.
Log: Displays command in command log, and the default is true.
Timeout: Time to wait.

Correct Usage:

cy.get('select').select('Badminton')

Wrong Use:

cy.select('Badminton')

Example:

We will automate our autopract site.

  • This is what it looks like, and we will do all the select methods by value, text, and index.
       cy.visit('http://autopract.com/selenium/dropdown1/')
       cy.get('.custom-select').select('Football').should('have.value','item3')
       cy.get('.custom-select').select('item2').should('have.value','item2')
       cy.get('.custom-select').select(0).should('have.value','item1')
  • The first select is done by text with an assertion value of its.
  • The second one is done with the value itself.
  • The third select operation is done by index, and as badminton is in the 0th index, it selects it.

What if we have multiple select attributes on our site?

       cy.get('.custom-select')
 .select(['Cricket,' 'Football'])
 .invoke('val')
 .should('deep.equal', ['item2', 'item3'])
 
  • Select options inside arrays can be used for this.

Rules For Using Select:

  • .select() should be chained off with a command which yields DOM elements.
  • .select()only works on select tags.
  • .select() will automatically wait until time has passed.
  • .select() retries until chained assertions pass.
  • .select() can timeout waiting for the element.
  • .select() can timeout waiting for assertions.