feat: add select assertions (#349)

Author: bahmutov

app/commands/actions.html

@@ -297,7 +297,7 @@ <h4><a href="https://on.cypress.io/rightclick">.rightclick()</a></h4>
             </form>
           </div>
         </div>
-        
+
         <div class="col-xs-12">
           <hr>
         </div>
@@ -454,17 +454,34 @@ <h4><a href="https://on.cypress.io/uncheck">.uncheck()</a></h4>
         <div class="col-xs-7">
           <h4><a href="https://on.cypress.io/select">.select()</a></h4>
           <p>To select an option in a <code>select</code>, use the <a href="https://on.cypress.io/select"><code>.select()</code></a> command.</p>
-          <pre><code class="javascript">// Select option(s) with matching text content
+          <pre><code class="javascript">// 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'])</code></pre>
+  .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
+  .invoke('val')
+  .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+// assert the selected values include oranges
+cy.get('.action-select-multiple')
+  .invoke('val').should('include', 'fr-oranges')</code></pre>
         </div>
         <div class="col-xs-5">
           <div class="well">

cypress/integration/examples/actions.spec.js

@@ -183,17 +183,34 @@ context('Actions', () => {
   it('.select() - select an option in a <select> element', () => {
     // https://on.cypress.io/select
 
+    // 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'])
+      .invoke('val')
+      .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+    // assert the selected values include oranges
+    cy.get('.action-select-multiple')
+      .invoke('val').should('include', 'fr-oranges')
   })
 
   it('.scrollIntoView() - scroll an element into view', () => {