Static Dropdown verification with Cypress

Cypress handles static dropdowns with the help of its in built commands. For a static dropdown, the tagname of the element should be <select> and its child elements should have the tagname <option>.

The command used is select(). This command needs to be chained with a command that gives DOM elements having tagname as select. The various usage of select commands are listed below −

• select(value) − The select() command with argument value selects the option with that value. The get method should have the css selector of the static dropdown when chained with select().

cy.get('select').select('value1')

• select(text) − The select() command with argument text selects the option with that text content. The get method should have the css selector of the static dropdown when chained with select().

cy.get('select').select('text')

• select('Value1', 'Value2') − The select() command with arguments selects the array of options with those values or text contents. The get method should have the css selector of the static dropdown when chained with select().

cy.get('select').select(['Tutorialspoint', 'Cypress'])

• select({ force: true }) − The select() command with option as argument changes the default behavior of static dropdown. There can be three types of options − log, force and timeout having default values as true, false and defaultCommandTimeout (4000 milliseconds) respectively.

cy.get('select').select('Cypress', { force: true})

The option force is used by Cypress to interact with hidden elements and then forces to select an option from the dropdown internally.

We can apply assertions with the select() command in Cypress.

Syntax

cy.get('select').select('Cypress').should('have.value', 'Cypress')

Example

Code Implementation with select().

describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case2', function (){
      cy.visit("https://www.tutorialspoint.com/selenium /selenium_automation_practice.htm");
      // checking by values
      cy.get('input[type="checkbox"]')
      .check(['Manual Tester','Automation Tester']);
      // selecting a value from static dropdown
      cy.get('select[name="continents"]').select('Europe')
      // asserting the option selected
      .should('have.text', 'Europe')
   });
});