To select an option in a select, use the .select() command.
-
// Select option(s) with matching text content
+
// at first, no option should be selected
+cy.get('.action-select')
+ .should('have.value', '--Select a fruit--')
+
+// Select option(s) with matching text content
cy.get('.action-select').select('apples')
+// confirm the apples were selected
+// note that each value starts with "fr-" in our HTML
+cy.get('.action-select').should('have.value', 'fr-apples')
cy.get('.action-select-multiple')
-.select(['apples', 'oranges', 'bananas'])
+ .select(['apples', 'oranges', 'bananas'])
+ // when getting multiple values, invoke "val" method first
+ .invoke('val')
+ .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
// Select option(s) with matching value
cy.get('.action-select').select('fr-bananas')
+ // can attach an assertion right away to the element
+ .should('have.value', 'fr-bananas')
cy.get('.action-select-multiple')
- .select(['fr-apples', 'fr-oranges', 'fr-bananas'])