Cypress - Dropdown


The command select is used to work with static dropdown. In the html code, a dropdown has a select tag and the dropdown elements are represented by option tagname.

Dropdown Cypress Commands

The dropdown related Cypress commands are as follows −

  • The command used to choose the option Cypress is as follows −

cy.get('select').select('Cypress')
  • The command that chooses options Tutorialspoint and JavaScript is as follows −

cy.get('select').select(['Tutorialspoint', 'JavaScript'])
  • The command which can choose a value of a dropdown option along with options (to modify default characteristics) is as follows −

cy.get('select').select('option1', options )
  • The command that chooses the multiple values with options is as follows −

cy.get('select').select(['option1', 'option2'], options)

Options for dropdown in Cypress

The options which are available for the dropdown in Cypress are as follows −

  • log – Default value – true− This is used to turn on/off the console log.

  • timeout – Default value – defaultCommandTimeout(4000)− This is used to provide the maximum wait time for the selection prior to throwing an error.

  • force – Default value – false− This is used to enforce an action.

Assertion can be applied to the select commands in Cypress.

Let us make an attempt to select the option India from the dropdown having value as 99 in the html code.

Dropdown Cypress Commands

Implementation

The implementation of the dropdown commands to select the option India in Cypress is explained below −

// test suite
describe('Tutorialspoint', function () {
   // it function to identify test
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://register.rediff.com/register/register.php")
      //select option India with value then verify with assertion
      cy.get('select[id="country"]').select('99').should('have.value', '99')
   })
})

Execution Results

The output is stated below −

Dropdown Commands

The output shows that the Country dropdown selects the option India (in the html code, this option is identified with the value as 99).

Advertisements